Adding ARIA Landmarks

Including ARIA landmarks in a web page can greatly ease navigation for end users requiring assistive technology such as screen readers (see Using ARIA landmarks to identify regions of a page). This article provides generic guidelines for adding ARIA landmarks in a typical search page.

JavaScript Search Framework Accessibility Landmarks Guidelines

To add ARIA landmarks in a typical search page

  1. In your search interface, define the top-level landmarks shown in the following table by adding the suggested role and aria-label attributes to the appropriate HTML elements:
    role aria-label Component(s)
    navigation Tabs All Tab
    search N/A SearchBox
    main N/A All components below SearchBox
    <div class='coveo-tab-section' role='navigation' aria-label='Tabs'>
      <!-- CoveoTab components -->
    </div>
    <div class='coveo-search-section'>
      <!-- ... -->
      <div class='CoveoSearchbox' role='search'></div>
      <!-- ... -->
    </div>
    <div class='coveo-main-section' role='main'>
      <!-- ... -->
    </div>
    
  2. Under the previously defined main top-level landmark, define the following nested landmarks:
    role aria-label Component(s)
    navigation Facets All Facet
    navigation Breadcrumbs Breadcrumb
    navigation Sort criteria All Sort
    region Result list All ResultList
    navigation Page selector Pager
    navigation Results per page ResultsPerPage
    <!-- ... -->
    <div class='coveo-main-section' role='main'>
      <div class='coveo-facet-column' role='navigation' aria-label='Facets'>
        <!-- Facet components (e.g., CoveoFacet, CoveoCategoryFacet, etc.) -->
      </div>
      <!-- ... -->
      <div class='CoveoBreadcrumbs' role='navigation' aria-label='Breadcrumbs'></div>
      <!-- ... -->
      <div class='coveo-results-header'>
        <!-- ... -->
        <div class='coveo-sort-section' role='navigation' aria-label='Sort criteria'>
          <!-- CoveoSort components -->
        </div>
      </div>
      <!-- ... -->
      <div role='region' aria-label='Result list'>
        <!-- CoveoResultList components -->
      </div>
      <div class='CoveoPager' role='navigation' aria-label='Page selector'></div>
      <div class='CoveoResultsPerPage' role='navigation' aria-label='Results per page'></div>
      <!-- ... -->
    </div>
    <!-- ... -->