Arman S.
Sample Testing lessons were the highlight
Adding axe to our Playwright suite caught two regressions in the first week.
Web accessibility in practice: WCAG 2.2 for developers
Semantic HTML, keyboard support, ARIA used sparingly, colour contrast and screen reader testing, with fixes you can apply today
Created by Sofia Marquez
- Updated September 2026
- English
- All levels
What you will learn
- Explain how screen readers and keyboard users navigate a web page
- Structure pages with semantic HTML, headings and landmarks
- Make custom widgets keyboard accessible with visible focus
- Build forms with proper labels, instructions and error messages
- Check colour contrast, target sizes and motion against WCAG 2.2 AA
- Test pages with axe DevTools, the keyboard and a screen reader
Course content
Understanding accessibility
Forms that everyone can complete
- Video: Labels and accessible names 11 min
- Video: Instructions, hints and autocomplete 9 min
- Video: Error messages that help 12 min
- Video: Custom selects and date pickers 12 min
- Article: New WCAG 2.2 rules for forms 9 min
Colour, contrast, motion and size
- Video: Contrast ratios explained 10 min
- Video: Never rely on colour alone 8 min
- Video: Motion and reduced motion 8 min
- Video: Target size and dragging 9 min
ARIA, used carefully
- Article: The first rule of ARIA 9 min
- Video: Disclosure, tabs and menus 15 min
- Video: Live regions for dynamic updates 10 min
- Article: Hiding content the right way 8 min
- Video: Accessible modals with dialog 11 min
Testing and keeping it accessible
- Video: Automated checks with axe and Lighthouse 10 min
- Video: Accessibility checks in your test suite 11 min
- Article: A practical audit checklist 8 min
- Article: Accessibility statements and next steps 6 min
- Quiz: Final check 5 min
Requirements
- Basic HTML and CSS
- A desktop browser; a screen reader such as NVDA, VoiceOver or TalkBack is free and covered in the course
Description
About one in six people lives with a significant disability, and every one of us has temporary limits: a broken wrist, a bright screen in the sun, a noisy train. Accessible websites work better for all of them, and in many places accessibility is also a legal requirement, including under the European Accessibility Act that applies to many digital services in the EU since June 2025.
This free course is a practical guide for developers. It does not ask you to memorise the whole WCAG document. Instead it shows the handful of habits that prevent most real problems, and how to test for them with tools you already have.
What we cover
- How assistive technologies such as screen readers and switch devices use your HTML
- Semantic structure: headings, landmarks, lists, buttons versus links
- Keyboard access and visible focus, including the new WCAG 2.2 focus rules
- Forms with clear labels, errors and instructions
- Colour, contrast, motion and target sizes
- When ARIA helps, and the many cases where it makes things worse
- Testing with automated tools, the keyboard and a screen reader
How it works
Each lesson fixes a real pattern in a deliberately broken demo site. You will see the problem, hear how a screen reader announces it, and apply the fix. By the end, the demo passes an automated audit and, more importantly, a manual keyboard and screen reader check.
Who this course is for
- Front end developers who want to build accessible interfaces by default
- Designers and QA testers who review web work
- Anyone preparing a site for an accessibility audit
Instructor
Sofia Marquez
Front end developer teaching CSS, accessibility and plain JavaScript that works for everyone
- 4.5 instructor rating
- 22 reviews
- 8,510 students
- 3 courses
- Sample
I am a front end developer who cares about the parts of the web that users touch directly: layout, typography, keyboard support and screen reader behaviour. I build design systems and marketing sites, and I audit interfaces for accessibility problems.
My teaching style is practical. We open the browser dev tools, break things on purpose and fix them. I prefer the platform first: semantic HTML, modern CSS and small amounts of JavaScript, before reaching for a library.
I also run small workshops for designers who want to understand what is easy and what is hard to build.
Student reviews
Grace A.
Sample Should be required for front end devs
Hearing the broken demo with VoiceOver was eye opening. I fixed three of the same problems in our product the next day.
Mateo R.
Sample Practical and not preachy
No lectures, just real fixes. The section on ARIA misuse made me remove more code than I added.
Yuki T.
Sample Great intro to screen reader testing
I had never used NVDA before. The short command list was enough to start testing my own pages.
Samir H.
Sample Clear explanation of WCAG 2.2 changes
The focus not obscured lesson matched a bug our auditor flagged. The scroll-padding fix took two minutes.
Ellen J.
Sample Very good forms section
Error messages and autocomplete were covered better than in paid courses I took. Would like a mobile app follow up.
Kofi B.
Sample Free and genuinely useful
Short lessons, a realistic demo site and a checklist I now use on every pull request.
Ines D.
Sample Good basics, light on mobile
Strong for the web. I hoped for more on native mobile apps and TalkBack, which only gets a brief mention.
Keep exploring
All Web Development courses
More in Web Development
Free
Enroll now