Tutorials
Tutorials: fixing WCAG failures
Concrete step-by-step guides for developers, with real before/after code. Each tutorial shows the typical mistake, the clean fix, and the WCAG criterion behind it.
Searches titles, summaries, WCAG criteria and the usual ways people describe the problem. More words narrow it further.
Keyboard and focus
How to make a modal accessible
Focus management, the Escape key, role and name: the four things an accessible modal needs, in a few lines with the native <dialog> element.
Criteria: 4.1.2, 2.1.2, 2.4.3, 2.1.1
1 min read
Read tutorialHow to build a visible focus indicator
outline: none makes your site unusable for keyboard users. Here is how to replace it with a visible, high-contrast focus ring using :focus-visible.
Criteria: 2.4.7, 1.4.11, 2.4.11
1 min read
Read tutorialFinding and fixing a keyboard trap
A keyboard trap ends the visit: everything past it is unreachable. Here is how to find one in two minutes and fix it properly.
Criteria: 2.1.2, 2.1.1, 2.4.3
1 min read
Read tutorial
Forms
How to label form fields correctly
A placeholder is not a label. Here is how to tie every input to a real label and mark required fields and hints accessibly.
Criteria: 1.3.1, 3.3.2, 4.1.2, 2.5.3
1 min read
Read tutorialHow to make form errors accessible
A red border is not an error message. Here is how an error gets named, associated, announced and explained.
Criteria: 3.3.1, 3.3.3, 4.1.3
2 min read
Read tutorial
Presentation and contrast
How to fix insufficient colour contrast
4.5:1 for normal text, 3:1 for large text and UI elements: the WCAG thresholds, how to measure them and reach them with a few CSS changes.
Criteria: 1.4.3, 1.4.11, 1.4.1
1 min read
Read tutorialReflow: no page may scroll in two directions
At 320 CSS pixels wide, content has to wrap rather than run sideways. The causes are almost always the same three.
Criteria: 1.4.10, 1.4.4, 1.4.12
1 min read
Read tutorial
Semantics and screen readers
How to write good alt text
The decision matters more than the syntax: does the image carry information, is it a control, or is it decoration? The alt text follows from that.
Criteria: 1.1.1
1 min read
Read tutorialThe accessible name: using aria-label correctly
Every control needs a name assistive technology can announce. Here is how it is produced, and how not to destroy it by accident.
Criteria: 4.1.2, 2.5.3, 1.3.1
1 min read
Read tutorial