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 is when focus enters a spot but can't exit via keyboard - 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 what they mean - header, nav, main, button, h1-h6, list - rather than wrapping everything in styled divs and spans. The meaning is invisible on screen but everything to assistive technology: it's what lets a screen reader announce roles, list headings, and jump straight to the main content.

Screen readers

A screen reader is software that speaks (or sends to a braille display) what's on screen, letting blind and low-vision people use a computer by ear. Crucially, it turns a two-dimensional visual layout into a one-dimensional stream - read in source order, element by element - so the experience is linear, sequential, and entirely dependent on the meaning in your markup.

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 a custom element is and what it's doing when native HTML can't. It adds an accessibility layer on top of the markup: this div is a switch, it's currently on, this region is live. Powerful, and easy to get wrong.

WCAG levels (A, AA, AAA)

WCAG - the Web Content Accessibility Guidelines - groups its success criteria into three conformance levels: A (the bare minimum), AA (the standard most organisations and laws target), and AAA (the highest, often impractical to meet site-wide). Each level builds on the last, so AA includes all of A, and AAA includes all of AA.

Captions, transcripts and audio descriptions

These are three ways to make audio-visual content reach people who can't fully see or hear it. Captions put the audio (speech and meaningful sounds) on screen, in sync, for people who can't hear. A transcript is the whole thing as readable text. Audio description narrates the important visuals, in the gaps, for people who can't see. Each serves a different barrier - and most media needs more than one.

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.

Cognitive accessibility

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

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, each tab can jump unexpectedly.

Skip links

A skip link is a hidden link, revealed the moment you press Tab, that jumps straight past a repeated block - usually the navigation - to the main content. Sighted mouse users never see it; keyboard users would be lost without it.

Alt text

Alt text is the written description an image carries for people who can't see it - read aloud by a screen reader, and shown if the image fails to load. Good alt conveys what the image means; bad or missing alt leaves a hole in the page.

Target size

Target size is the size of a tappable or clickable element plus the space around it. If it’s too small or too crowded, users may miss it - due to fat fingers, tremors, small screens, or a moving bus - and a control they can’t reliably hit is effectively broken.

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.