Accessible HTML
15 steps in 5 sets of HTML.
Fifteen steps, and the first set is called Start with the right element because that is genuinely most of it. A button is accessible; a div with a click handler is a small project.
Then accessible names and state, focus management and visibility, and content that reads sensibly out of order. ARIA appears where it has to and not before.
Start with the right element
- Use the element that already does itEvery ARIA attribute you add is one the browser would have given you for free.
- Landmarks and their namesLandmarks are how a screen reader user skips to the part they want.
- What to write in altThe alt text is what the image says, not what the image is.
- Language and directionGetting the language right changes pronunciation, hyphenation and quotation marks.
Names and state
- Where an accessible name comes fromFour sources, and they override each other in a fixed order.
- Accessible names and stateARIA fills the gaps where the markup alone cannot say enough.
- State that ARIA has to be toldWhen a control changes something else on the page, the relationship has to be spelled out.
- Announcing a changeA region that updates silently is a region a screen reader user never learns about.
Focus and visibility
- Focus order and tabindexThere are three values of tabindex and only two of them are a good idea.
- Three ways to hide somethingHidden from the eye, hidden from the reader, or hidden from both. Pick deliberately.
- Taking a region out of playWhen a dialog opens, everything behind it should stop being reachable.
- A dialog that behavesThe native dialog gives you the focus trap, the backdrop, and Escape to close.
Content that reads
- Headers for a complicated tablescope covers the simple case; headers covers the one scope cannot express.
- Data attributesCustom data on an element, readable from CSS and from scripts.
Encore
- accessible_table.htmlA data table people can actually read: caption, scopes, a summary row, and text that is not color alone.