Topic
Accessibility
Accessibility is usability for everyone - including those who can’t use a mouse, see the screen, or have a perfect day. It’s not an afterthought; it’s good design for more users.
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 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.
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 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.
Try the demo -
accessibility
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.
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 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.
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 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.
Try the demo -
accessibility
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.
Try the demo -
accessibility
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.
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
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.
Try the demo -
accessibility
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.
Try the demo -
accessibility
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.
Try the demo -
accessibility
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.
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.