GSA-TTS/all_sorns

a11y: Headings inconsistent & out of semantic order on results page

Closed this issue · 0 comments

iamjolly commented

Description:

Headings on the page are not nested consistently to provide a semantic match with the page's information structure conveyed visually.

  • The first heading level 2 on the page should be the search input's label instead of an h2 element.
  • The h3 for "Refine your search" has h2 elements for "Sections" and "Agencies" which are subordinate to the h3, so they should be h4 or not headings at all (see video below about how screen readers encounter those).
  • The results cards in the main content on the page has an h2 for the result title (good), but then skips h3 and uses h4 for the "FOUND IN" content header. That should be an h3 to reduce potential confusion for some users.

Screenshots:

screenshot of sorns results headings
screenshot of sorns refine results buttons

Screencast/video:

sorns-refine-and-results-headings.mp4

WCAG SC

Success Criterion 1.3.1 Info and Relationships (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Recommended fix(es):

  1. Removing the h2 and using label for the search input field per #129 will resolve the first h2 issue.
  2. Change the h3 for Refine your search to an h2
  3. Replace the h2 with div elements for Sections and Agencies