Developing Accessible Web Applcations Headings Sample

Demo

Discussion

The use of heading elements -- H1 to H6 -- is one of the more important semantic HTML components affecting the ability of assistive technology (AT) devices to present the document to the user. Just as users with full visibility make use of visual headings and divisions to quickly scan the document to find what they're searching, and to have an understanding of how the document is structured, semantic headings provide this information to the user of AT. AT devices such as screen readers, for example, create navigable lists of headings. The user listens to the headings, just as a fully sighted user might visually scan them, and then selected one to jump to in the document, just as another user might just visually start at the heading section.

The absence of these semantic headings, such as with the use of span or div elements, instead, leaves the AT user with no clue as to the structure of the document, and with no way to "scan" and jump to sections.

As you can see in the example above, heading elements are fully stylable with CSS. Here, we have changed the font-famly, font-size, color, background-color and border to create an entirely different look from the default MSDN heading template. The use of the semantic headings over more generic elements, comes at no esthetic cost, and can in fact result in HTML that is better performing and more programatically accessible, such as for automated testing.

The semantic HTML heading elements are augmented with the heading role and the aria-level attribute for aria-enabled browsers.

• Semantic HTML:
  • Heading (H1, H2, H3) elements
• WAI-ARIA:
  • heading rrole
  • aria-level attribute

Sample Code

HTML

<h1 role="heading" aria-level="1">Widget Project Proposal</h1>
<h2 role="heading" aria-level="2">Contoso Corporation</h2>
<h3 role="heading" aria-level="3">Project Summary</h3>
<h3 role="heading" aria-level="3">Delivery Schedule</h3>

CSS

div.demo h1 {
  background-color: silver;
  color: gray;
  padding: 0.3em;
}
div.demo h2 {
  text-align: right;
  color: silver;
  background-color: gray;
  padding: 0.3em;
}
div.demo h3 {
  color: black;
  text-transform: uppercase;
  background-color: silver;
  padding: 0.3em;
}