Accessible web design: design and development fundamentals

The cheapest and most robust accessibility is the kind that is designed in from the very start. Rebuilding an inaccessible design after the fact is expensive – and bolting an overlay layer on at the end does not work at all. This article covers the design and development fundamentals that prevent barriers before they appear. The overall process is described in Make your website accessible

Think about accessibility from the start

If you plan for accessibility from the outset, you pay a fraction of what a later rebuild costs, and you get a more stable result. It is also the opposite of the overlay shortcut, which adds something at the end and fails (more on this in Do overlays make you compliant?). The good news: most of it is simply good design and development craft anyway.

Colour, contrast and readability

Information must never be conveyed by colour alone – back it up with text, symbols or patterns so that people with colour vision deficiencies can take it in too. Plan for sufficient contrast from the start, rather than patching it later; the specific values are covered in Colour contrast under WCAG

Readability means appropriate font sizes, enough line spacing and a line length that is not too long. Text must be able to scale up – the zoom function must not be disabled.

Structure and hierarchy

A clear visual hierarchy should coincide with a clear semantic structure: exactly one H1, logically nested headings and a sensible reading order. Landmark regions help assistive technology find its way around. So design the structure – do not just style boxes.

Focus and interaction

Design visible focus states, rather than leaving them to development, which might remove the focus indicator. Make focus part of the visual language, with clearly distinguishable states for hover, focus and active. Everything must be operable by keyboard – more on this in Keyboard accessibility. And plan interactive targets to be large enough and not too close together.

Forms and controls

Forms are a common stumbling block. Labels must always be visible and clearly linked to the field – placeholder text alone is not enough, because it disappears as soon as you start typing. Error messages should state clearly what to do and be tied to the field concerned. Provide sufficient spacing and make required fields recognisable, not by colour alone.

Motion and animation

Respect users who prefer reduced motion (prefers-reduced-motion), and offer a way to pause animations. Avoid content that starts automatically, flashes or moves quickly – it can pose a seizure risk and is highly distracting.

This guide is not legal advice. For a binding assessment of your specific case, consult a qualified professional.