Performing an accessibility self-audit

Why should you perform an accessibility audit?

An accessibility audit is the first step in making your existing website or web page something that everyone will find easy to use.

Available for everyone

We aim to make our websites accessible to everyone in the following ways:

• Perceivable: Making text and media perceivable for everyone
• Operable: Helping users navigate content
• Understandable: Making and media text understandable
• Robust: Maximising compatibility

Performing an accessibility audit is part of the process of assessing where we are not achieving the above aims.

Compliant with the law

We must also ensure all of our website content meets AA standards as defined by the Web Content Accessibility Guidelines (WCAG) 2.1.

What kind of audit do you need?

There is no perfect accessibility audit that meets all requirements. The factors that will determine what type of audit is right for your website include:

• How much expertise is available in-house
• The size of your website
• How often your content changes
• The complexity of your functionality
• The nature of the publishing system

There are two types of accessibility audit:

• An expert audit
• A self-audit

A full and comprehensive accessibility audit is normally carried out by an accessibility specialist, normally using an external consultant if no internal resource is available. They work in collaboration with people with disabilities to perform an audit on the website. However, there are some situations where an expert audit is not appropriate, including:

• if you don't have the resources to perform a full audit
• if you have a simple website or small number of pages
• if you just want to get an idea of your current level of accessibility
• if you want to quickly identify obvious accessibility issues to prioritise

In this case, you can perform a self-audit. That means that the website is tested by your own in-house staff. The benefits of this approach include the much lower cost and the fact that you will be very familiar with your website.

This guide will help you perform a self-audit.

How often do you need to audit your website?

A self-audit should be included in your quality management process and carried out regularly. How regularly depends on a number of factors including the size and complexity of your website and how often the content and functionality are updated.

Who can perform an accessibility self-audit?

The self-audit in this guide can be performed by anyone who:

• is comfortable using a browser (ideally Google Chrome)
• can install and use browser plugins 
• can commit enough time and attention to work through each step in the audit process
• can remain objective during the assessment
• has some basic training and knowledge of what makes a website accessible

What should you test?

Your self-audit needs to cover the following as a minimum measure of how accessible your website is:

• Your most popular content
• Your most complex pages
• Performing the key actions on your site, for example; 
  • reading content from top-to-bottom
  • submitting an enquiry
  • watching a video
  • performing a search
  • navigating using the main menu
  • downloading a document

What does a self-audit involve?

A self-audit involves testing your website by performing a number of manual steps and using some helpful tools. 

Take screenshots of the issues you find. This will help you and others who are are attempting to fix the issue in the future.

The self-audit process

Automated tools test

Automated tools can help you understand your website's level of accessibility with the click of a button. Some tools test for different things, or are better at testing for certain things than others. So we recommend using more than one automated tool.

• Accessibility Insights for Web (Google Chrome extension or Windows app) – use the 'Assessment' option
• WAVE Web Accessibility Evaluation Tool

Steps to test

• Follow the instructions for each tool
• Test your most popular content
• Test your most complex pages
• Record the issues found by the tools – prioritise the major issues, especially those related to colour contrast, alternative text, and your main functionality (navigation, search, forms, videos)

Keyboard test

This tests what it's like for someone to use your website using only their keyboard. Navigate through each page of your website from top to bottom using only the keyboard and avoid using your mouse. Ignore this step if you have already completed a keyboard test using Accessibility Insights for Web or another tool.

• Use the Tab key to move forward
• Use the Shift and Tab keys to move backwards
• Use the Spacebar to skip to the main landmarks on the page and to open dropdown menus
• Use the Enter key to activate buttons and links
• Perform key actions like completing a form, searching for something, and clicking a link
   

Screen reader test

This step tests how your website performs when a visitor is using a screen reader. A screen reader allows people who are blind or visually impaired to use their computer. It is a form of assistive technology that renders text and image content as speech or braille output.

Mac OS

Press Command and F5 to activate the VoiceOver screenreader

• Open your website in Safari
• Use the CTRL + ALT + A keys to read everything on each page
• Press CTRL to stop the screen reader
• All keyboard controls and a user guide are available from Deque

iOS

Select Accessibility under Settings. Set VoiceOver to On and follow the instructions provided

