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.
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:
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.
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.”
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.
Heck yes, keep me updated on what you guys are doing!
Glenda Watson Hyatt
For ten years Glenda has worked with three levels of government, transit authorities and non-profit organizations to increase the accessibility of their websites for people with disabilities. Glenda blogs about various accessibility-related issues, including web and blog accessibility. She does all this by typing with only her left thumb!
Comments
Nice and important post, but how is one to use the heading markup for content other than the main article?
Many websites has e.g. content in a right column that could be excerpts of articles, and in turn has headings. Those headings are the main headings for those articles, so they should be h1, but they are not the main on the page so they should be something lower, but they don’t belong in the main article hierarchy so.. what does one do?
An example of what I mean: http://i47.tinypic.com/biwcaa.jpg
@Phobia
The accepted practice is to use lower headings. As the content is in a sidebar it is by definition “less important” than the main article, since it is assumed the user came to the site for that article and not the sidebar content. Depending on how many levels of headings there are in the sidebar, I use the lowest heading level(s) for my clients. Generally we’ve only ended up using and occasionally
@Ms. Hyatt
Do you see any of these best practices changing as HTML 5 gets increasing usage and screen readers accept the much more semantic language of that version?
@Phobia
Sorry it seems to have stripped out my HTML. Here is what I mean to say: “Generally we’ve only ended up using h6 and occasionally h5.