Headings to Show Hierarchical Relationships of Content in Tribute Page Example

Hello, I was just wondering in reference to the “Use Headings to Show Hierarchical Relationships of Content” lesson, I noticed something in the Tribute Page codepen. The HTML code goes from h1 to h3 with no h2 in between and I was wondering if that was counter to the lesson of having the headings come hierarchal for screen reader accessibility, or if I’m not fully understanding this concept. :slight_smile:

You are correct about the concept, it is a good practice to use headings hierarchically, but not all webpages follow best practices at all times. In theory, if you want an <h2></h2> that is the same text size as <h3></h3> the best practice is to include it as an h2 element and resize it using CSS. In the wild west of the web, a lot of pages do not do that. Using a good hierarchy makes your page more accessible but also makes your page have better SEO, which makes it easier for search engines like Google to crawl through your page, and makes it more likely for your page to be discoverable across the web. Good eye for the concepts taught in lessons!

1 Like

Most accessibility experts agree that you should not skip levels and thus those <h3>s should be <h2>s. Notice I said “should”. This is referred to as an accessibility best practice. Because technically this is not a violation of the Web Content Accessibility Guidelines (WCAG) and thus it is not technically an accessibility fail. The following link is probably the best article you will find that explains all the nuances with headings as far as accessibility is concerned.

Heading off confusion: When do headings fail WCAG?

But yes, in order to be considerate to screen reader users, you shouldn’t skip levels.

1 Like

Appreciate you taking the time to reply. :slight_smile:

1 Like

Awesome, Thank you for taking the time to reply, and add that reference information as well. :slight_smile: