DEV Community

PSA: Stop Hard-Coding Heading Levels in Your React Components

Suzanne Aitchison on September 23, 2019

(This post was originally posted on Up Your A11y - Heading Levels in Reusable Components) Reusability is Key One of the key reasons Rea...
Read full post
Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 •

This is less about react and more about html in general. I am an advocate of accessibility best practices which are really just best practices in general. But there is one thing I dont ever remember, how do I actually use heading levels, do I need 5 of them, can I use h1 and skip to h3. And so on.

Collapse
 
s_aitchison profile image
Suzanne Aitchison •

I think it's something we lose sight of so easily - e.g. if the design we've been handed doesn't look like it has very distinct heading levels. I really like WebAIMs section on this in terms of semantic content.

The tl;dr of it is every page should have a single <h1> element - the main heading of the page (which describes not just to the user but also to search engines what the page is about). Beyond that heading levels should only ever increase by one, and usually appear nested in sections (by which I just mean parts of the page - I've used section below but it could be div or anything) e.g.

<main>
  <h1>This the main heading of my page!</h1>
  ...
  <section>
    <h2>Section title</h2>
    <p>Some content....</p>
    <h3>Some other less-important content title inside section</h3>
    <p>Some other minor content</p>
  </section>
  <section>
    <h2>Another Section Title</h2>
     ...
  </section>
</main>
Enter fullscreen mode Exit fullscreen mode

I think the key is we have to get away from thinking of heading tags as a visual style feature, and understand it's about the core structure of the page - just like any other semantic element.

Once we start to appreciate h1/h2 and so on as 'importance order of title' rather than "make it look X size" then it becomes a bit clearer (or at least to me it does!)

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 •

Your last point about size, I often wonder if browsers shipped all heading levels at the same size that would provoke more thought into thier usage. As a beginner you are taught a misnomer that headings denotes size, then frameworks basically affirm this.

Thread Thread
 
s_aitchison profile image
Suzanne Aitchison •

That's so true! I guess then I wonder if people would give up on header tags completely in many cases and just style spans or p tags.

At least some headers are better than none! 😁

Thread Thread
 
adam_cyclones profile image
Adam Crockett 🌀 •

I guess it's like the italic tag, it's NOT an icon people!

Thread Thread
 
s_aitchison profile image
Suzanne Aitchison •

We try hard but there's only so much space in our brains 😂