Module 8 of 10 · 7 lessons
HTML Accessibility Tutorial: Alt Text, Labels, ARIA
Pages that work for everyone: alt text, structure, labels, the keyboard and ARIA.
Web accessibility (opens in a new tab) means building pages that everyone can use, including people who are blind or have low vision, people who cannot use a mouse and people with cognitive disabilities. Most of it comes down to writing good HTML. This module shows you how.
Good Alt Text teaches you to describe an image the way a person would, and when an empty alt="" is the correct answer. Heading Order explains how screen reader users move through a page by headings, and what a skipped level does to them. Landmarks goes back to header, nav, main and footer and looks at them through the eyes of someone who jumps around with keyboard shortcuts.
Connecting Labels ties form fields to their labels with for and id. You will make this fix more often than any other in form accessibility. Keyboard and Focus explains why a real <button> beats a clickable <div> and how focus order works. ARIA Basics introduces ARIA attributes and the first rule of ARIA: if a native HTML element exists for the job, use it.
Accessible pages reach more people. They are often a legal requirement too, and most laws point to the WCAG guidelines (opens in a new tab). They also tend to work better for everybody, search engines included, since a crawler reads your markup much like a screen reader does.
In the final Accessibility Rescue project you get a broken page and repair it. The accessibility outline in the playground helps you check your work. Plan about 70 minutes.
What you will learn
- Write helpful alt text and tell when an image is only decoration
- Keep headings in an order that screen reader users can navigate
- Add landmarks so users can jump to the main content
- Tie every form field to its label with for and id
- Make every interactive element reachable and usable by keyboard
- Add ARIA attributes only when native HTML cannot do the job
Lessons
- Good Alt Text Fix the bugsWrite alt text that says what an image means, and know when to leave it empty.
- Heading Order Fix the bugsBuild a heading outline with no skipped levels, picking each level for what it means.
- Landmarks Split a page into landmarks that screen reader users can jump between.
- Connecting Labels Fix the bugsFind and fix form fields whose labels are missing or not connected.
- Keyboard and Focus Fix the bugsMake every control reachable and usable with the keyboard alone.
- ARIA Basics Use a few ARIA attributes to fill gaps, and know when to leave ARIA out.
- Project: Accessibility Rescue ProjectAudit a broken page and fix every accessibility problem you find.
Frequently asked questions
What is web accessibility in HTML?
It means people with disabilities can perceive a page, move around in it and use it. In HTML that starts with semantic elements, alt text on images, headings in a sensible order, labeled form fields and controls that work from the keyboard. Screen readers and other assistive technology depend on this markup. Write it correctly and most accessibility problems never appear.
How do I write good alt text?
Say what the image shows or does in this context, in a short phrase or sentence, as if you were reading the page aloud to a friend. Leave out "image of", because screen readers already announce that it is an image. If the image is a link or a button, describe the action. If it is pure decoration, write alt="" and it will be skipped.
When should I use ARIA attributes?
Only when native HTML cannot express what you need. A real <button>, <nav> or <label> comes with the right role and behavior built in. ARIA attributes such as aria-label or aria-expanded change what assistive technology announces, and they add no keyboard behavior at all. Wrong ARIA is worse than none. When you build a custom widget, copy the tested patterns in the W3C ARIA Authoring Practices Guide (opens in a new tab).