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

civictechindex / CTI-website-frontend

Join a worldwide movement to catalog  every open source  civic tech project.

https://civictechindex.org

MIT License

30 stars 30 forks source link

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

Closed smsada closed 2 years ago

smsada commented 2 years ago

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

![image](https://user-images.githubusercontent.com/38507899/153289249-83961f3c-6271-42a5-b470-0ca4d4bdcdf1.png)

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 #1096 in this comment
Video of original issue at timestamp: 21:30
Related design issue #12
Relate article using Aria level

Title Classes screenshot from CTI figma

![image](https://user-images.githubusercontent.com/34084181/104667610-4ac80f00-568b-11eb-99eb-a6b9decd80c6.png)

smsada commented 2 years ago

Close because duplicate of issue #1101