Accessibility quiz

The accessibility entries in the glossary, in brief. Open any one for the interactive demo behind it.

Colour blindness

Colour blindness is reduced ability to tell certain colours apart - most commonly red from green - affecting a meaningful slice of people, mostly men. For design it means one thing above all: if colour is the only way you signal something, a lot of users simply won't receive the message.

Keyboard trap

A keyboard trap happens when focus enters a section but can’t exit via keyboard - for example, a widget, embed, or dialog that captures Tab, leaving keyboard or switch users stranded and unable to reach the rest of the page. For someone who can’t use a mouse, it’s not an annoyance; it’s a dead end that can make the whole page unusable.

Accessible forms (labels and instructions)

An accessible form gives every control a real, programmatically-associated label and clear instructions, so a screen-reader user hears what each field is for before they fill it in. Without that, the form may look fine but announces as a row of nameless "edit text" boxes - usable by sight, a guessing game by ear.

Focus management

Focus management means deliberately guiding where keyboard focus lands as the interface updates - moving it into a dialog when it opens, returning it to the trigger when it closes, or placing it on a new view or error. Done right, keyboard and screen-reader users stay in a sensible place; done wrong, they’re left stranded - either on invisible elements or back at the top after every action.

Semantic HTML

Semantic HTML means using elements for their intended purpose - header, nav, main, button, h1-h6, ul/ol/li - rather than wrapping everything in styled divs and spans. The meaning isn't visible on screen but is crucial for assistive tech: it lets screen readers announce roles, list headings, and jump straight to the main content.

Screen readers

A screen reader presents on-screen content through speech and/or a braille display, letting blind and low-vision people use a computer. Users can read sequentially, but they also jump through headings, landmarks, links, form controls, tables and search - they rarely listen to a whole page top to bottom. Good source order, accessible names and meaningful markup are what make that navigation possible.

Readability and plain language

Readability is how easily text can be read and understood; plain language is writing deliberately for that ease - common words, short sentences, active voice, no needless jargon. It isn't dumbing down; it's respecting the reader's time and the fact that stress, distraction, a second language or a cognitive difference all lower the reading level anyone can comfortably handle.

ARIA

ARIA (Accessible Rich Internet Applications) is a set of HTML attributes - roles, states, and properties - that tell assistive technology what custom elements are and what they’re doing when native HTML won’t work. It adds accessibility on top of markup: this div is a switch, it’s toggled on, this region is live. Use native HTML where possible - ARIA adds semantics, but doesn’t provide keyboard behaviour or interaction logic, and incorrect ARIA is worse than omitting it entirely.

WCAG levels (A, AA, AAA)

WCAG - the Web Content Accessibility Guidelines - groups its success criteria into three conformance levels: A (the minimum), AA (the most common organisational target, referenced by many accessibility regimes), and AAA (the highest, often unfeasible to meet site-wide). Each level builds on the previous one, so AA includes all of A, and AAA includes all of AA.

Captions, transcripts and audio descriptions

Ways to make audio-visual content reach people who can't fully see or hear it. Captions put speech and meaningful sound on screen, in sync, for people who can't hear. A standard transcript is a readable equivalent of the audio; a descriptive transcript also includes the essential visual events. Audio description speaks the important visuals in the gaps, for people who can't see. Each serves a different barrier - and most media needs more than one.

Cognitive accessibility

Cognitive accessibility means designing so people with differences in memory, attention, language, literacy, or processing - whether permanent, temporary like stress or fatigue, or just being new - can understand and use a product. It’s less about a single assistive tech and more about reducing the mental effort an interface demands.

Keyboard navigation

Keyboard navigation means using the keyboard to operate an interface: Tab to move between controls, arrow keys to navigate within a group, Enter or Space to activate. If the mouse disappeared, everything would still have to work.

Focus order

Focus order is the sequence the Tab key follows across a page. When it matches visual order, navigation feels natural; when it doesn’t, users may jump unexpectedly.

Skip links

A skip link is a link - often visually hidden until it receives keyboard focus, but never hidden from assistive technology - that lets you bypass a repeated block, usually the navigation, and jump straight to the main content. Sighted mouse users rarely see it; keyboard users would be lost without it.

Alt text

Alt text is a text alternative that explains an image’s purpose or meaning within its context. Decorative images should use empty alt text; complex images may require a longer description elsewhere.

Target size

Target size is the size of a tappable or clickable element. If it’s too small or too crowded, people may miss it - due to larger fingers, limited dexterity, tremor, motion, or a small screen - and a control they can’t reliably hit is effectively broken. Space around a target reduces accidental activation, but that space isn’t part of the target unless it’s clickable too.

Reduced motion

Reduced motion is honouring a user's request to cut animation. Movement on screen makes some people dizzy, nauseous or worse; the prefers-reduced-motion setting is them asking you to keep things still, and a good interface listens.