How to do a DIY web accessibility audit

View blog post: How to do a DIY Web Accessibility Audit

Before you begin an accessibility audit, it’s important to know why you want your digital product to be accessible. Are you trying to comply with AODA or meet WCAG 2.0 standards? Maybe you’d like to create an accessible website in order to reach as many users as possible. Know your digital accessibility goals and what standards you need to meet to achieve those goals so you have something to measure your digital product against. It’s a good idea to have a list of any standards (most commonly WCAG 2.0 Level A and AA) readily available that you can reference as you work your way through the process.

1. Tracking Errors

Think about the best way to track any errors you find. A spreadsheet is an easy way to quickly note issues and categorize them in a way that best suits your team. For example, an accessibility audit spreadsheet could have the headings “Page”, “Item”, “Error”, “Success Criteria” and “Recommendation”.

spreadsheet example

A spreadsheet also allows you to sort entered items by heading to pinpoint errors that may come up more than once or pages that need the most help. Consider who you’ll be handing the list of errors to and what will help them move towards solutions.

2. Headings, Links and Alt Tags

A good place to start, and one of the easiest fixes, are headings, links and alt tags. Fangs, a Firefox extension, is a quick and easy way to check heading and link context. Running the extension within the Firefox browser will give you a list of headings and links within that page; each should make sense on their own without the help of the surrounding content. Now is also a good time to check the structure of your headings (H1’s should come before all other headings, followed by H2’s, then H3’s, etc.), which the Fangs extension will also list.

Fangs example

While ensuring your links have context, make sure they are also visually distinguishable from other content on the page. An easy way to check for distinguishable links is to view the design in black and white – are you still able to tell what’s clickable? As you’re checking your headings and links, check any images and icons to make sure they have appropriate alt tags. Decorative images should have blank alt tags, while other images should have alt tags that present the same information conveyed within the image. Images that are links need an alt tag that describes where the link goes. The Web Developer Extension, also a Firefox extension, allows you to display every alt tag on a page from within its “Images” menu option.

Web Developer Extension example

3. Colour

Next, take a closer look at the colour used within your digital product. Text and other important information should have ample colour contrast. To meet Level AA WCAG 2.0 compliance, any visible text within your digital product has to meet a minimum contrast ratio of 4.5:1. Large text (19px bold and above or 24px regular and above) has to meet a minimum contrast ratio of 3:1. A great tool for testing colour contrast is the Color Contrast Analyzer app, which allows you to enter the colour values for your foreground and background to see if the combination passes WCAG 2.0 Level AA or AAA standards.

Color Contrast Analyzer

 

Also check alternate states (such as hover states) for any interactive elements and make sure they don’t rely on colour alone to convey meaning. For example, if text links are blue and underlined the hover state should be more than a colour change to red.

TIP

: If you’re able to, fix any colour, heading, link and alt tag errors you’ve found before moving on. These quick wins will make the next steps easier and less overwhelming by reducing the amount of errors retrieved by the automated checker.

4. Testing with a Screen Reader/Keyboard

There are many screen readers available to test your digital product. Some of the most common include: Jaws for Windows, VoiceOver (free) for iOS, NVDA (free) for Windows, and Talkback (free) for Android devices. If you haven’t used a screen reader before, take the time to learn until you’re comfortable navigating the web using a screen reader and keyboard only. Once comfortable, go through your site with a screen reader and listen for any irregularities or user experience concerns for those that may be listening to your site rather than viewing it. Pay particular attention to the tabbing order of items and whether interactive elements have a visual focus state.

focus state example

After going through while looking at the monitor, turn the monitor off or close your eyes and try to navigate with keyboard and audio only – are you still able to move around the page and understand the content?

5. Automated Testing

Finally, run your digital product through an automated code checker. HTML Code Sniffer offers a way to automatically check websites directly in a browser. An automated code checker will point out any non-compliant html, as well as any possible colour contrast, heading structure and missing alt tag issues.

HTML Code Sniffer

It’s tempting to rely on an automated code checker alone to assess the accessibility of your digital product, but don’t. A code checker can catch many things but it can never replicate a real user, and won’t pick up on if your links are distinguishable and make sense out of context, if you’re using the correct alt tag for the image or if your tabbing order makes sense amongst other things.

After you’ve fixed any errors found via the previously mentioned methods, run everything through an automated checker and test with a screen reader again to make sure nothing was left behind. Congratulations! You’ve just made the web a more accessible place.

Check out more posts on designing for accessibility and subscribe to our email (see below) to be notified of future articles and thought-leadership on this and other topics.

Resources:

WCAG 2.0 – http://www.w3.org/WAI/WCAG20/quickref/

Fangs – https://addons.mozilla.org/En-us/firefox/addon/fangs-screen-reader-emulator/

Web Developer Extension – https://addons.mozilla.org/en-us/firefox/addon/web-developer/

Color Contrast Analyzer – http://www.paciellogroup.com/resources/contrastanalyser/

Jaws – http://www.freedomscientific.com/Products/Blindness/JAWS

VoiceOver – http://www.apple.com/accessibility/osx/voiceover/

NVDA – http://www.nvaccess.org/

Talkback – https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback&hl=en

HTML Code Sniffer – http://squizlabs.github.io/HTML_CodeSniffer/

Why