Performing an accessibility test

Author Rachele DiTullioPosted on Categories Data, Desktop, WebsiteTags

Last updated 21 August 2022.

The companion videos and information on performing an accessibility test are available from the Accessibility Testing project page.

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 21 SC as not applicable either because the content doesn’t exist (video/audio) or the content is out of scope (page level). We then did automated and manual testing of the remaining SC.

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

Fails (10)

  1. 1.1.1: Non-text Content
  2. 1.4.3: Contrast (Minimum)
  3. 1.4.11: Non-text Contrast
  4. 1.4.13: Content on Hover or Focus
  5. 2.1.1: Keyboard
  6. 2.4.3: Focus Order
  7. 2.4.4: Link Purpose (In Context)
  8. 2.4.7: Focus Visible
  9. 3.2.4: Consistent Identification
  10. 4.1.2: Name, Role, Value

Passes (19)

  1. 1.3.1: Info and Relationships
  2. 1.3.2: Meaningful Sequence
  3. 1.3.3: Sensory Characteristics
  4. 1.3.4: Orientation
  5. 1.4.1: Use of Color
  6. 1.4.4: Resize text
  7. 1.4.5: Images of Text
  8. 1.4.10: Reflow
  9. 1.4.12: Text Spacing
  10. 2.1.2: No Keyboard Trap
  11. 2.1.4: Character Key Shortcuts
  12. 2.3.1: Three Flashes or Below Threshold
  13. 2.4.6: Headings and Labels
  14. 2.5.2: Pointer Cancellation
  15. 2.5.3: Label in Name
  16. 3.2.1: On Focus
  17. 3.2.2: On Input
  18. 3.3.2: Labels or Instructions
  19. 4.1.1: Parsing

Conclusion

While we found failures of only 10 of the SC, 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 be testing the mobile version of the header.