Useful Web Accessibility Checks and Tools

You will find a wide range of free, accessibility tools online. These include everything from colour contrast checkers and readability tools to open-source screen readers.

For example, you can make some quick checks using the WAVE web accessibility evaluation tool (input a URL and the tool will immediately highlight errors) while the Gunning Fog Index can be used to check text readability. Simply paste a passage of text (one or more full paragraphs of around 100 words) into the window and click Calculate.

• Text intended for a wide audience generally needs an index of less than 12
• Text for a near-universal understanding generally needs an index of less than 8

Discover an extensive list of online evaluation tools at W3C and, for a few tips and tricks for some basic checks, read on!

Manual Checks

There are some simple checks you can make yourself. Here we’ve provided instructions for three to get you started.

Test Keyboard Navigation on Your SIte

If you’ve not tried navigating through your site using only your keyboard, it’s time to give it a go. This simple exercise will quickly tell you how well your interface can be operated through a keyboard or keyboard alternative, as would be the experience of a user with limited or no vision or those with physical disabilities that might make mouse and or keyboard use difficult.

Step 1: Load up your site, and press the “tab” key. What is highlighted first? This is where your keyboard users will begin to experience your site.

Step 2: Continue pressing “tab” and see where your site takes the user. Does it make sense? Can you get to everything you should be able to interact with using just the tab key?

Step 3: Start testing your main workflows.

To do this you can:

• Press “Enter” on a link or button – when you do, it should behave as though the user clicked it
• Press “Enter” or “Space” – this should allow a user to access dropdown menus
• Press the arrow keys – this should allow users to navigate through the options
• Check you can start typing when you tab into a form field
• Check you can exit a pop up or overlay without clicking outside the box

Your main goal in testing with a keyboard is to see where you might get stuck in your app or site if you didn’t have a mouse. You can find extensive guidelines on keyboard operation on W3C.

Add/improve Image alt Text

Every <img> on your site should have the alt= attribute. This enables assistive technology to read it in order to describe what the image is showing to visually impaired users.

Of course, alt text has more uses:

• It’s there to provide better context and description for SEO
• It is displayed if an image fails to load

However, it’s primary purpose is accessibility and implementing this is easy when you know the rules:

Rule 1: All images should have clear and descriptive alt text – the alt= attribute. This text should describe the information conveyed by the image, including numbers and words, not just the image itself.

Rule 2: The use of alt= applies to all images but in different ways. For images containing information, and active images (those that perform functions such as a link or button), apply rule 1 above. If the image is purely decorative, use the alt= attribute, but keep it empty, e,g, alt=””. This will tell screen readers to ignore the image.

Check Your Headings

Proper headings should always be used – avoid using text that’s styled or bold. Bigger fonts help to create hierarchy and can be easier to read while heading types are given tags (<h1> to <h6>) to define their meaning.

These important components, along with others on your site help to create your accessibility tree. And, when using screen readers and other assistive technology your users can navigate through your content using your headings to:

• View a list of all headings on the page
• Read or jump by headings,
• Navigate to the different levels of headings – <h1> to <h2> and so on and so forth

To manually see if your headings (and components such as images) would be picked up correctly by assistive technologies try this quick check:

1. Right-click on a page on your site
2. Click ‘Inspect’
3. Under ‘Elements’ look for ‘Accessibility’
4. Click the ‘Accessibility’ tab, somewhere on your page then right-click and select ‘Inspect’
5. Your accessibility tree will now load, showing you what is and isn’t being picked up – this is also a good way to sense check e.g. headings to ensure they make sense

Colour Contrast Checks

Because the main colour contrast guidelines can be a little confusing, WebAim has done a good job of simplifying the WCAG 2 Contrast and Color Requirements for web designers and content creators. These, and other free, online tools can be used to easily check colour contrast on your site.

Most contrast checkers ask you to supply the foreground and background

• WebAim’s Contrast Checker
• Contrastchecker.com

Colour Tool from Material Design If you have found a great tool, tips or resource that you’d like us to share with the Mind the Product community, let us know. Complete our Accessibility Idea Sharing Form.