Making Accessible Your Web Application
These are my notes about how can you make your product more accessible.
Actually, this is a story about my current week. I worked a lot of hours and a great effort to make it an accessible product last week. So, I learned some new details and some tricks of that and in this article, I will try to explain my learnings of web accessibility.
What Is Web Accessibility?
There is a great summary in W3C about this question.
Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can:
- perceive, understand, navigate, and interact with the Web
- contribute to the Web
Web accessibility encompasses all disabilities that affect access to the Web, including auditory, cognitive, neurological, physical, speech, and visual.
What Is Web Accessibility Benefits?
There are a lot of different benefits in different areas.
- Accessible websites are also the most usable websites
- An accessible website will increase traffic to your site
- Visitors with disabilities can experience everything other users can and will benefit from your content.
- Building an accessible website can also help your reputation
- Avoid Discrimination and Legal Complications
How To Find Accessibility Issues?
In 2023 it is easy to find accessibility issues with some extensions. These extensions are available with most of the popular browsers. Also, in my opinion, the best way to find accessibility issues, you need to run periodic tests in a testing environment in a parallel way.
What Are The Tools And Extensions To Detect Accessibility Issues?
These tools are useful when detecting accessibility issues manually.
1- axe DevTools: It is an automated and guided accessibility testing solution for Component Developers, Front-End Developers, Native Mobile App Developers, and Test Engineers. It allows you to easily find and fix 76–84% of accessibility errors in the development process.
URL: https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd
2- Accessibility Insights for Web: It is an extension for Chrome and the new Microsoft Edge that helps developers find and fix accessibility issues in web apps and sites.
URL: https://chrome.google.com/webstore/detail/accessibility-insights-fo/pbjjkligggfmakdaogkfomddhfmpjeni
3- Color Contrast Accessibility Validator: It is a great tool for checking color contrast.
URL: https://color.a11y.com/?wc3
How To Automate Accessibility Checks?
Finding and fixing accessibility issues is ok. But this is not the best way to make your web application accessible. Because if you have a product that improves and adds new features, someone easily broke your accessibility efforts.
In that way, there are some basic ways to detect accessibility issues in the development or test process.
Here are some useful recommendations to protect your apps accessibility score;
- Add strict rules for accessibility to your ESLINT (or similar)
- Run accessibility tests (Easy to do this with Playwright)
- Run periodic scans of your URLs to be sure that everything is fine. (You can do it with a scheduled cron)
