Bug: Different heading levels used for styling purposes instead of semantically on the home page

[milofultz]

Bug Description:

Heading levels are used in ways to affect their styling and not being used semantically. This leads to poor experiences for users of assistive technologies. See MDN's notes on navigation using headings.

---

Reproduction Steps:

1. Go to the home page and turn on your screen reader (Voiceover, in this instance). 2. Go to the list of headings (using the rotor in Voiceover) 3. Note that they are not linear (e.g. 2, 5, 2, 5; instead of 2, 3, 2, 3)

What should be expected is a linear tree of heading levels. Each child should be a direct descendant of the parent (e.g. an <h2> element can only have succeeding <h3>s as direct children).

Screenshots (If applicable):

Screenshots are from this extension.

Possible Solution (optional):

Use CSS to style elements using something like a class name or the tag name itself (for example, .subheader or applied directly to h2) and modify this based on zoom level, width of browser, etc.

This would likely mean we need to decouple our styling from the MUI Typography component. Unsure how this is done, but I see the sx prop.

Thinking it would probably make sense to either make components that are styled correctly that we can then apply a heading level to, or something of that nature, to make a more modular and more easily maintained structure (if these styles are only used in small parts of the app, I don't want to go full design system and build out unnecessary infra).

[timbot1789]

Nice catch. You're right that we can override any MUI styles with the sx property. If that's not sufficient to fix the accessibility issues, we may want to take a look at base-ui, which advertises itself as an accessible library.

It looks like, at least for the home screen, the issue is with our own styles. We're hard-coding the h2 and h5 values. We can switch those over to more semantic ones pretty easily, and move font sizes to visual CSS styles.

[xscottxbrownx]

@milofultz - I completely understand the semantic linear idea, but what I have confusion on is where do you have to start?

Do you always have to start with <h1>?

Answers to this and I can get started on this issue.

---

@timbot1789 as well,

MUI makes it much easier to do what we want to do here.

If you want the text to look stylistically like an h1, but need it to be an h2 semantically:

<Typography variant="h1" component="h2">
  h1. Heading
</Typography>

[milofultz]

@milofultz - I completely understand the semantic linear idea, but what I have confusion on is where do you have to start?

Do you always have to start with <h1>?

Answers to this and I can get started on this issue.

You usually only want a single h1 on the page. From MDN:

While using multiple <h1> elements on one page is allowed by the HTML standard (as long as they are not nested), this is not considered a best practice. A page should generally have a single <h1> element that describes the content of the page (similar to the document's