← Reference

Accessibility basics

Increasingly a legal requirement, and mostly structural.

01

Labels

A screen reader announces an unlabelled input as "edit text". Placeholder text does not count — it disappears when the user types and is not treated as a label.

Use <label for="id"> where there is visible label text, and aria-label only where the design genuinely has none, such as a search box with just an icon.

02

Icon-only buttons

A close cross, a menu, a delete bin with no text is announced as just "button". Add aria-label describing the ACTION, not the icon: aria-label="Close dialog", not aria-label="X". Mark the icon itself aria-hidden="true".

03

Keyboard order

A positive tabindex jumps the element ahead of everything else on the page, and with more than one the order becomes unpredictable. Use tabindex="0" and reorder the HTML so document order matches visual order.

Add a skip link as the first focusable element so keyboard users are not tabbing through your whole navigation on every page. Hide it with a technique that keeps it focusable — not display:none.

04

And lang

<html lang="en">. Without it a screen reader guesses the pronunciation rules, and English read by a French voice engine is close to unintelligible.

Not sure whether this applies to you?

Give us the address and we will tell you. No code, no access, no install — and every finding we have is shown in full, including on the free trial.

Check a site