Accessibility Basics for Designers

Accessibility is often handed to engineers as a compliance task near the end. By then most of the damage is already in the design: the contrast, the target sizes, the colour-only signals, the labels that live only as placeholder text. Those are decisions someone made in a design tool, and they're cheap there and expensive later.

It's also worth being unromantic about who benefits. Permanent disability is one case. Temporary and situational limits — a broken wrist, bright sunlight, a noisy room, holding a child, an old phone — apply to everyone, regularly. Designing for the harder case improves the ordinary one.

1. Contrast below threshold

Body text needs 4.5:1 against its background; large text and meaningful icons need 3:1. This single item accounts for a large share of automated failures on real sites, and it's decided entirely in design.

2. Colour as the only signal

A red border marking an invalid field, a green dot meaning active, a chart distinguished only by hue. Add a second signal — an icon, a label, a pattern, a weight change — and the problem disappears.

3. No visible focus state

Someone navigating by keyboard needs to see where they are. Removing the browser's focus ring because it's ugly, without replacing it, makes the interface unusable without a mouse. Design a focus state you like — a clear outline with an offset — and apply the same one everywhere.

4. Targets too small or too close

Aim for around 44 by 44 pixels of tappable area, with space between adjacent targets. The visible element can be smaller than its hit area, which is usually the practical fix for a row of icon buttons.

5. Labels that aren't there

Placeholder text is not a label — it disappears the moment someone types, taking the only description of the field with it. An icon-only button with no accessible name is announced as "button". Both are design decisions with a visible cost to everyone who forgets what a field was for.

Screen readers navigate by headings, landmarks, and links. That structure comes from the design's hierarchy — which is another reason to decide the reading order before styling anything.

• One h1 per page, and heading levels that descend without skipping. A heading level is structural, not a size — if you want smaller text, style it smaller, don't demote it to h4
• Link text that describes its destination. "Read more" repeated eleven times is eleven identical entries in a link list
• Alt text that says what the image conveys in context. A decorative image takes empty alt text so it's skipped, which is correct and deliberate
• Error messages that name the field and the fix — "Enter a date in the future", not "Invalid input"

Large parallax, sliding panels, and looping animation can cause genuine nausea and dizziness for some people. Operating systems expose a "reduce motion" preference, and honouring it is a few lines.

@media (prefers-reduced-motion: reduce) {  *,  *::before,  *::after {    animation-duration: 0.01ms !important;    animation-iteration-count: 1 !important;    transition-duration: 0.01ms !important;    scroll-behavior: auto !important;  }}

Handle it in one place rather than per component. A motion library usually offers a single configuration option that makes every animation respect the preference automatically — which is one place to be correct instead of forty.

1. 01Unplug the mouseTab through the whole page. Can you reach everything, see where you are, and complete the task? This finds more than any automated scan.
2. 02Zoom to 200%Text should reflow, not overlap or get cut off. A layout that breaks here breaks for a lot of people every day.
3. 03Turn the page greyscaleAnything that stops being understandable was relying on colour alone.
4. 04Run an automated checkerBrowser extensions catch contrast, missing labels, and heading order in seconds. They find maybe a third of real issues — a useful third.
5. 05Read one screen with a screen readerEvery operating system ships one. The first attempt is disorienting and immediately instructive.