Accessibility audits: how to do a ‘quick and dirty’ audit

By Olena Bulygina
Accessibility

‎

Here I show you how to do an accessibility audit. And explain why it's a great place to start your accessibility journey.

Accessibility audits might seem daunting. But they don't need to be. 

This is a key takeaway from a session I presented at Inviqa's 2020 web accessibility conference.

My talk covers: 

  • the different types of accessibility audits;
  • how to do an accessibility audit yourself; 
  • how to start working with Web Content Accessibility Guidelines (WCAG).

Get my accessibility audits talk on-demand. Or keep reading to get the lowdown on how to do an accessibility audit.

What is accessibility evaluation?

Before thinking about audits, it’s important to understand the what and why of accessibility evaluation.

Accessibility evaluation is a process that helps us understand how accessible a digital product or service is for people with disabilities or other digital access needs.

It can be done in two ways, using:

Let's focus on the former: accessibility audits that do not involve testing with users.

What is an accessibility audit?

An accessibility audit provides a detailed look at how and where you can enhance your digital product or service to improve digital accessibility. And meet web content accessibility guidelines (WCAG).

Audits are an ideal place to start your accessibility journey. And start designing more inclusive digital products.

Depending on your needs – and where you are in the process of designing and developing a digital product – your audit will either be:

  • Benchmark driven: where you determine how accessible your existing digital product or service is; or
  • Performative: where you identify accessibility issues as you develop a digital product, and ‘design out’ those issues as you go along. This is usually an iterative process.

The different types of accessibility audits

There are three main types of accessibility audits:

  • Automated (and manual) checking
  • Accessibility audits by experts
  • Conformance evaluation or certification

The first of these – automated checking – is a performative audit that’s useful for prototypes, minimum viable products (MVPs), and initial iterations of your digital product or service. 

You use it as you build and iterate a product. Automated tooling looks at your code and highlights accessibility guideline violations and potential accessibility issues.

But automated checking comes with some big ‘buts’:

  • Not all guidelines can be checked automatically. For example, the audit might green light your alternative text for images (aka image alt text). But without manual verification, you can’t guarantee that the alternative text correctly (and concisely) describes the contents of an image.
  • Compliance is not always guaranteed. It’s not always clear or obvious how tools check your digital product for compliance. And it’s not always clear which of the web accessibility guidelines they check against. Some of them check against the WCAG 2.1. Some do not.

In my experience, one tool rarely does everything. This means you may have to use specific tools to check specific aspects like contrast.

Despite the limitations, these automated testing tools are invaluable in helping teams to bake accessibility into the digital design process.

Google Lighthouse is a great example of one of these tools. It speaks to everyone on the team by providing a clear gauge of accessibility using a tangible score that you can track and measure yourself against.

But remember that technical compliance with web accessibility guidelines is not the same thing as having a genuinely accessible product that’s been tested with real users.

It’s possible to build a web page with a perfect Lighthouse score that’s still not accessible.

How to perform basic accessibility checks

Here are some of the first steps you can take to check the type of experience your website delivers for people with digital access needs:

Check page titles

Every page needs to have an input title. This means finding the HTML tag that is associated with that. Usually it’s done through the 'view source' option which is built into most modern browsers.

Turn off images

Again, this can be done through in-built functionality within your web browser. Google Chrome provides an advanced option for turning images on and off.

This makes it easy to look for ‘disappearing’ text. And that includes things like text embedded within an image. Rather than text that's accessible through page copy.

The next thing to do is check your image alt text for issues – for example, a missing or incorrect description of the image contents.

Turn off sound

Turn off sound using your computer’s sound options. Ensure that your site is conveying the same meaningful information – with or without sound.

Use plug-ins

Using special plugins, like Google’s Wave, lets us apply different views on the top of the page. 

One of these is greyscale. It’s crucial to test greyscale and contrast for people who are colour blind to ensure they have access to all information on the page.

Use keyboard navigation

Try to operate and navigate your site or web page using keyboard navigation alone.

Is everything reachable without a mouse or trackpad? Are the functions operable? Can you use the forms and interactive elements?

Zoom in

Using the default controls, zoom to 200% or 300%. See whether anything pixelates, gets pushed out view, is inoperable.

This is how many people with visual impairments operate the internet to enlarge elements and make them easier to see.

Check page structure and hierarchy

You don't need to be a coder to do this. Check formatting with your page layout to ensure a logical page and heading hierarchy.

