Design problem

The product is not accessible

An audit came back long, or somebody reported that the product cannot be used with a keyboard or a screen reader.

How you know you have it

1Run the whole primary flow with the keyboard alone, and fix what you cannot reach.
2Check that every interactive element has a name, a role and a visible focus state.
3Announce status changes through a live region rather than colour alone.
4Test reflow at 320 pixels and text at 200 percent before redesigning anything.

Most of what an audit finds was decided months earlier, in colour choices, component structure and interaction design.

A div styled as a select looks right and provides none of the name, role, state or keyboard behaviour a select supplies for free.

Automated checks catch a minority of issues. Keyboard and screen reader passes catch the rest.

Ordered the way an audit actually runs: keyboard first, then names and roles, then announcements, then reflow.

The mechanism underneath the symptom. Read these when the fix needs justifying to somebody else.

Forgiveness
An interface people can explore without fear produces confident users and fewer support tickets.
PrincipleExpert heuristic
Constraints
Restricting what is possible is the cheapest way to prevent an entire class of error.
PrincipleExpert heuristic
Consistency and Standards
The same thing should look and behave the same way everywhere, and follow platform convention where one exists.
HeuristicExpert heuristic

The visual and structural levers that produce or relieve this problem.

Contrast
Difference is what makes anything perceivable, and it is measurable for text against its background.
UI foundationCraft convention
Visual States
Every interactive element needs a defined appearance for every state it can be in, and most designs specify only two.
UI foundationCraft convention
Color Accessibility
Around one in twelve men has a colour vision deficiency, so colour has to be reinforced by something else.
UI foundationEstablished research
Motion
Animation should explain a change, and anything that does not explain something is delay.
UI foundationCraft convention

Recognised solutions, with the conditions under which each earns its place.

Input Validation
Checking input at the right moment, which is rarely while the user is still typing.
PatternExpert heuristic
Confirmation
An interruption that should be reserved for genuinely irreversible actions, because it stops being read when it is routine.
PatternExpert heuristic
Notifications
Telling users something happened, where the default should be not to interrupt.
PatternCraft convention

States, behaviour and the accessibility contract you will need to specify.

Modal Dialog
Blocks everything else, which is why it should be reserved for things that genuinely cannot wait.
ComponentCraft convention
Menu
A list of actions revealed on demand, which is where infrequent operations belong.
ComponentCraft convention
Tabs
Parallel views in one space, which works only when users never need to compare across them.
ComponentCraft convention
Data Table
The right tool for comparing many records across many attributes, and a large amount of behaviour to specify.
ComponentCraft convention
Toast
A brief confirmation that disappears, which makes it unsuitable for anything the user must act on.
ComponentCraft convention

Where the words carry more of the fix than the layout does.

Microcopy
The small pieces of text that do most of the work: labels, hints, empty states, errors and confirmations.
UX writingCraft convention
Inclusive Language
Writing that does not exclude, misgender or make assumptions about the person reading it.
UX writingCraft convention

The requirements this problem raises, mapped to the decisions that produce them.

WCAG in Practice
What the standard is, which version applies, and how the levels translate into design decisions.
AccessibilityCraft convention
Keyboard Navigation
Everything must be operable with a keyboard alone, which is the single most load-bearing accessibility requirement.
AccessibilityCraft convention
Focus Indicators
The visible marker showing where keyboard focus is, which must never be removed.
AccessibilityCraft convention
Focus Management
Deliberately moving focus when the interface changes, so keyboard and screen reader users are not stranded.
AccessibilityCraft convention
Screen Readers
Software that reads the interface aloud, navigating by structure rather than by layout.
AccessibilityCraft convention
Accessible Names
What assistive technology announces for a control, which must match what a user would call it.
AccessibilityCraft convention
Status Messages and Live Regions
Telling assistive technology that something changed, when focus did not move to say so.
AccessibilityCraft convention
Target Size
Interactive targets need to be large enough and spaced enough to hit reliably.
AccessibilityCraft convention
Reflow and Zoom
Content must work at 400 percent zoom without horizontal scrolling, which is the same as working at 320 pixels wide.
AccessibilityCraft convention
Use of Color
Colour may reinforce meaning but must never be the only thing carrying it.
AccessibilityCraft convention

Methods suited to confirming the cause before you commit to a fix.

Usability Testing
Watching people attempt real tasks, which is the most direct evidence available about whether a design works.
Research methodEstablished research

Interactive review passes, with progress saved in your browser.

Accessibility Checklist
A practical WCAG 2.2 AA review pass, ordered so the checks that find the most problems come first.
ChecklistCraft convention
Pre-Launch Checklist
The pass before shipping, covering states, edge cases, accessibility, performance and the things that only break in production.
ChecklistCraft convention

Worked cases, including the options that were rejected.

Putting a Data Table on a Phone
Hiding columns on small screens made the table tidy and removed the data field staff had opened it to see.
Case studyCraft convention

The same material, organised around the surface you are building rather than the symptom you are fixing.