Step 1. Set Up Your Tools

As part of Testing for Web Accessibility you will use a few different tools, so let's get them ready to use now.

Note: This guide assumes you are using the Chrome web browser for testing.

Developer Tools

Chrome's Developer Tools (part of the browser) lets you view the underlying code (HTML, CSS, JavaScript) of a web page more easily than the old method of “View Source”, which no longer works for many modern pages.

Quick Intro

DevTools has a number of features, but for these tests, you will focus on just the Inspector.

To inspect something on a web page:

  1. Select the item on the page and right-click (Control-click for Mac), then select Inspect.

  2. In the Developer Tools pane > Elements tab that appears, you will see the the page’s code with the highlighted section corresponding to the page element you selected. If there is a disclosure (right-facing) triangle, you can click on it to view the rest of the code for that element. (See the right side of the pane for more info about the code you've selected.)

If you want to inspect a different element on the page and you still have the Web Developer pane open, just click on the Inspect icon in the top left corner of the pane and then select the new element.

When you’re done inspecting, you can close the pane by clicking the x in the top right corner.

axe Expert

Deque’s axe Expert is an automated accessibility testing tool that will check web pages for accessibility errors that can be detected by the software.

Install & Configure

Deque's axe Expert is a Chrome extension that you will need to add. (Extensions are easy to add, but U-M has a limited number of licenses for this one, so you will need to login to get the link to install axe Expert.)

Once you've installed it, you need to set it up to check for WCAG 2.1 rules:

  1. Right-click anywhere on your current web page and select Inspect. This will bring up the Developer Tools pane.
  2. In the row of tabs at the top of the Developer Tools pane, click on the axe Expert tab. If you don't see it, you may need to look under the » menu (the double greater-than symbol) at the right of the tab bar.
  3. To the right of the axe Expert logo on the pane that comes up will be an Analyze menu with a downward arrow. Click on it and select Rules.
  4. Select WCAG 2.1 Level AA. (This is our current set of guidelines.)
  5. Scroll down the pane on the left and click the checkmarks for Test best practices and Use experimental rules.
  6. Now click the blue Use this Ruleset button.
  7. You can close axe Expert by clicking the x at the top right of the screen.

Quick Intro

To use axe Expert:

  1. Open Developer Tools by right-clicking anywhere on the page and selecting Inspect.
  2. Select the axe Expert tab in the Developer Tools tabs (it could be hidden under the » menu).
  3. Click the Analyze button. On the left-hand side of the axe dashboard, you’ve got a handy list of accessibility issues and how many times the issue occurs on the page. When you click on an issue, a detailed explanation is provided to the right of the list and includes:
    • A description of the issue with a link to additional info available for free on Deque University
    • A snippet of the code that has caused the issue
    • Guidelines for fixing the issue
    • Information about the severity of the issue and which accessibility guidelines are being violated (e.g. WCAG 2.1, Section 508, etc.)
    • The Inspect button will bring you to the problem code in your browser’s page inspector
    • The highlight button will highlight the locale on the web page where the issue is.
  4. You can close axe Expert by clicking the x at the top right of the screen.

If you'd like more of a tutorial, see axe Expert: video introduction.

Stark Chrome Extension

This extension checks color contrast and can simulate color blindness. It is intuitive and requires a simple installation.

Bookmarklets

In the tests, you will also be using some bookmarklets, which simply add bookmarks to your browser that you can click on to test pages.

You can install all the bookmarklets now or install each one at the time of the test. 

All Set?

Ok, on to testing...