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:
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.