Accessibility is not a later task

Alongside the DOM, the browser builds a second tree: the accessibility tree. Every node has a role (what kind of thing it is), a name (what it is called), a state (checked, expanded, disabled) and a value. Assistive technology reads that tree, not your CSS. It is generated automatically from your markup, which means you are shipping one already, the question is only whether it says anything sensible.

Four mistakes account for most of the damage, and you can find all four in an afternoon. A <div> acting as a button, which appears in the tree as a generic container with no role and no name. An input with a placeholder and no label, which appears with no name at all, the placeholder is not a name, and it disappears the moment the user types. An image with no alt, which is announced as its filename or skipped entirely. And a decorative icon that should have been hidden and is instead read aloud as "image".

The instrument below shows both trees side by side for a small form and lets you break each of those four things one at a time. Read the quoted announcement under each state. "Search, edit text" versus "edit text" looks like a small difference written down; as the only thing you can hear, it is the difference between a usable field and a mystery box.

Then press the playback button and step through the announcements in order. That ordering is the part sighted developers never intuit, because you scan a page in two dimensions and a screen reader user receives it as a queue. A form where the labels come after the inputs reads as a list of unnamed boxes followed by a list of orphaned words.

The single most valuable half hour in this whole lesson is not reading, it is turning on the screen reader already installed on your machine and trying to use your own site with your eyes closed. VoiceOver on macOS is Command-F5. Narrator on Windows is Control-Windows-Enter. You will be bad at it and it will be uncomfortable, and you will find three bugs in ten minutes that no tool would have told you about.

One last thing, because it comes up constantly: ARIA is a repair kit, not a building material. role="button" on a div tells the accessibility tree it is a button while giving it none of a button’s behaviour, no keyboard, no activation, no focus. The first rule of ARIA, which is a real rule written in the specification, is not to use ARIA if a native element will do. Reach for it when you are building something HTML really has no element for, and almost never before.