Accessibility in design for beginners: how to design interfaces for everyone

Step 1

Understand who it's for and what WCAG is

As W3C defines it, web accessibility means websites and tools are designed so that people with disabilities can use them: perceive, understand, navigate and interact. That covers auditory, visual, physical, speech, cognitive and neurological disabilities. Accessibility also helps people without disabilities, for example those using phones with small screens. The WCAG standard (Web Content Accessibility Guidelines) is built on four principles:

• •perceivable: information can be perceived, by seeing, hearing or through a screen reader;
• •operable: the interface can be used, including with a keyboard;
• •understandable: both the content and the interface's behavior make sense;
• •robust: content works reliably with different browsers and assistive technologies.

💡 WCAG criteria have three levels: A, AA and AAA. To conform to level AA, a page must meet all level A and AA criteria. AA is a good level to start with.

Step 2

Text and color

A typical problem in designs is faint text. WCAG criterion 1.4.3 requires a contrast of at least 4.5:1 between text and background. Large text, from 18 points or 14 points bold, needs 3:1. Logos and purely decorative text are exempt. A separate criterion, 1.4.11, requires 3:1 contrast for the parts of the interface needed to identify a control, such as field borders, icon buttons and checkbox states, and for important parts of graphics.

• •check every text and background pair, including text on photos, gradients and buttons;
• •don't convey meaning with color alone (criterion 1.4.1): mark a field error with text too, and required fields with an asterisk too;
• •leave room for enlarged text: under criterion 1.4.4, text must scale to 200% without losing content or functionality.

💡 More on choosing colors and checking a palette in the guide How to choose a color palette.

Step 3

Buttons, links and focus

People with hand tremors, or anyone holding a phone in one hand, often miss small buttons. Criterion 2.5.8 (level AA, new in WCAG 2.2) requires targets of at least 24 × 24 CSS px, or enough free space around a smaller target. Another requirement is visible focus (criterion 2.4.7): someone using a keyboard must see which element they're on.

• •add a separate Focus variant to your button, field and link components, for example with a clear outline;
• •make links clearly different from body text, and not only by color;
• •mark the same actions the same way on every screen: the same icon and the same label.

Step 4

Forms, images and structure

For forms, WCAG requires labels or instructions wherever people enter information (criterion 3.3.2). W3C recommends placing a clear label next to the field, usually above or to the left, and to the right for checkboxes and radio buttons, without a large gap between label and field. Images need a text alternative (criterion 1.1.1): a description a screen reader can read out.

• •add an annotation with alt text for every important image in your design, so developers know what to write;
• •for icon buttons without text, specify the action's name, such as "Close" or "Add to cart";
• •check how the layout behaves on a narrow screen: criterion 1.4.10 requires content to be readable without horizontal scrolling at a width equivalent to 320 CSS px.

💡 Write error messages so it's clear what to fix: not "Error" but "Enter your phone number in the format +380".

Step 5

Check your design in Figma

Many problems can be caught before development. Figma's color picker has a Check color contrast button: it shows the contrast ratio and whether it meets AA or AAA, and can pick the nearest compliant color. For screen reader testing, Figma has accessible prototypes: you can go through a prototype with VoiceOver on Mac or JAWS or NVDA on Windows, in a desktop browser or the desktop app.

• •Tab order in a prototype follows layer order, and in auto layout it follows the layout order: arrange layers logically;
• •image fills are read with the layer name as alt text, so give layers meaningful names instead of "Rectangle 12";
• •exercise: take an old design, find five issues from this guide and fix them; that's a ready-made before-and-after section for a case study.

💡 Share the design in the community and ask people to check something specific: secondary text contrast, button sizes or field labels. A specific question gets a useful answer.