Switch between Dark / Light mode with Control + Shift + L
<aside> <img src="/icons/link_orange.svg" alt="/icons/link_orange.svg" width="40px" /> A11y Series
A11y - making the web more accessible
A11y - hands-on guide for developers
A11y - tools, checklists and resources
</aside>
<aside> <img src="/icons/username_orange.svg" alt="/icons/username_orange.svg" width="40px" /> About the Author
⌨️ Felipe Spengler ~23 years of experience, ~13 as Front-End Engineer
</aside>
While testing with screen readers is the best way to really simulate and find issues (more on that on the next topic), some browser extensions and tools can be very useful for initial check and validations.
<aside> <img src="/icons/fire_orange.svg" alt="/icons/fire_orange.svg" width="40px" /> Official W3C WAI tools list
While I’ll list some tools below that have some particular good options, the best resource is honestly to check the W3C WAI official list, as they have a great selection (over 100 tools!) with detailed information and ordered by most recently updated. You should try some out and see which ones you prefer.
🔗 Web Accessibility Evaluation Tools List | Web Accessibility Initiative (WAI) | W3C
</aside>
<aside> <img src="/icons/gears_green.svg" alt="/icons/gears_green.svg" width="40px" /> WAVE web accessibility evaluation tool - 🔗 wave.webaim.org
Probably the most popular tool, has a direct test on their page, offers also an API, and free extension.
The extension works as a side panel on your browser, injecting indicator on your page and offering great information for accessibility validation.
</aside>
<aside> <img src="/icons/gears_green.svg" alt="/icons/gears_green.svg" width="40px" /> Siteimprove Accessibility Checker - 🔗 www.siteimprove.com
Popular extension to test accessibility, available for all major browsers.
After installation, you click on the extension icon, and it will open a side panel where you will see the issues listed and can interact with them.
</aside>
<aside> <img src="/icons/gears_green.svg" alt="/icons/gears_green.svg" width="40px" /> axe DevTools Accessibility Tester - 🔗 www.deque.com/axe
Another popular tool, axe offers a lot of different ways to use their tools, free and paid: Browser extensions, Web and Mobile tests, Linters (IDEs, GitHub Actions, Pre-commit hook), Mobile App native testing, etc - check their site to see the full library.
The extensions run as part of your browser DevTools panels, and analysis run by axe will return a report that contains only the items that will not pass the accessibility tests.
</aside>
<aside> <img src="/icons/gears_green.svg" alt="/icons/gears_green.svg" width="40px" /> Accessibility Insights - 🔗 accessibilityinsights.io
This tool has support to Chrome and Edge extensions, as well a Windows tool to test native Apps!
</aside>