Your heading text should be the only H1 on the page, followed by subheadings for H2, H3, and so on. They should follow the order 1-3, so H3 cannot come before H2, for example.

Check multimedia 

The web content accessibility guidelines (WCAG) specify that important information contained within multimedia elements such as video or audio recording must be provided in a text-based alternative.  

Useful tools for accessibility audits

There are some useful (and free!) online tools and plug-ins you can use as part of a ‘quick and dirty’ approach to auditing.

They’re a good way to quickly uncover some of the biggest accessibility issues across your digital product or prototype.

  • WAVE Evaluation Tool. This is a great browser plugin that I use daily in my accessibility work.
  • Google Lighthouse. This free tool gives you a tangible accessibility score. You’ll need to go through the accessibility evaluations manually, but this is something the whole team can use.
  • Stark contrast checker. This is a contrast checker for Sketch which helps ensure that accessibility is baked into your design work.  

One big caveat is that these tools don’t give you the complete picture.

As with the image alt text example I mentioned, having no errors flagged with your automated tool or plugin doesn’t guarantee you’re WCAG compliant.

Pro tip: check out my article on accessibility testing tools for a deeper dive into the pros and cons of testing tools.

How to do an accessibility audit using WCAG

Auditing involves a lot of manual decision-making. That’s why we always recommend collaborating with accessibility consultants who are certified to perform conformance audits.

That said, conducting an initial audit in-house, using the web content accessibility guidelines (WCAG), is a great way to identify violations and produce an actionable and detailed plan for the whole team.

Here’s how you can do it:

Define the evaluation scope

Together with your team, first define the scope of your accessibility evaluation i.e. 

  • What are you testing? Which parts of your digital product or service are included?
  • Which WCAG conformance level are you assessing against? A, AA, or AAA?

Determine which pages to check

Consider your most trafficked and popular pages. And the ones that are critical to the main user journeys people take on your site to complete tasks. The pages key to this sequence are the ones you need to be assessing.

Modern websites are large, but not all pages and sections are created equal (at least from an accessibility point of view).

Be sure to identify where your site uses templates i.e. where a series of elements are repeated in the same way in different places across the website.

Where this is the case, you can save a lot of time by auditing one instance of the template, rather than each separate instance. By improving accessibility there, you're improving accessibility site-wide.

Check against each guideline

This is where the core of the work happens!

Open the WCAG guidelines (for your target conformance level). Check each of the key pages you’ve identified against each guideline. Make notes as to where a page is making or breaking it.

It’s a manual process. But the guidelines lay out exactly what you need to check.

You absolutely do not need to be a coder, but you will need to manually inspect each of the elements. 

Use a screen reader to listen for problems or noise. You can even use a sleep mask or close your eyes to help check whether it’s possible to complete the task on a given page (for example, adding something to your basket on a product page). 

It’s important to understand that your work here is to make a conclusion about whether an issue makes or breaks accessibility. But in reality, people with accessibility needs may experience these issues differently. 

How to prioritise your accessibility audit findings 

You’ll now have an actionable list of issues and fixes for them. Hurrah!

Unfortunately, you can’t fix everything at once, so you’ll need to prioritise. To help you do this, consider the relative severity of the issues you’ve identified and which users they might impact. 

Where an issue prevents users from completing crucial tasks, it’s clearly a top priority. Where the issue just makes for a clunky user experience, that’s a lower level of severity.

And where an issue impacts a template you use all over your site, fixing it in one place might have a much bigger positive impact. 

However, when proposing an action plan, you need to remember that what helps one user group may hinder the experience for another.

So it’s important to approach your design work from an inclusive design perspective and ensure you’re not excluding anyone.

In your audit’s executive summary be sure to include the following:

  • a description of the scope defined, including the amount of pages tested and the compliance level you tested against;
  • confirmation on whether you reached the desired level of technical compliance;
  • an overview of the most important issues to fix, with examples and an explanation of why those issues were deemed severe; and 
  • details on the specific tools and plugins you used as part of the assessment.

Why do this? It’s really useful for informing and aligning your teams on accessibility, and helping those who will be implementing the fixes you’ve identified. 

Wrapping up

Knowing how to do an accessibility audit yourself is a great start to your accessibility journey.

But be mindful that an in-house audit can't replace a full-scale audit (with a certified accessibility consultant) and user testing. 

Remember also that a digital product or prototype that technically complies with WCAG guidelines is not necessarily accessible to all your users.

For more accessibility inspiration, check out: