In a previous post, I shared with you 5 web accessibility issues and some ways to cope with them.
![dominikilnicki image](https://res.cloudinary.com/practicaldev/image/fetch/s--LNOPU-cr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--hbdOiV6G--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/327638/f4d04c27-ba89-4ccf-8e86-12f1513b7b62.jpg)
5 deadly sins of web accessibility
Dominik Ilnicki γ» Jun 14 γ» 3 min read
Today I'll list 5 tools that help you test your site against the a11y and help improve your codebase in that area.
01. "Accessibility Insights for Web" extension
I'm a very big fan of that tool. It has three main features.
- Fast Pass :
- Automatic test - You run a generic test against your site and it returns the report. You can find their useful tips on how to get rid of all the fundamental problems.
- Tab stops - It visualizes the tab order on your site. You can walk through the app using the keyboard and see how the focus behaves.
- Assessment It provides you a checklist with all the stuff that you should check manually to make sure that your app is accessible. It tells you very specific why, what and how you should test,
- Ad hoc tools That feature lets you test different things like heading hierarchy or color contrast ratio in real-time.
02. "NoCoffee Vision Simulator" chrome extension
Thank's to that extension you can step into disordered people's shoes and simulate various eye diseases directly in your browser.
03. Accessibility tab in lighthouse
You can also audit your site using Google lighthouse and check the Accessibility tab to get insights on how to improve your site.
04. Whocanuse.com
That site allows you to check the element's contrast ratio. You can also investigate what percentage of the population may have problems with capturing your elements.
05. axe-core
Axe core it's the mother of the vast majority of accessibility tools. It's an accessibility testing engine used by a lot of other tools like Google lighthouse. You can build something completely new on top of that.
--
I hope you haven't heard at least about one of them and It'll help you make the web a more accessible place, see you in the next post βοΈ
π¦ Follow me on Twitter for more a11y/webdev related stuff.
π¨βπ» If you want to find & join the open-source project check out my latest side-project - JustContribute.
Top comments (1)
Love this list! I have been learning more about accessibility lately as well. Def have some work to do on my sites. I also found this list, which also shares some of the same resources as you, but I found it super helpful also: abstracta.us/blog/accessibility-te...