Web Accessibility in Practice
Audit and fix a real booking page until everyone can use it, keyboard, screen reader and all.
- 4.9 (498 ratings)
- 3,900 learners
- Intermediate
- 5h 15m total
- Updated September 2026
What you’ll learn
- Explain WCAG 2.2 AA and what it requires of your pages
- Structure pages with landmarks, headings and real buttons and links
- Build forms with labels, grouped options and announced errors
- Manage keyboard focus in dialogs, SPAs and custom widgets
- Use ARIA correctly: roles, states, live regions, APG patterns
- Audit a page with axe, a keyboard, VoiceOver and NVDA
Who it’s for
About one in six people lives with a significant disability, and far more of us are temporarily or situationally limited: a broken wrist, a sunny screen, a noisy train. Yet almost every home page on the web fails basic accessibility checks. This course teaches the skills that close that gap, taught by an accessibility lead who has worked beside screen-reader users for a decade.
You audit and repair Ticketly, an event-booking page that starts out broken in all the usual ways. You replace div soup with semantic HTML, label every form field, make the seat picker work from the keyboard, build dialogs and tabs that follow the ARIA Authoring Practices, fix contrast and motion, and finish with an end-to-end audit using axe, a keyboard and real screen readers.
- Who it’s for
- Front-end developers and designers who build for the web and want to ship interfaces disabled people can actually use.
- Before you start
- Comfortable writing HTML and CSS and reading basic JavaScript event handlers; no prior accessibility knowledge needed.
Hands-on practice
- Edit HTML, CSS and JavaScript and see the result instantly.
- Guided exercises: spot the bug, fill the command, order the steps.
Course content
5 sections · 18 lessons · 5h 15m total
- Who You Are Building For12 min
- How Assistive Technology Reads Your Page17 min
- WCAG 2.2, POUR and the Law17 min
- Section checkpoint5 questions
- Landmarks and Headings18 min
- Buttons, Links and the Clickable Div17 min
- Accessible Forms20 min
- Images, Alt Text and Data Tables17 min
- Section checkpoint5 questions
- Keyboard Access and Visible Focus18 min
- Managing Focus: Dialogs and Single-Page Apps20 min
- ARIA: Roles, States and Live Regions18 min
- Widget Patterns: Disclosure, Tabs and Menu Button21 min
- Section checkpoint5 questions
- Color and Contrast18 min
- Zoom, Reflow, Target Size and Motion17 min
- Accessible Names and Descriptions18 min
- Plain Language, Language and Direction17 min
- Section checkpoint5 questions
- Automated Testing with axe16 min
- Testing with a Keyboard and Screen Readers18 min
- Auditing a Page and Building an Accessible Team16 min
- Section checkpoint5 questions
Your instructor
Leila Haddad
Accessibility Lead · Openfield
- 4.9 instructor rating
- 3,900 learners
- 1 course
Leila started as a front-end developer and found accessibility the day a blind customer emailed to say he couldn't complete checkout. She fixed the bug that night and has tested with screen readers ever since. At Openfield she leads accessibility across the product, from design reviews to the automated checks in CI.
What learners say
4.9
498 ratings
Mohammed Al-Harbi
8 months ago
I turned on VoiceOver for the first time and heard our signup form read as "edit text, edit text, button". Two lessons later every field had a real label.
Olivia Brennan
5 months ago
The focus management lesson fixed our modal: focus moves in, stays inside, and returns to the button that opened it. Switching to the native dialog element did half the work.
Ravi Shankar
2 months ago
Practical and never preachy. I wanted more on complex widgets like comboboxes, which only get a short treatment.