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.
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.
Read tutorial→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.
Read tutorial→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.
Read tutorial→How 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.
Read tutorial→How to build a skip link
A skip link lets keyboard users bypass the navigation. Here is how to make it visible on focus and ensure the target actually receives focus.
Read tutorial→