Screen readers and other assistive technologies use headings to provide an outline of the page. There are keyboard shortcuts in screen readers that allow users to hear a list of all the headings on the page and then quickly jump to that specific section. In NVDA, for example, you can press the 2 key and have all H2s on the page read out to you. If the web page doesn\u2019t use any H2s and has skipped them but has H4s or H6s instead, a person might think there are no headings on the page or may not be able to get the information that they need fast enough.<\/p>\n\n\n\n
Additionally, the heading numbers are read out as a user goes down the page, and hearing the heading order can help augment their understanding of the content. The Admin Bar home page is a great example of this. There is one heading one that describes the purpose of the web page, then there is an events section with three event callouts, followed by a podcast section with three podcast episodes, followed by a callout section for the Website Owner\u2019s Manual.<\/p>\n\n\n\n This is the structure of that portion of the page:<\/p>\n\n\n\n What stands out to me here is that if you just heard the names of the events or the podcast episodes, you would have no idea if one was a podcast episode or an event. \u201cNew TAB Site Teardown\u201d or \u201cScaling Your Agency\u201d could just as easily be either an event or a podcast episode. For that matter, \u201cSell More Care Plans\u201d could also be the name of an event or a podcast episode.<\/p>\n\n\n\n If you can\u2019t see the section layout, the only way you know that these are different sections is if you hear the heading numbers read out to you. When hearing \u201cHeading level two. The Podcast,\u201d it provides important context to what follows. And likewise, when you hear \u201cHeading level two. Sell more care plans\u201d after hearing a list of H3s, you instantly know that you\u2019re in a different section and no longer hearing podcast titles.<\/p>\n\n\n\n (Side note shout out to Kyle for putting that podcast H2 above the podcast episodes in the HTML so that it reads out in the correct order even though it\u2019s visually on the right. \ud83d\ude4c)<\/p>\n\n\n\n If something doesn\u2019t have any sub-content below it, then it\u2019s not a heading. This would include blog post titles in a list of posts without an excerpt or large accent text.<\/p>\n\n\n\n Because us headings to jump to sections, it is really frustrating to jump to a heading expecting more below it and then get nothing – or just another heading.<\/p>\n\n\n\n Likewise, the small accent text that designers like to put above the large headings? It\u2019s probably not a heading at all and should be wrapped in a <p> tag and styled with a class. Or, in other cases, that tiny text is actually more meaningful and should be the H2 which the large text below it should actually not be a heading at all.<\/p>\n\n\n\n![\"A](\"https:\/\/theadminbar.com\/wp-content\/uploads\/2023\/01\/HeadingsMap-chrome-plugin-showing-the-headings-on-the-TAB-home-page.webp "\\"HeadingsMap-chrome-plugin-showing-the-headings-on-the-TAB-home-page\\"")
<\/picture><\/figure>\n\n\n\n\n
\n
\n
\n
Make Fewer Things Headings for the Win<\/strong><\/h2>\n\n\n\n
How to Check Heading Level<\/strong><\/h2>\n\n\n\n