7 lessons · 69 min Beginner

Accessibility — a web that works for everyone

Semantics, keyboard, alt, forms, contrast, ARIA: code for every user, not just yours. Prerequisites: HTML and CSS basics.

FR EN
Progress 0/7
1

For whom, and why

Accessibility is not for "others": permanent, temporary and situational disabilities, and the accessibility tree a screen reader sees.

9 min
2

Semantic HTML: 80% of the work

A native button does for free what a clickable div never will. Landmarks, heading order, and the find-the-5-problems lab.

10 min
3

Keyboard and visible focus

Tab, Enter, Escape: your whole site must work without a mouse. Visible focus, skip links, and the test everyone forgets.

10 min
4

Alt text

Describe the function, not the picture. When to fill the alt, when to leave it empty, and why "image of" pollutes.

9 min
5

Accessible forms

A clickable label tied to its field, announced errors, never color alone. Repair a broken form, piece by piece.

10 min
6

Contrast and color

4.5:1 for text, 3:1 for large text and UI: the WCAG ratios explained, and information never carried by color alone.

9 min
7

ARIA and real testing

The first rule of ARIA: do not use it. When HTML is not enough, how to test for free (keyboard, axe, NVDA), and the 2026 obligations.

12 min

What you will learn

Structure with semantic HTML: native elements do 80% of the accessibility work for free

Make everything keyboard-operable, with visible focus and large enough targets

Write useful alt text, forms with labels and announced errors, passing contrast ratios

Use ARIA as a last resort, and audit for free: keyboard, axe DevTools, screen reader

Prerequisites: the HTML and CSS basics from this site. Labs run in the browser (fix the code, find the problems); the screen reader test is guided for home (free NVDA, built-in VoiceOver). Nothing to buy.

Start lesson 1

Free · No signup · 9 minutes