1. Make sure you're using Chrome and have downloaded the Chrome extensions (see Step 1).
  2. In a separate tab, open the webpage or app you want to audit. If you're logged in on your site or app, log out now.
  3. To answer an audit question:
    • Follow the steps under How to Test, then select Pass or Fail in the Results dropdown.
    • Record any observations under Notes.
    • You can answer questions in any order and can skip questions (e.g., if your page doesn't have a video, skip the questions about video).
  4. When you're ready, click the Create Report button to generate an ASU Accessibility Audit Report.

Note: If you are signed in on the Accessibility site, you can Save As Draft and return to finish the audit later. When you are signed in, you can also retrieve previous audit reports.


Provide your name if you'd like to be identified as the auditor on the report.
Provide the URL of the page you're auditing if you'd like it included in the report. Useful if you're auditing many pages.

1. Page <title> Meta Tag

1.1 Does the page have a unique and descriptive <title>?

The <title> element is never visible on the page. Instead, the <title> is displayed in the browser tab. On the page you're testing, hover over the tab to see the full <title>.

Cursoring over the browser tab reveals the full page title

Every webpage must have a <title>, which is usually the same as the page's main heading and may include the site name.

  1. Is the page's <title> one-of-a-kind? A good <title> is unique and distinguishes the page from all other pages.
  2. Does the page's <title> adequately describe what the page is about? Descriptive <title> elements help users navigate a site.

See more on page titles.

2. Headings

2.1 Does the page have an H1 heading?

On the page you're testing, click on the Tota11y button  in the upper right of your Chrome toolbar, then click the Tota11y tab   that appears in the lower left corner of the screen. Select "Headings." Tota11y will mark each heading with its level.

Users of assistive technology depend on headings to navigate web pages and inform them of their location on a website. It is especially helpful for navigation if the H1 is the same as the page <title>.

  • Is the first heading on the page an H1?
  • Is there only one H1? (Multiple H1s is like having multiple page titles.)

2.2 Do all headings (and only headings) have heading tags, and are headings in the correct hierarchical order?

On the page you're testing, click on the Tota11y button  in the upper right of your Chrome toolbar, then click the Tota11y tab   that appears in the lower left corner of the screen. Select "Headings." Tota11y will mark each heading with its level.

Headings give content structural order and have real meaning. In addition, users of assistive devices can create lists of headings to navigate and form a mental image of the page. All headings must have heading tags and should be in the correct hierarchical order--that is, headings should resemble an outline and not skip levels. For instance,

<h1>Heading Level 1
  <h2>Heading Level 2
    <h3>Heading Level 3
  <h2>Heading Level 2
    <h3>Heading Level 3
      <h4>Heading Level 4

  1. Are heading levels in the correct hierarchical order (that is, headings don't skip from an h2 to an h4)?
  2. Is there any text that looks or functions as a heading (perhaps it is in a large font or bold faced) but isn't marked with a heading tag?

See more on headings.

3. Images

3.1 Do all images have an ALT tag?

On the page you're testing, click on the Tota11y button  in the upper right of your Chrome toolbar, then click the Tota11y tab   that appears in the lower left corner of the screen. 

Select "Image alt-text." Tota11y will add a label to each image.

If an image has a red error label 

This means the image does not contain an ALT attribute (also called a "tag"). All images must have an ALT tag. For users with vision impairments, ALT tags make visual content available to them in text form. Images with this label fail.

If an image has a yellow warning label  

This means the image contains an ALT tag but that the tag is empty (alt=" "). Consider each image with a warning label and determine if it is a meaningful or a decorative image:

  • Meaningful images: These images convey information or meaning that would be lost if the image was unavailable. Meaningful images must have ALT text that describes the purpose of the image. Examples include illustrative photos and diagrams, logos, symbolic and brand icons, and images with graphic text.  See more on equivalent, meaningful ALT tags. Meaningful images with this label fail.
  • Decorative images: These images convey no meaningful information. If they were removed, the content would still make sense.  Examples include embellishments such as horizontal or vertical rules, ornamental icons, fancy bullets, some generic photos, and other "visual eye candy." Decorative images should have an empty ALT tag (alt=" "). See more on decorative images. Decorative images with this label pass.

See more on images.


4. Video

4.1 Do all videos have closed captions?

Users with impaired hearing or who are deaf rely on captions to access videos. In addition, recent studies show that 71% of students without hearing difficulties use captions at least some of the time.

  • Visually check that all videos on the page have closed captioning. This is usually indicated by the presence of the CC icon: 
  • Click the Play button and the CC icon to make sure captions work.

See more on video.

5. Keyboard-Only Access

5.1 Is a skip-to-content link the first thing you tab to on the page?

The skip-to-content link should be the first item screen readers read on the page. This provides users with a means to bypass sometimes frustratingly extensive header content on every page.

To test, reload the page, then click the tab key. The first element on the webpage that should receive focus (indicated by a blue or dashed outline) is a skip-to-content link.

ASU's skip to main content link

This is ASU's Web Standard 2.0-approved skip link in the ASU header. Note: The exact wording of the link may vary on non-ASU sites.

See more on skip-to-content links.

5.2 Can you use the keyboard alone to navigate all interactive items?

Interactive items include links, form fields, buttons, and components (e.g., videos, slideshows, carousels, popups, dropdown menus, tooltips, tabs and accordions). These are often difficult for assistive technology users to navigate.

Put your mouse aside and use only your keyboard to move to all links, form fields, buttons, and components:

  • Use the Tab key to move forward.
  • Use Shift + Tab to move backward.
  • Use the Enter/Return key or Shift to select.
  • Use the arrow keys to move inside components.

You must be able to answer yes to the following for the page to pass:

  1. As you tab through the page, can you tab to each interactive item in order? Tabbing should not move you prematurely away from a component until all items in the component have been tabbed through or a task is complete.
  2. Can you select all links and buttons with the Enter/Return or Shift key?
  3. Can you move inside all interactive items with the arrow keys and move away with the Tab or Escape key?
  4. When you close a modal or popup window, are you returned to the last place you were on the page?
  5. Is the focus indicator (a blue or dashed outline) clearly visible on each element you tab to?
    Bright bliue border focus indicator

See more on keyboard access.

6. Forms

6.1 Does every form field have a label?

All users depend on form labels to understand the purpose of a form control, especially users of assistive technologies.

On the page you're testing, click on the Tota11y button  in the upper right of your Chrome toolbar, then click the Tota11y tab   that appears in the lower left corner of the screen. Select "Labels." Tota11y will mark each field that is missing a label with a red error . If any errors are seen, the page fails.

See more on form accessibility

6.2 Are instructions located above the form or field they relate to?

Instructions and help text should be read before the input to minimize user error, particularly for disabled users who typically make more errors. 

Examine the form. Check that instructions, requirements and help text are placed before (not after) the input fields they refer to. Instructions should be given before they are needed.

See more on form accessibility

6.3 Are error messages helpful and is it clear which field they refer to?

Users rely on error messages to help them correct input errors, especially users of assistive technologies who tend to make more errors.

Submit the form with mistakes and examine the error messages.

  1. Do all fields have error messages?
  2. Do error messages provide clear and helpful details on how to correct form input errors?
  3. Are the error messages near the fields they refer to (ideally, directly above the field)?

See more on form accessibility

8. Color & Contrast

8.1 Are sensory cues alone used to convey meaning on the page?

Sensory cues orient users by referring to color, shape, size, visual location, sound, etc. This can be confusing to people with sensory limitations. For instance, referring to the "box on the left" or "large text" will baffle users with vision loss. Indicating "errors in red" won't be helpful for the 8% of men with color blindness. 

Secondary textual cues should be added--for example, "errors in red marked Problem," "box on the left titled Recent News," and "large Comment Here text."

See more on sensory cues.


8.2 Is the color contrast sufficient?

On the page you're testing, click on the Tota11y button  in the upper right of your Chrome toolbar, then click the Tota11y tab   that appears in the lower left corner of the screen. 

Select "Contrast." Tota11y will mark text with insufficient contrast with a red error label r . Text with sufficient contrast will be marked with a green success label  .

Adequate contrast is important for users with color blindness and/or low vision. WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. If there are red error labels on the page, the page fails.

See more on contrast

9. Text Magnification

9.1 When the page is zoomed to 200%, is all content still usable?

On your keyboard, click the Control and + keys (Windows) or the Command and + keys (Mac). Just under the address bar in Chrome, you'll see a gauge to help you get to 200%.

Chrome resize button

Check that all text, images, forms and other content on the page are still visible and do not overlap each other. Check that text has not disappeared or been cut off.

Bonus: Autogenerated Audit

Create a quick Siteimprove report to supplement your manual audit.

Filters in Siteimprove's report sidebar On the page you're testing, click on the Siteimprove button in the upper right of your Chrome toolbar. Siteimprove will scan the page and display the results in a sidebar. Click the green arrow beside "Choose Filters" and select AA conformance to limit the results.Siteimprove sidebar

Next, expand all the selections by clicking on the green arrows. Save the Siteimprove report as a PDF (in the Chrome toolbar, click Control+P (Win) or Commd+P (Mac). Click the Change button to select a printer or Save as PDF, then click Save).

The Siteimprove report is a good addition to your manual audit report and should be included when considering remediation steps.