Accessible web design: the principles every team should know

Accessibility is decided in design long before it is decided in code. These are the four WCAG principles, translated into decisions a team makes every day.

Perceivable

Information must be perceivable. Use a text contrast of at least 4.5:1 (3:1 for large text), do not convey anything by colour alone, add alternative text to meaningful images and captions to videos.

Operable

Everything must work with a keyboard, with a visible focus and a logical order. Avoid short time limits, give buttons and links a comfortable target size and do not use flashing content.

Understandable

Write clearly, declare the language of the page, keep navigation predictable and, when a form fails, say what happened and how to fix it.

Robust

Use semantic HTML, give every control a name and a role and communicate state changes, such as error or success messages, to assistive technology.

Habits that make it easy

• Define a palette with checked contrasts from day one.
• Design the focus, error and empty states, not just the ideal one.
• Review designs with a keyboard before signing them off.
• Respect the system’s reduced-motion preference.