Get started with accessibility testing

Checking your websites and applications for bugs, issues and any other vulnerabilities is essential.

Accessibility is sometimes an afterthought. Its benefits are less tangible to able-bodied people.

It is important for your website to be accessible to people who are disabled. It is the law and you must meet specific criteria if you work in the public sector. Lots of able-bodied people also use accessibility features.

“It is essential that the Web be accessible in order to provide equal access and equal opportunity to people with diverse abilities.”
— W3C (World Web Consortium)

Automated tools

All modern browsers come with development tools. Most have built-in accessibility auditing.

The main two players are Google Chrome and Firefox. These browsers have tools that automatically detect common issues on a website. They are best suited to check for code issues, for example:

• alternative text for images
• colour contrast
• heading hierarchy

You can access developer tools by right clicking on a page and selecting ‘inspect’ (‘inspect element’ on Firefox) from the context menu.

You can also use keyboard shortcuts: CTRL + SHIFT + i on Windows or COMMAND + OPTION + i on MacOS.

Lighthouse (Google Chrome)

If you use Chrome, you’ll probably have used Lighthouse in order to identify issues that worsen your site’s performance.

Lighthouse has an accessibility audit feature. It can detect common issues, such as:

• colour contrast of text
• ARIA attributes — HTML attributes which help assistive technology to navigate

You can read more about the full description of the accessibility audit on Lighthouse.

The results screen of a Lighthouse accessibility audit run on an inaccessible website.

Lighthouse is very easy to use. It only takes a couple of clicks to open developer tools and run an accessibility audit. You get a score out of 100 with a list of issues it suggests to fix.

Each issue is grouped by category. Each category has a:

• link to a full article with information about the issue
• list of the specific elements you need to fix

Accessibility Inspector (Firefox)

You can use Firefox’s Accessibility Inspector to check for contrast, labelling and keyboard issues. It works like Lighthouse on Chrome but you do not get a score out of 100.

Accessing the inspector is easy as it’s a tab within Firefox’s DevTools panel.

The results screen of the Accessibility Inspector run on an inaccessible website.

One of the best features of the Accessibility Inspector is that it checks for keyboard navigation issues.

As well as common keyboard issues, like focusing clickable elements, the inspector also highlights the page’s tab order. This is the order that user would focus elements on a page when tabbing through content. The feature helps you to see whether your code (markup) is structured logically.

Browser extensions

Both browsers also have extensions made by accessibility companies. The extensions offer more features to help audit a website.

Two browser extensions of note are:

• axe, developed by Deque
• Wave, developed by WebAIM

axe

Axe offers most of the features available in browser tools. It also offers a very detailed review of the page you’re analysing.

After you install axe, you can access the extension via a tab in the developer tools panel. You can start an audit by clicking ‘Scan all of my page’.

Axe is great for those who want an in-depth audit of their site in accordance with WCAG 2.1 (Web Content Accessibility Guidelines). It usually identifies more accessibility issues than other tools in this blog post.

The results screen of an accessibility audit with axe run on an inaccessible website.

If you’re a developer, axe can be added to your local development workflow through npm or yarn by installing axe-core. This will help you to test accessibility during unit tests.

You can install the axe extension on Chrome or install the axe extension on Firefox.

Wave

Wave also has the common features from the built-in accessibility tools. It offers a user-friendly interface and an overlay for the page you’re analysing. Instead of focusing on errors, it highlights all regions of the page that are visible to assistive technologies.

You can run an audit by clicking on the Wave icon in the browser’s extensions area. A side panel opens with the results.

My favourite feature of Wave is you can find out information from the side panel. You can click the ‘i’ icon to find this out, why it matters, how to fix it and links to related guidelines.

Wave accessibility test run on an inaccessible website.

You can install the Wave extension on Chrome or install the Wave extension on Firefox.

Manual testing

You must also manually test your website or service. Automated tests do not detect every issue.

The best way to test for accessibility is to test your service with people who have disabilities.

For a basic check, you can use W3C’s Easy Checks checklist to see whether accessibility is met.

For a more robust checklist, you should use The A11y Project’s WCAG checklist. This checklist helps to address many of issues that are required to be fixed for government and public body websites.

Final thoughts

It’s easy to fix common accessibility issues on your website.

It may seem like a daunting prospect to fix each and every issue, but each issue you fix makes your service more accessible and improves your user experience.

At West Midlands Combined Authority, we have embedded accessibility within our team’s culture. Spotting issues early helps to save time and money.

This article was published as part of #ServicesWeek 2021, a cross-organisational UK public sector event series.

You can also read more of blogs from our team on the WMCA Digital and Data Medium publication.