Accessibility

Accessibility (a11y for short) is the quality of a site that everyone can use: people with low vision and blind people, those who cannot hold a mouse, older people, someone with bright sun on their phone screen. Blind people use screen readers — programs that read the page aloud based on its markup. The good news: correct HTML is already accessible almost without effort.

The keyboard

Many people use a site without a mouse: the Tab key moves the focus — the highlight of the active element — to the next link, button or field, and Enter presses it:

<a href="#">A link</a>
<button>A button</button>
<input placeholder="A field">

Click inside the preview and press Tab a few times: a ring appears around the focused element. Links, buttons and fields receive focus on their own — because they are the right tags.

Do not hide focus

The focus ring is sometimes removed for looks — and a keyboard user gets lost. If you do not like it, replace it with your own using the :focus-visible pseudo-class:

<style>
  button:focus-visible { outline: 3px solid orange; outline-offset: 2px; }
</style>
 
<button>First</button>
<button>Second</button>

:focus-visible matches when using the keyboard and does not bother people who click with a mouse.

Text for those who cannot see

Everything that is clear only to the eye needs a text duplicate. We already know two ways: alt on images and <label> on fields. For an icon button without text there is the aria-label attribute:

<button aria-label="Close">✕</button>
<button aria-label="Add to favourites">♥</button>

A screen reader says "Close, button" instead of "multiplication sign".

Page structure and ARIA

A blind person does not scan a page with their eyes but "jumps" around it: by headings, by <nav> and <main> areas, by links. That is why correct heading levels, meaningful tags and clear link text matter. The lang attribute on <html> is needed so the text is read with the right pronunciation.

ARIA is a set of aria-* and role attributes that tell screen readers what plain HTML cannot express. But the first rule of ARIA is not to use it when a regular tag fits: <button> is better than <div role="button">. Wrong ARIA does more harm than none.

Not by colour alone

If an error or a status is shown only by colour, people who have trouble telling colours apart will miss it. Add text or an icon. And watch the contrast — the difference between the text colour and the background:

<p style="color: #bbb;">Light grey text on white is hard to read.</p>
<p style="color: #555;">Dark grey is easy to read.</p>
<p style="color: crimson;">✕ Error: the email address is invalid</p>

You can check contrast in the browser's developer tools: the colour picker there shows the contrast ratio.

Common mistake

A button made of a <div> with a click handler looks like a button, but the keyboard cannot reach it, and a screen reader does not say it is a button:

<div style="display: inline-block; padding: 4px 8px; background: #ddd;">Buy</div>
<button>Buy</button>

Press Tab in the preview: focus lands only on the real button. Use <button> for actions and <a> for navigation.