Topic
Accessibility
Accessibility is just usability with the audience drawn properly - everyone, including the people not using a mouse, not seeing the screen, not having a perfect day. It is rarely a separate feature bolted on at the end; far more often it is the same good decisions, made with more of your users in mind.
This cluster covers the structure beneath an interface that decides whether it works without a mouse or a screen: the order focus moves through a page, the shortcuts that let someone skip the repetitive parts. Invisible to many, and the whole experience for some.
Each entry puts you on the other side of the interaction - tabbing through, jumping past - so the cost of getting it wrong stops being abstract.
The accessibility entries 17
-
accessibility
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.
Try the demo -
accessibility
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.
Try the demo -
accessibility
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.
Try the demo -
accessibility
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.
Try the demo -
accessibility
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.
Try the demo -
accessibility
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.
Try the demo -
accessibility
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.
Try the demo -
accessibility
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.
Try the demo -
accessibility
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.
Try the demo -
accessibility
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.
Try the demo -
accessibility
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.
Try the demo -
accessibility
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.
Try the demo -
accessibility
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.
Try the demo -
accessibility
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.
Try the demo -
accessibility
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.
Try the demo -
accessibility
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.
Try the demo -
accessibility
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.
Try the demo
Know these already? Take the accessibility quiz, or revise the terms with flashcards.