blog

  • Home
  • blog
  • Managing Heading Levels In Design Systems

Managing Heading Levels In Design Systems

Category: a11y, Design Systems, Link

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 ArticlePermalink

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

LEAVE A REPLY

Comments (3)

  • AutoLike

    October 11, 2018 Reply
    Facebook Autoliker, Autoliker, Working Auto Liker, Status Liker, autolike, auto liker, Photo Auto Liker, Increase Facebook Likes, facebook auto liker, Auto Liker, Facebook Auto Liker, autoliker, Auto Like, Fb Autoliker, Autoliker, Status Auto Liker, auto like, Autoliker Facebook, Facebook Liker, Photo Liker
  • ปั้มไลค์เพจ

    October 12, 2018 Reply
    ปั้มไลค์เพจ, เพิ่มไลค์เพจ, ปั๊มไลค์แฟนเพจ, ปั้มเพจ, ปั๊มไลค์เพจ, เพิ่มไลค์เพจ ราคาถูก, ปั๊มไลค์เพจ facebook, ไลค์เพจ, ปั้มไลค์แฟนเพจ, ปั๊มไลค์เพจ, เพิ่มไลค์แฟนเพจ
  • ปั้มไลค์แฟนเพจ

    October 13, 2018 Reply
    ปั้มไลค์แฟนเพจ, เพิ่มยอดไลค์, รับเพิ่มไลค์แฟนเพจ, เพิ่มไลค์