Android

Turn on the TalkBack screen reader, available in Settings

Windows

You can use the screenreader built into Windows 10, Narrator.

• Click the Start button and open Settings > Ease of Access > Narrator to view the Narrator pane
• Turn on the Narrator button
• Follow the instructions provided

Windows (alternative)

NVDA is a popular free screen reader you can install in any version of Windows. Visit NV Access website where you can download it and find instructions for using it.

Testing with a screenreader

• Ask your screen reader to read a page from start to end
• You can adjust the speed at which content is read
• If possible, listen to what's being read aloud without looking at the screen
• Look for content that the screen reader skips or cannot read clearly
• Note down when the screen reader gets 'stuck' down any dead-ends or stops in an unexpected place
• Listen for anything that wouldn't make sense for people who cannot see the screen
• Ensure you test your most popular content
• Ensure the main functionality on your website is tested, for example, the primary navigation, search functionality, footer content, videos, image galleries, carousels, forms, and so on

Colour blindness and vision impairment test

The next step is to test how your website would perform for people with colour blindness or vision impairment. We use a disability simulator for Google Chrome called Funkify to perform this test. Open Google Chrome and install the Funkify extension.

Funkify requires a paid subscription to access all colour blindness or vision impairment filters. If you do not wish to purchase this, we recommend using the 'Emulate vision deficiencies' tool built into Google Chrome Dev tools (see 'Alternatives to Funkify' section below).

Recommended filters

• Blurry vision (set to 3)
• Achromatopsia (greyscale)
• Deuteranomaly (green is weak)
• Deuteranopia (green-blind)
• Protanomaly (red and green are weak)
• Protanopia (red and green blind)
• Tritanomaly (blue and yellow are weak)
• Tritanopia (blue and yellow blind)
• Hand motor impairment (set to 8)

Steps for performing this test

• Activate each of the filters above individually
• Make a visual assessment of your web page(s)
• Try to complete key actions you identified before starting the audit
• Make a note of any content that isn't visible or is difficult to see clearly with the filter activated
• Deactivate the current filter and select the next filter in the list

Alternatives to Funkify

Full access to all Funkify filters requires a paid subscription. If you cannot purchase this subscription, there are free alternatives available that offer some of the core testing features required to perform an good assessment of colour blindness accessibility: 

• Google Developer Tools: Activate the tools using the menu at the top of Google Chrome (View > Developer > Developer Tools) and then using the 'Rendering' tab under 'Elements'

Zoom test

This tests how your website works when people with visual impairments adjust their browsers to make content easier to read. You can use any browser to perform this test. Instead of using your preferred browser, you may which to install a different browser or create a specific browser account or profile for this task so you can save the settings for future tests.

• Adjust your browser's settings to increase the font size to the largest available size
• Set page zoom to 400%
• Try to complete key actions you identified before starting the audit
• Content should flow onto the next line
• You should not need to scroll horizontally to view content
• Make a note of any content that isn't visible or is difficult to see clearly with these settings

Text spacing test

A visitor with a cognitive disability like dyslexia can adjust paragraph and font spacing to make content easier to read. This test aims to replicate the most common settings they use. You will need to install this bookmarklet in your browser: https://cdpn.io/stevef/debug/YLMqbo. You may need to reveal your browser's bookmark bar (usually an option within the View menu).

• Visit a key page
• Click on the bookmarklet
• Make an assessment of how the page design has responded to the paragraph and font spacing settings
• Make a note of any visual and readability issues

Colour contrast test

There must be sufficient contrast between your background and content in the foreground, for example, between your body text and the main background colour of your website. This is measured as a ratio:

• Text must have a contrast level of at least 4:5:1 against its background
• Non-text elements (for example, the borders on a form field) must have a contrast level of at least 3:1 against their background

Steps to complete this test

• Install the Colour Contrast Analyser tool
• Use the tool to pick out the colour of your main body text and the background on which is normally sits - ensure the contrast ratio is at least 4:5:1
• Repeat for other text elements across your website, including headings, links, icons, and button text
• Use the tool to pick out the colour of your non-text elements (like the borders around buttons and fields) and the background on which is normally sits - ensure the contrast ratio is at least 4:5:1