ASU DIY Web Accessibility Audit

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.)

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 element with the heading 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 (opens in a new window).

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 (opens in a new window). 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 (opens in a new window). Decorative images with this label pass.

See more on images (opens in a new window).

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 (opens in a new window).

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.

The exact wording of the link may vary from site to site.

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?
   

See more on keyboard access (opens in a new window).

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 (opens in a new window).

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 (opens in a new window).

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 (opens in a new window).

Users should be able to determine the purpose of each link from the link text alone. Screen reader users can create lists of links as a navigation aid, but this is only helpful if the link target is clear from the link text. 

Scan the page for links.

1. Are there generic links such as "click here" and "read more"? These are confusing for users, especially users of assistive technology, because the link distination is unclear. In addition, such links have a negative effect on SEO as the links are not findable.
2. Do links that go to the same destination page have the same link text? For example, if the links "About Us" and "Directory" both go to the same page, users will be confused, especially users of assistive technology, who assume differently named links will go to different pages.

See more on accessible links (opens in a new window).

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 "errors in red," "box on the left," or "large text" will baffle users with vision loss.

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 (opens in a new window).

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 . 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 (opens in a new window).

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%.

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.

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.

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.