Accessibility in depth — a web everyone can use

Accessibility is about as many people as possible being able to use your page — including those who navigate with a keyboard, listen with a screen reader, have reduced vision or difficulty with fine mouse clicks. It is not an extra feature you add at the end; it is a way to build and done from the start costs almost nothing extra.

§Four guiding principles

International guidelines for accessible web bring the goals together in four words. Content must be perceivable (you must be able to sense it e.g. through alternative text and audio subtitles) usable (you must be able to operate it e.g. with a keyboard) understandable (language and behaviour must make sense) and robust (it must work across browsers and assistive devices).

§Semantics is the foundation

Most accessibility comes free if HTML is semantic. A button that is a real button element can be operated with a keyboard and announced correctly by a screen reader without any extra effort. Headings in logical order give screen reader users a content overview. Use elements according to their meaning before reaching for extra helper attributes — semantics first workarounds later.

§Keyboard and focus

Many users don't use a mouse at all. Therefore, everything must be reachable and operable with the keyboard, in a logical sequence, and the element that has focus must be clearly marked. Never remove focus marking without providing a better one instead — otherwise you leave the keyboard user in the dark about where they are on the page.

• 01Write semantic HTML — proper buttons, links and headings
• 02Make sure that everything can be operated by keyboard alone
• 03Make focus clearly visible
• 04Link a clear label to each form field
• 05Provide images with meaningful alternative text — or mark them as decorative
• 06Ensure sufficient contrast between text and background

§The color is not defined and managed consistently in both CMYK/spot for print and RGB/hex for screen.

Don't use colour as the only way to convey something — an error marked only in red is invisible to a colour-blind user, but a text message beside it helps everyone. Ensure good contrast between text and background. And respect users who have asked for less motion: strong animations can both annoy and make some actively uncomfortable.

§Test as users do

Try putting the mouse away and navigating the entire site with the keyboard. Turn on a screen reader and listen to how the site is read aloud. Use a tool to check contrast and structure. Automatic checks catch a lot, but not everything — the best test is to use the site on the same terms as those you're building it for.

“Accessibility done from the start is nearly free. Added at the end it is expensive — and usually half-hearted.”

— Rule of thumb from frontend work.