Update all pages with Hx tags and Title Class for Screen Readers and WCAG Compliance

[smsada]

Overview

Screen readers interpret page structure based on Hx tags which need to be separated from title size tags.

Description

• Use Hx tags in conjunction with Title classes.
  • Hx tags should be used to communicate hierarchical information
  • Title classes are used to control size
• Currently incorrectly implementing Hierachrial tags (H1, H2, etc.)
• Important for screen readers as Hx classes are used for page structure (Headings and Subheadings) while the title class will control the size
• Example of currently incorrect page structure using Hx tags is the Collaborate page

Collaborate page using H4 tag instead of title class tag

Action Items

• Review existing classes to identify if title 1 - 6 have been created
• Consider implementation via Aria Level tags vs Title Classes
• Make issues to revise each page on the website to use the appropriate combination of Hx tags and Title classes
  • Add links to each of those issues to this epic issue

Resources/Instructions

• Issue originally discussed in Expert Interview: Bonnie #1096 in this comment
• Video of original issue at timestamp: 21:30
• Related design issue Build Design System and Site ADA Compliance #12
• Relate article using Aria level

Title Classes screenshot from CTI figma

[smsada]

Close because duplicate of issue #1101