Accessibility
Focus styles, contrast, motion, screen-reader-only text and touch targets.
1 min readv1
NibCSS writes the CSS you ask for — accessible defaults are your recipes' job. Build them in once.
Visible focus#
TypeScript
components: {
focusable: "otl=none; focus-visible:otl=3px solid #6468E6; focus-visible:otlo=2px",
btn: "focusable; d=inline-flex; …",
}Screen-reader-only text#
TypeScript
components: {
"sr-only": "pos=absolute; w=1px; h=1px; p=0; m=-1px; ovf=hidden; clip=rect(0,0,0,0); whs=nowrap; bd=0",
}HTML
<button nib="btn"><svg aria-hidden="true">…</svg><span nib="sr-only">Close</span></button>Contrast#
Aim for 4.5:1 for body text and 3:1 for large text and UI borders. Check both themes — muted greys often fail in dark mode.
Touch targets#
mnw=44px; mnh=44px on icon buttons, or pad the hit area with p.
Motion#
Honour prefers-reduced-motion (see Animations).
Don't rely on colour alone#
Pair status colours with an icon or text: a red border and an error message.