Accessibility of UW Drupal Sites 2019

Instructions for Testing

1. Visually scan the web page. Determine generally what ARIA landmarks or HTML5 semantic elements are needed.
2. Use Web Developer Toolbar > Information > Display ARIA roles. Look especially for "navigation" and "main" roles.
3. If key landmark roles are not found, view DOM using browser's Inspector tool. Search for the HTML semantic elements such as <nav> and <main>
4. Score the page as follows:
   • 1 = If landmarks exist and roughly match your expectations
   • 2 = Landmarks exist but some are used incorrectly (e.g., role="navigation" on every link)
   • 3 = Key landmarks, such as navigation and main, do not exist

Instructions for Testing

Use Web Developer Toolbar to outline headings.

Then score the page as follows:

• 1 = There is one H1, and all other headings are in proper order reflecting the outline of the page content
• 2 = Headings are present, but either there is no H1 or headings are out of order.
• 3 = No headings

Instructions for Testing

Using Firefox, be sure Zoom > "Zoom Text Only" is selected, then zoom in (using Ctrl + in Windows or Command + in MacOS) to 200%. Score the page as follows:

• 1 = Everything is readable when zoomed to 200%
• 2 = Minor problems; some content obscured but not a big problem really (content is less important or is easy to figure out)
• 3 = Major problems; important content obscured to the point of being illegible

Instructions for Testing

Score the page as follows:

• 1 = The page has one or more Skip Links at the top of the page, and they are made visible on focus, and they work.
• 2 = Skip Links are present, but the link is broken (or the text never becomes visible for sighted users)
• 3 = There are no skip links.

Instructions for Testing

An accessible menu must meeting the following conditions:

• Must be keyboard-accessible
• Must support arrow keys (for moving in all directions) and escape key for closing sub-menus
• Must have ARIA markup (use DOM inspector to check menu code for attributes like aria-haspopup, aria-expanded, and/or role="menu" or role="menuitem"

Score the page as follows:

• 1 = Meets all of the above (OR: Menu does not have drop-down submenus)
• 2 = Is keyboard-accessible, but has limited supported keystrokes (e.g., tab only)
• 3 = Fails at all of the above
• N/A = There are no dropdown menus

Instructions for Testing

An accessible carousel must meet the following conditions:

• Must have a pause button (check for this visually)
• Must have keyboard-accessible controls (test by using the keyboard)
• Must have labels on controls for screen readers (right click controls and select "Inspect Element"; look for button text, alt attributes, or aria-label attributes)
• Must have an ARIA live region (in DOM inspector, search for any of the following: aria-live="polite", aria-live="assertive", or role="alert". Check to ensure content within this region changes as the carousel slides change (i.e., to alert screen reader users that slide content has changed).

Score the page as follows:

• 1 = Carousel meets all of the above
• 2 = Carousel meets at least 2 of the above
• 3 = Carousel fails at all of the above
• N/A = There is no carousel on the page.

Instructions for Testing

Using Firefox, tab through the web page, and score the page as follows:

• 1 = Yes, it is easy to visibly track focus through all content with keyboard (browser default focus indicator, though not ideal in Firefox and Microsoft browsers) is considered ok as long as reasonably visible and consistent.
• 2 = Partial, visible focus is generally ok but sometimes disappears, or is difficult to find.
• 3 = No visible focus at all for significant portions of the page.

Instructions for Testing

1. Visually inspect the page. If there are suspicious color combinations, test them using the Colour Contrast Analyser.
2. If there are no obvious violations, use the Axe browser extension to analyze the page. Select "All issues" from the Results menu and review the list of results looking for contrast errors.
3. Select "Highlight" and scroll through all contrast errors to visually inspect them. Axe flags content with contrast errors if no background color is explicitly defined (since background images might not be loaded, plus Axe is unable to assess the contrast against background images). Although background colors should be explicitly defined, for the purposes of this review, just ignore any errors where contrast is unknown. If both foreground and background colors are identified in the error, this is in fact a failure. Visually inspect the highlighted element on the page to confirm the finding.
4. Score as follows:
   • 1 = There are no contrast violations (WCAG 2.0 Level AA)
   • 2 = There are only minor contrast violations (e.g., in footer)
   • 3 = There are contrast violations that affect important content

Instructions for Testing

1. View the page, looking for images. Decide whether each image should be informative or decorative.
2. Use the Web Developer Toolbar > Images Tab > Display Alt attributes.
3. If no alt text is shown for a particular image, inspect that image using the browser's DOM inspector to determine whether it's an <img> element with no alt attribute, or a CSS background image.
4. Score the page as follows:
   • 1 = All informative images are well-described; all decorative images are hidden
   • 2 = Over half of images are accessible as described above, but there are some exceptions (i.e., give credit for effort)
   • 3 = Over half of images are NOT accessible as described above
   • N/A = There are no images on the page (neither foreground nor background)

Instructions for Testing

Use the WAVE browser extension to check for errors. If there are errors, check to see if any pertain to the Search field. If there is any uncertainty about the results, inspect the code using the browser's DOM inspector.

Score the page as follows:

• 1 = Search field has an accessible label.
• 3 = The search field does NOT have an accessible label.
• N/A = The page has no search field.