Complete Course

The 6 Most Common Accessibility Issues

Find and fix the six most common web accessibility issues with automated tests, using both Cypress and Playwright, powered by axe-core.

View Lessons

Course Content

9 comprehensive lessons covering everything you need to know

Introduction

Introduction
Course Structure
Learn how the course is organized and make the most of the content.
Introduction
Prerequisites
Systems and knowledge required to complete the course.
Introduction
Getting to know the application under test
Meet the Banco Simulado app that intentionally ships the six most common accessibility issues.
Lesson
Lesson 1
Fork, clone, and install the tools
Fork and clone the project, then set up Cypress and Playwright with axe-core.

Getting started

Lesson
Lesson 2
Your first accessibility scan with Cypress
Learn accessibility foundations and run your first scan with cypress-axe.
Lesson
Lesson 3
Your first accessibility scan with Playwright
Run the same scan with @axe-core/playwright and compare the findings.

The 6 most common issues

Lesson
Lesson 4
Issue 1: Low-contrast text
Detect and fix insufficient color contrast (color-contrast).
Lesson
Lesson 5
Issue 2: Images without alt text
Detect and fix images missing alternative text (image-alt).
Lesson
Lesson 6
Issue 3: Form fields without labels
Detect and fix inputs without associated labels (label).
Lesson
Lesson 7
Issue 4: Empty links
Detect and fix icon-only links with no accessible name (link-name).
Lesson
Lesson 8
Issue 5: Empty buttons
Detect and fix icon-only buttons with no accessible name (button-name).
Lesson
Lesson 9
Issue 6: Missing document language
Detect and fix a missing lang attribute on the document (html-has-lang).

Bonus & Conclusion

Bonus
The accessibility checklist and manual tools
A ready-to-use checklist for the six issues plus the manual tools that complement automation.
Conclusion
Congratulations!
You've completed The 6 Most Common Accessibility Issues course!