Filter - Web accessibility testing checklist

How to test a filter

Gherkin Condensed

Given that I am on a screen with a filter

1 Keyboard only

WHEN I use the tab key to move focus to controls inside the filter I SEE focus is strongly visually indicated
Then when I use the focused control I SEE quantity and type of results updates

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to move focus to controls inside the filter
- I HEAR each control's purpose is clear
- I HEAR each control uses an appropriate role
- I HEAR each control expresses its state
- I HEAR sets of similar controls (like radio buttons) have a group name
Then when I use the focused control I HEAR quantity and type of results updates

3 Mobile screenreader

WHEN I use a screenreader AND I swipe to focus on controls inside the filter
- I HEAR each control's purpose is clear
- I HEAR each control uses an appropriate role
- I HEAR each control expresses its state
- I HEAR sets of similar controls (like radio buttons) have a group name
Then when I doubletap with controls in focus I HEAR quantity and type of results updates

1 Keyboard & screen reader actions

When I use	I see/hear
Tab	Focus moves visibly to the controls inside the filter
Controls	Quantity and type of results updates

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves to the controls inside the filter
Doubletap	Quantity and type of results updates

3 Screenreader output

Reads	I hear
Name	Each control's purpose is clear
Role	Each control uses an appropriate role
State	Each control expresses its state
Group	Sets of similar controls (like radio buttons) have a group name

Code example

Do not apply aria-live the entire contents of the results (unless the returned information is always brief)
Do not move focus to the search results
Results use an unordered list <ul><li>, reinforcing the number and structure of results for people using a screen reader
The results summary uses aria-live="polite" and aria-atomic="true" to announce the entire summary on changes

<div class="filter-container">
  <form id="categoryForm" aria-label="Filter Web criteria">
    <fieldset>
      <legend>
        Filter Web criteria
      </legend>
    
      <input type="radio"
        name="category"
        value="header"
        id="header" checked>
      <label for="header">Header</label>

      <input type="radio"
        name="category" 
        value="nav"
        id="navigation">
      <label for="navigation">Nav</label>

      <input type="radio"
        name="category"
        value="main"
        id="main">
      <label for="main">Main</label>

      <input type="radio"
        name="category" 
        value="footer"
        id="footer">
      <label for="footer">Footer</label>
    </fieldset>
  </form>
  
  <div class="filter-results">
    <div aria-live="polite" aria-atomic="true">
      <h3 id="resultsCount">
        <!-- Results summary injected here -->
      </h3>
    </div>
    <ul id="results">
      <!-- Results injected here -->
    </ul>
  </div>
</div>

Web Filter

How to test a filter

1 Keyboard only

2 Desktop screenreader

3 Mobile screenreader

1 Keyboard & screen reader actions

2 Mobile screenreader gestures

3 Screenreader output

Code example