Managing Heading Levels In Design Systems

Celý článek

Heydon Pickering looks into how to give a React component a certain heading (like <h1>, <h2>, etc.) depending on its context and thereby ensure that the DOM is still perfectly accessible for screen readers. Why is using the right heading important though? Heydon writes in the intro:

One thing that keeps coming back to me, in research, testing, and everyday conversation with colleagues and friends, is just how important headings are. For screen reader users, headings describe the relationships between sections and subsections and — where used correctly — provide both an outline and a means of navigation. Headings are infrastructure.

This reminds me of an excellent post by Amelia Bellamy-Royds where she explored all the problems caused by this “Document Outline Dilemma” or, say, a <h1> following a <h3>:

As it currently stands, the document outline is only of daily importance to screen-reader users, and those users are currently used to dealing with the mess of erratic heading levels in web pages. I'm sure many screen-reader users would appreciate heading levels being fixed. But fixing headings for screen-reader users doesn't just mean creating a tree of neatly nested headings with no skipped level numbers. It means creating a heading structure that accurately reflects the meaning intended by the creators of the web page, the meaning that visual users infer from style and layout. And in order to do that, we need to consider how meaning is communicated to all the users of web pages who aren't hearing each heading announced with a numerical level.

It’s remarkable to me that simple ol’ headings require so much attention, both in dealing with the usability concerns and the potential development workarounds.

Direct Link to Article — Permalink

The post Managing Heading Levels In Design Systems appeared first on CSS-Tricks.