Skip to content Skip to footer

Tools and software

Validators and Accessibility Checkers

Firefox’s Developer/ Accessibility Tools

Built right into the the firefox browser they allow you to check issues with tab order, colour contrast, and a number of other accessibility issues. They also have a great feature which allows you to simulate how your website looks for people with different visual impairments. (Read more about Firefox’s accessibility tools here)

W3C’s Code Validator

Checks your code meets the good standards and practice of the W3C. It will check for accessibility issues such as lack of alt tags etc, and will pick up any errors in your code or where you should be using a HTML semantic element and the appropriate one to use. ( Access W3C’s code validator here)

Web Aims Wave

Checks your code for accessibility issues. One of the most widely used accessibility checkers, it labels across the page, in a visual way with extensive use of icons (useful if your a visual learner) Access Web Aims Wave tool here.

Lighthouse

Googles accessibility checker works within the Chrome browser. It runs on the same technology as Axe Dev Tools. (Find out more about Lighthouse here)

Axe Dev Tools

Built by Deque, this works across Firefox, Chrome and Edge. Its free option is more than enough for a beginner. Its ability to work in the browser is useful for running quick tests as you develop.

Its explanations for errors can be quite technical, this can be useful for editing specific offending parts of code. However, if you prefer a simpler approach you might find the Wave tool, a better starting point (I would recommend using both alongside each other). Access Axe Dev tools here.

Linter

This works alongside Github, commenting on any code that you send to Github from your code editor. This one is for when you start to feel comfortable using services like Github and it is very useful tool. (Access Linter here)

Screen Readers

These are very useful for testing aria labels and alt tags. (read more about using screen readers for testing in this article on aria)

The main ones to use are, NVDA for Windows. (NVDA is Available here), Voice Over for Apple (Read more about Voice Over here) and Orca for Linux. (You can download Orca here)

Colour Contrast Checkers

Web Aims Contrast Checker

A very useful tool. Easy to use allowing you to easily copy and post colour hexcodes and lighten and darker colours to improve accessibility. (Access Web Aims Contrast Checker here)

Contrast Ratio (by Lea Verou)

This is a useful tool for showing very clearly how legibility of text changes with different coloured backgrounds. I personally don’t tend to use this as much as I find it a little visually overwhelming. (however I know other developers who swear by it). (Access Contrast Ratio here)

Fire Fox Web Development Tools

Our old friend again. You can easily use this to hover over certain colours and see there colour contrast rating and change it. It is the tool I use most often for checking colour contrast. You can read more about this in this article on accessible colour schemes.

People

This is any easy one to forget amongst the range of tools that are available. Other people, friends family, people on the train (bet they wish they had booked the quiet carriage), anyone who shows an interest. This will be a very useful means of getting an idea of how accessible your website design is straight from the mouth of a potential user (they may spot issues that you didn’t)

Leave a Reply

Your email address will not be published. Required fields are marked *