There are several automated tools that test against Web Content Accessibility Guidelines (WCAG). Here are a few that UX designers and developers may find useful to test how accessible their website is.
Being able to use websites is a fundamental part of independent living for certain disabled people. It can be the difference between being able to order their groceries online or having to ask somebody to do their shopping for them.
It’s been ten years since the World Wide Web Consortium (W3C) published their online accessibility guidelines. But, according to Ability Net, less than 10% of websites meet these criteria.
Use the following tools to make sure your website is part of that 10%.
Web Accessibility Evaluation Tool
Powered by non-profit organisation WebAIM (Web Accessibility In Mind). Consider this website like a deep dive MOT tester for your car. The tool evaluates live web pages and organises any issues it finds into a left-hand panel. It sorts these into structural elements, HTML 5, ARIA and contrast errors. It also highlights missing alt-text.
Contrast Ratio – Free
Link: Contrast Ratio
An invaluable tool for graphic designers, illustrators and people working within branding. This tool indicates how drastic the gradient is between two colours, written in ratios like 1:4. The greater the difference between the two numbers, the easier it will be to read.
WCAG guidelines state that large text should have a contrast ratio of at least 3:1. This allows people with colour deficiencies to distinguish between text elements.
Google Lighthouse Accessibility Audit – Free
Did you know you can get a quick review of how accessible your site is using simple Chrome Developer Tools? Available through Google Lighthouse Accessibility Audit, all you need to do is install Chrome. It gives your website an accessibility rating out of 100 and offers a breakdown of areas to improve. From a review of HTML structure and buttons to interactive elements. It even has an in-built contrast ratio check.
Stark by Adobe – Paid
Link: Stark by Adobe
It’s hard for developers to imagine what it’s like being colour blind without having a visual deficiency themselves. Fortunately, Adobe’s Stark plugin simulates what it’s like for people living with a range of colour vision deficiencies. It covers common forms of colour blindness like deuteranomaly, (reduced sensitivity to green light), as well as protanomaly, (lowered sensitivity to red light) and tritanomaly (rare, reduced sensitivity to blue light). Comes with integrated contrast checker.
PEAT – Photosensitive Epilepsy Analysis Tool – Free
There are over 18,000 people thought to have photosensitive epilepsy in the UK alone. If you’re designing a website for an international product or service, that audience will be a lot bigger.
It’s obvious that videos with strobe lighting or flashing imagery have no place Autoplaying within a homepage. But there are other risks too.
Seizure-inducing content is varied and complex. It can range from bright, rapid flashes to quick transitions between light and dark colours and certain spatial patterns. Even hover over states with excessive styling can cause problems.
The Trace Center’s PEAT tool identifies seizure risks in web content and software and is free for developers to use.
Use Contrast – Paid
Link: Use Contrast
Smart MacOS app with browser extension. It offers quick access to Web Content Accessibility Guidelines (WCAG) colour contrast ratios. The best part? It works within design software like Sketch, Illustrator and Photoshop.
Test your content with disabled people
That said, the best way to test your website’s accessibility is to ask people with a range of conditions and impairments to try it.
Holding focus groups and ensuring user testing includes people who use screen readers and other assistive technology is a great place to start. Be open to feedback or criticism and be ready to implement those changes.
Which accessibility tools do you use? Get in touch with your recommendations.
Contribute an article
The Big Hack is an open community, and if you have an idea, or an article, about how to make the digital world more inclusive, we want to hear from you.Message us about a contribution