I was completely ignorant towards the accessibility till I got the project from the business that does cater to different type of the customers on the web. Prior to this I worked with small business and customer who never cared for special needs people. And so the need for testing the accessibility never came into my mind.
Some of the accessibility tools for the browsers you can use are listed below.
If you are trying to test the heading structure of a webpage. You can use two interesting extensions for the Chrome and Firefox.
Image Credit: Chrome Extension
These extensions will generate a document map or index which you can use to check and verify the headings of the page. So for the testers and the accessibility verifiers, they can use this to check if it meets the page passing criteria.
The same is possible with the Firefox extension too. The difference being they have in the UI and the output they generate for the heading index that they generate. Rest the functionalities are pretty much same in those.
This tool is especially useful for the Visual ARIA usage. Most of the time such usage is done by the special needs students and the people who want to make use of the Visual ARIA on the webpages. A lot of pages are not supported to Visual ARIA so these tools are helpful in that context.
You can check the tool here.
Image Credit: Visual ARIA
When you want to check the webpage for the errors and check the page for various issues then WAVE is a good tool to try out. You can give it the webpage URL and it would be returning the accessibility errors from it.
Image Credit : WAVE
Here's how they give you the dashboard to check for the accessibility errors from the webpage that you give them in the URL box.
Image Credit : WAVE
This is a visualization toolkit that returns the accessibility errors on the webapge. This tool is from khan academy and hosted for free so you can try it out for your work as well.
Image Credit : Tota11y
It requires you to install a javascript on your page and then run the file. And then when you load the page, you would have to click on the button on the page. And that would show you problem with your webpage and also show the elements that have some issues.
This is another tool that I use. Which is mostly for those colored websites that are more on the visual side of the spectrum. And here you can use this tool for finding the ratio of the contrast on the webpage.
Image Credit : Contrast Ratio
These are some of the tools that I use. I am in search of the single tool that can help me use all these small tools instead. I want to avoid the bloat that could get a lot of expensive on the loading time of the browser. So having the testing tool that can help me load all the elements in the single browser can be really useful.
I hope you find some use cases for some of these tools for your own accessibility testing in any web development project.
