Accessibility
Accessibility (often shortened to "a11y") means making pages usable by everyone, including people who are blind, have low vision, are deaf, can't use a mouse, or have cognitive differences. Most of it comes down to writing good, semantic HTML — which is why it belongs in an HTML course.
Who benefits
- Screen-reader users hear the page read aloud and navigate by headings, landmarks, links and form fields.
- Keyboard users — including many people with motor disabilities — move with Tab, Enter, Space and arrow keys.
- People with low vision zoom in, use high-contrast modes, or enlarge text.
- Deaf and hard-of-hearing people rely on captions and transcripts.
- Everyone, sometimes: a broken arm, bright sunlight on a screen, a noisy train, a slow connection.
In many countries, accessibility is also a legal requirement — for example under the European Accessibility Act and the ADA in the US. The international standard is WCAG (Web Content Accessibility Guidelines), currently version 2.2.
Semantic HTML does most of the work
Native elements come with roles, states and keyboard behaviour built in. Try tabbing through the example: you can reach the real button, but not the div.
The essentials checklist
| Area | Do | Lesson |
|---|---|---|
| Page | lang on <html>; a unique, descriptive <title> | 03 |
| Structure | One <h1>, a logical heading outline, landmark elements | 06, 24 |
| Images | Meaningful alt; alt="" for decoration | 12 |
| Links | Descriptive link text, not "click here" | 10 |
| Forms | Labels for every control; fieldsets for groups; helpful errors | 29, 32 |
| Tables | <th> with scope; a <caption> | 19 |
| Media | Captions for video, transcripts for audio | 16 |
| Interaction | Real buttons and links; visible focus; everything works by keyboard | 31 |
| Colour | Enough contrast; never colour alone to convey meaning | — |
Keyboard access and focus
- Never remove focus outlines without replacing them with a clearly visible style.
- A "skip to main content" link lets keyboard users bypass repeated navigation.
- Keep the DOM order the same as the visual order, so Tab moves predictably.
tabindex="0"adds an element to the tab order;tabindex="-1"makes it focusable only by script. Avoid positive values liketabindex="5", which scramble the order.
Colour and contrast
WCAG asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and interface parts. Browser developer tools show the ratio when you inspect a colour.
ARIA: when HTML isn't enough
ARIA (Accessible Rich Internet Applications) attributes add accessibility information to elements:
| Attribute | Purpose |
|---|---|
aria-label, aria-labelledby | Give an element an accessible name |
aria-describedby | Link extra description, like hints and errors |
aria-expanded, aria-controls | State of a toggle and what it controls |
aria-live, role="status"/"alert" | Announce content that changes dynamically |
aria-hidden="true" | Hide decorative content from assistive technology |
aria-current="page" | Mark the current link in navigation |
Testing accessibility
- Unplug your mouse: can you reach and operate everything with the keyboard? Can you always see where focus is?
- Zoom to 200%: does the content reflow without sideways scrolling or overlap?
- Run an automated checker: Lighthouse and the Accessibility panel in browser dev tools, or extensions like axe DevTools and WAVE. They catch about a third of issues.
- Try a screen reader: VoiceOver (built into macOS and iOS), NVDA (free for Windows), TalkBack (Android).
Try it yourself
Find and fix the accessibility problems: a missing alt, an unlabelled input, a vague link and an icon-only button.