Page Content
Many HTML tags were developed to provide information on the structural hierarchy of a document rather than providing formatting. In order to facilitate accessibility and Web standards, it is best to use the tags for their intended purpose in the information hierarchy, rather than for pure formatting purposes. In many cases, doing so will also make your document easier to edit.
Purpose of Headings
For documents longer than 3 or 4 paragraphs, headings and subheadings are an important usability and accessibility strategy to help readers both determine the overall outline of the document, and navigate to specific information on the page.
Heading Levels
Headings are classified into levels starting at Level 1 and working through Level 2, Level 3, down to Level 6. By general convention, the highest level is “Level 1” and often corresponds to the title of the page or major document section. Level 2 is the next set of subheaders with a Level 1 section, and Level 3 are sub-subheaders within a Level 2 section. The lower the number, the smaller and more detailed a section.
Headings: Semantic vs. Formatted
Sighted readers can identify heading by visually scanning pages for larger text. Blind users using screen reading software are not able to see the visual formatting, so increasing the font size is not a sufficient cue.
Instead, the headings must be semantically “tagged” so that a screen reader can both identify headings when reading a page, or pull up a list of all page the page headings (see image below).
The list of headings and heading levels for http://accessibility.psu.edu as shown in the VoiceOver screen reader.
This makes adding headings one of the most important ways a screen reader user can use to know what is on the page. Note that tagging usually triggers a formatting change visually, which can be adjusted in many documents.
See the list below for an example of how different tools add semantic headers to a document.
Examples of Heading Tags
- Microsoft Word uses “Heading 1, Heading 2, Heading 3…” styles to add semantic headers. Formats for each can be adjusted in the Styles menu in Word.
- HTML (Web pages) uses the H1, H2, H3…H6 tags as headers. Formats can be adjusted with CSS styles.
- Web based editing tools (e.g. Canvas’s Rich Content Editor or Wikispaces) often include H1…H6 as options in a format or style menu (although the highest page level heading is H2 in Canvas because H1 is reserved for the page title.
To learn how to add headers in a specific document, please see the list of links in Related Links. In any case, what is most important is to avoid increasing font size or changing colors as the only way to designate a heading.
WCAG 2.0 Guidelines
The following WCAG guidelines can be addressed with headers.
- WCAG 2.0 Guideline 2.4.6—”Headings and labels describe topic or purpose.”