Performing an accessibility test

Author Rachele DiTullioPosted on Categories Data, Desktop, WebsiteTags

View the companion video: Performing an accessibility test

In part one, we looked at setting up our environment for accessibility testing, including configuring the accessibility testing spreadsheet. We scoped the homepage of the test site, BoomerangTags.com, into the following eight components to make testing easier:

  1. [Site] Header
  2. [Home page] Hero
  3. [Home page] Pet tags
  4. [Home page] Ratings
  5. [Home page] Video
  6. [Home page] Business information
  7. [Site] Footer
  8. [Site] Cookies settings

The [Site] components of Header, Footer and Cookie settings appear on every page of the site and need to be tested only once. Additionally, we have a “Common Issues” component for tracking any site-wide problems affecting multiple pages, like 2.4.1: Bypass Blocks.

Explore the component

We begin our testing with the 01 [Site] Header component.

screen shot of boomerangtags.com site header with horizontal navigation, dropdown menus, a search widget with autocomplete
BoomerangTags.com homepage site header

Using a mouse, keyboard and screen reader, explore the component. We want to get an idea of what kinds of controls and widgets the header contains. We can also do a first pass for success criteria like 2.4.7: Focus Visible when we’re tabbing through the focusable elements with the keyboard. We can discover hidden menus that display on hover or widgets that expand by activating a button.

The [Site] Header contains the following content:

  • Utility navigation with two links
  • Navigation landmark with a list of 10 items with links
    • Two links have menus
    • The last link in the list opens a search widget
  • Search field with autocomplete and a button
    • Autocomplete list contains several links
  • Shopping cart link

Test the success criteria

Do a first pass through the 50 success criteria (SC) to identify which ones are applicable to the component you’re testing. For [Site] Header, we’re able to mark 19 SC as not applicable either because the content doesn’t exist (video/audio) or the content is out of scope (page level). In part two, we tested 16 of the remaining 31 SC.

Download the BoomerangTags.com testing spreadsheet to explore the results.

Fails

  1. 2.4.4: Link Purpose (In Context)
  2. 1.4.11: Non-text Contrast
  3. 1.4.3: Contrast (Minimum)
  4. 2.4.3: Focus Order
  5. 2.4.7: Focus Visible
  6. 4.1.2: Name, Role, Value

Passes

  1. 2.5.3: Label in Name
  2. 3.2.1: On Focus
  3. 3.2.2: On Input
  4. 3.3.2: Labels or Instructions
  5. 1.3.4: Orientation
  6. 1.4.10: Reflow
  7. 1.4.12: Text Spacing
  8. 1.4.4: Resize text
  9. 1.4.5: Images of Text
  10. 2.3.1: Three Flashes or Below Threshold

Conclusion

While we found failures of six of the SC so far, we found more than six total issues. For 1.4.3: Contrast (Minimum), we have five different examples of foreground text that does not have at least 4.5:1 contrast with the background color. For 4.1.2: Name, Role, Value, we have at least three different issues and will likely have more to log.

In our next session, we will test the remaining 15 SC. Coming soon!