Accessible headings

[mkrause]

Currently, we have six heading components H1 through H6 which render the corresponding h1 through h6 HTML elements. Per accessibility standards, these should form a proper hierarchy on the page, so that we start at h1 and go down one level at a time, never skipping a level.

This is very hard to enforce however. For one, designs often do not follow this rule visually. Headings may suddenly skip to a small heading for aesthetics even if there are no corresponding parent section with level = level - 1. But also, as a React design system, we have very little control over the page structure, so what level do we use in a given component if we don't know how deep we are in the document tree?

One possible solution that's sometimes been discussed is just always using <h1> elements. But as [1] explains, this is not correct as per the HTML nor WCAG standards.

It would be nice if we can separate the concerns of what a heading looks like visually vs. the correct heading level. Maybe we could use a React context that keeps track of the current nesting level, and then rendering the correct <hN> tag while still rendering the heading visually as per what the app requires. Something like react-headings.

References:

• [1] https://www.a11yproject.com/posts/how-to-accessible-heading-structure/