Look at H2 vs H3 styling

[bryanfriedman]

If that's the case, then I'm a big proponent of fixing the styling, not changing which headers we use because we like the look of one better than the other. Getting the headers and semantic structure of the document right is important for accessibility.

Originally posted by @zmb3 in https://github.com/vmware-tanzu/tanzu-dev-portal/pull/537#discussion_r582324410

[zmb3]

To elaborate, here's a good resource describing the concern: https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility

Skipping heading levels should be avoided (e.g. H1 directly to H3) from an accessibility point of view. People using screen readers often rely on navigating by heading so if the structure isn’t hierarchical they may not understand the relationship.

[BrianMMcClain]

Great point, something I completely overlooked and I really appreciate you pointing it out, as well as the resource you linked to since it's something I want to focus on. Totally agree this is the better route :)

[zmb3]

We might consider adding some accessibility checks to CI, perhaps using this: https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/getting-started.md

A quick local scan caught a few instances of this specific header issue, but uncovered other accessibility issues related to keyboard navigation, background/text contrast, etc.

[BrianMMcClain]

100% agree, I think this would be a wonderful thing to include in our build process. I looked into it a bit this morning, so I added a card to track that work: #632