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>
Filter Web criteria