In his review of New York City’s website, the esteemed web accessibility expert Jim Thatcher docked the site points for not having headings, which assist readers in navigating the content. WebAIM’s Screen Reader User Survey found that headings are the primary mechanism for finding information within a page. A good heading structure is an essential element of web accessibility and usability.
Why are headings important?
Think back to elementary school when you were learning how to write reports. No doubt you were strongly encouraged to start with an outline: a hierarchy of headings and subheadings indicating topics to be covered. These headings formed the report’s structure, which assisted the reader in understanding how the chunks of information related to one another.
The same applies to online content or webpages. Using headings offer these benefits:
- They provide readers with cues as to how the information is organized and structured.
- They highlight key points, enabling readers to find specific information quicker.
- They make reading easier by breaking up long chunks of text.
- They can aid in search engine optimization.
How to indicate headings?
HTML markup allows for six levels of headings – <h1>, <h2>…<h6> – with <h1> the most important and <h6> the least. Using heading markup, rather than bolding or underlining text to indicate headings, enable site visitors using assistive technology, such as screen readers, to understand the hierarchy of the information.
Headings should reflect the logical structure of the information and should be nested sequentially; for example:
<h1>Heading 1<h1>
<h2>Heading 2<h2>
<h3>Heading 3<h3>
<h3>Heading 3<h3>
<h2>Heading 2<h2>
Heading markup should not to be used to add emphasis or to change the font size. Rather, the style sheet (CSS) should be used to control the appearance or presentation – font size, color, spacing, etc. – of text, including headings.
How to check a page’s headings?
Use the the Firefox browser, WebAIM’s Web Accessibility Evaluation (WAVE) toolbar is a must-have for quickly checking accessibility, including what, if any, headings exist and whether the heading levels are correctly ordered.
Alternatively, a website address can be entered on the WAVE homepage, which then “shows the original web page with embedded icons and indicators that reveal the accessibility of that page.”
What is the bottom line?
Although the wording of headings and determining their most logical order can be subjective, the key is to use HTML markup (h1, h2, h3…) to indicate headings and to correctly nest them. When used correctly, headings give a webpage structure and improve page navigation.
I’ll have to check out that toolbar…looks pretty useful.
Excellent post, Michael. The WAVE toolbar is great. I’ve already used it to find and fix issues in some website updates I’m working on. Question: outside the general H1 is for most important, H6 for least important, do you know if there are any guides or standards that show how heading numbers are applied to actual websites? For example, are sidebar links H2 or H3 or something else? Are links to social media in a footer H6? Or are we into subjective “art” at this point? Perhaps I’m over analyzing.
Steve C
Hi Steve,
I couldn’t find any general accepted “best practices” on that, so it is a “subjective art” indeed.
My opinion is that the priority of the content on the page should lead you to decide which gets the H1, H2 etc.
Regards,
Michael