Web accessibility audit

On the page you're testing, click on the DigitalA11Y button in the upper right of your Chrome toolbar. In the DigitalA11y Tublets popup, toggle "Headings" on.

DigitalA11y 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 DigitalA11Y button in the upper right of your Chrome toolbar. In the DigitalA11y Tublets popup, toggle "Headings" on.

DigitalA11y 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 levels like 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.

On the page you're testing, click on the DigitalA11Y button in the upper right of your Chrome toolbar. In the DigitalA11y Tublets popup, toggle "Images" on.

DigitalA11y will mark each image with its ALT (alternative) text.

A. If an image has a label with a red X
This means the image does not contain an ALT attribute (also called an ALT "tag"). Without exception, 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 this criteria.

B. If an image has an empty ALT tag
An empty ALT tag (alt=" ") indicates the image is decorative. Decorative images convey no meaningful information. If they were removed, the content would still make sense. Examples include embellishments (e.g., horizontal rules, ornamental icons, fancy bullets), generic photos, and visual "eye candy." Decorative images should have an empty ALT tag (alt=" "). (See more on decorative images.)
If this image is not decorative, it fails this criteria.

C. If an image has an ALT tag that contains text
An image that conveys information or meaning must have ALT text that describes its purpose. Examples include illustrative photos, graphics, logos, symbolic and brand icons, and images with graphic text. (See more on meaningful ALT tags.)
If the image is meaningful, does the ALT text describe its purpose? If not, this image fails.
If the image has ALT text but the image is decorative, it fails.

See more on images.

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.

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.

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.

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 solid black outline on ASU sites, often solid blue on other sites) clearly visible on each element you tab to?
                

See more on keyboard access.

All users depend on form labels to understand the purpose of form fields, but it can be essential for users of assistive technologies.

For each form field on your page, click on the form label.Your cursor should automatically enter text fields and select checkboxes and radio buttons, See this short video for a demo:

See more on form accessibility

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

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

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

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.

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.

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. 

If there are color contrast issues, you'll see the number of occurrences in a "Contrast (Minimum)" tab and the page fails this criteria.

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. 

See more on contrast

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 Chrome, click Control+P [Win] or Command+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.