6 accessibility rules anyone can apply

Accessibility tends to bring to mind complicated standards documents. In practice most of the benefit comes from a handful of basic rules, and you don't have to be a developer to apply them.

These rules help more people than disabled visitors. Someone squinting at a phone in bright sun, someone with a broken arm who can't use a mouse, someone watching a muted video on the metro all benefit from the same work.

1. Contrast#

Light grey text on a light grey background looks elegant to the designer and is hard work for everyone reading it.

For normal text, the contrast ratio between text and background should be at least 4.5:1. For large headings, 3:1 is enough.

To check, enter the two colour codes at webaim.org/resources/contrastchecker and it gives you the ratio. It's free and takes ten seconds.

2. Alt text on images#

Someone using a screen reader can't see the image. They hear the alt text. If there isn't any, the screen reader reads out the file name: "I M G underscore 4471 dot jpeg".

If the image carries information, describe it in the alt text. If it's decoration, leave the alt empty. An empty alt (alt="") and no alt at all are different things, because an empty alt tells the screen reader to skip the image.

3. Keyboard navigation#

Put the mouse down and move through your site using only the Tab key. Can you reach every link and button? Can you see where you are?

The most common mistake is removing the focus ring to keep the design clean. Without it, keyboard users can't see where they are. Leave it in, and if you don't like the default, design one that fits your brand.

Add a "skip to content" link too. It appears the first time you press Tab and jumps past the menu, so keyboard users don't have to tab through thirty links on every page.

4. Heading order#

Most screen reader users don't listen to a page from top to bottom. They jump between headings, so the heading order has to make sense.

Use one h1 per page, h2 for sections and h3 for sub-sections. Don't skip levels, so an h4 should never come straight after an h2.

Don't use a heading tag just to make text bigger, either. CSS sets the size. The heading tag describes the structure of the page.

5. Form labels#

Every field needs a real label that's tied to the field. A placeholder on its own isn't enough, because it disappears as soon as you start typing and you forget what the field was asking for.

A tied label has another benefit. Clicking the label puts the cursor in the field, which makes the target bigger on a touchscreen.

6. Respect the reduced motion setting#

Operating systems have a "reduce motion" setting. People with vestibular disorders turn it on because sliding, spinning and bouncing animations make them dizzy.

You can read that setting in CSS with the prefers-reduced-motion query. When it's on, turn animations off or reduce them to a simple fade.

Every animation on this site follows that setting, including the splash screen, the scrolling logo strip and the sections that appear as you scroll.

How to check#

In your browser, press F12, open the Lighthouse tab and run the Accessibility report. Automated tests catch about a third of issues. The rest need checking by hand, but the report gives you a good list to start from.