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

Link: 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

Link: Google Lighthouse Accessibility Audit

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

Link: PEAT – Photosensitive Epilepsy Analysis Tool

Developers and front-end designers are finding more creative ways to build websites. This means more dynamic, interactive features using Javascript, Flash and media-rich software. While great for creativity, it can be problematic for photosensitive epilepsy sufferers.

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.