HTML5 & annotations for assistive technology

I was scrounging around in the HTML5 spec on the W3C site looking for something else and found an answer to a question I had asked about earlier on Web Teacher. In the section titled Annotations for assistive technology products (ARIA) I found the answer to my question about aria-level.

A table in the spec detailing the HTML5 language feature with its “strong native semantics and implied ARIA semantics” shows the following for h1 through h6 elements.

Native Semantic Element: h1-h6 element that does not have an hgroup ancestor
Implied ARIA semantics: heading role, with the aria-level property set to the element’s outline depth

So the answer is do include a value for aria-level in headings that are not nested in an hgroup. If the heading is part of an hgroup, include the aria-level attribute in the hgroup element.

The value associated with the aria-level would be dependent on the element’s position in the document outline.  Here’s an example with an hgroup:

<hgroup role="heading" aria-level="2">
<h1>Main heading</h1>
<h2>Subheading</h2>
</hgroup>

Without an hgroup:

<h1 role="heading" aria-level="2">

The entire table at W3C is very useful. I urge you to read the whole section on Annotations for assistive technology products (ARIA).

3 thoughts on “HTML5 & annotations for assistive technology”

    1. Thanks, Laura.

      To summarize the relevant parts of the change proposal Laura mentioned, the suggestion is to replace the Annotations for assistive technology products (ARIA) I was talking about with Use of WAI-ARIA Roles, States and Properties in HTML.

      Among those recommended changes, default ARIA Role and required State and Property mapping for h1-h6 elements and hgroup elements is still to include the heading role, with the aria-level property set to the element’s outline depth.

Leave a Reply