Header sizing accessibility issues

[bruceplai]

Overview

Accessibility tools are flagging possible header sizing issues. h tag values should be sequentially increasing or at least increasing as you dig deeper into a page structure. This is according to various accessibility scanning tools.

Action Items

• Decide (with UI/UX and PM input) if any page header sizing updates should be done
• Update figma header sizes accordingly
• Update any pages to match figma

Resources/Instructions

[chalimar]

Thank you for reviewing, Bruce! I have created a new type scale and hope that it might be applicable to fixing some of these issues.

Will connect with you at the meeting.

[smsada]

Made Duplicate issue from #1150

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

[bruceplai]

1. Progress - Still investigating using aria-level
2. Blockers - none
3. Availability - 2 days
4. ETA - will try by next meeting