Summary

Use the ARIA role attribute to provide more information about the structure of a document for users of assistive technologies.

Techniques

Examples

Common semantics
Cover
<body role="doc-cover">
   <img class="cover-img" src="cover.jpg" alt="Cover Image"/>
</body>
Preface
<section role="doc-preface">
   …
</section>
Foreword
<section role="doc-foreword">
   …
</section>
Part
<section role="doc-part">
   …
</section>
Chapter
<section role="doc-chapter">
   …
</section>
Footnote and reference
<p>lorum ipsum.<a role="doc-noteref" href="#fn01">1</a></p>
<aside role="doc-footnote">
   …
</aside>
Endnote and reference
<p>lorum ipsum.<a role="doc-noteref" href="#en01">1</a></p>
<aside role="doc-endnote">
   …
</aside>
Endnotes section
<section role="doc-endnotes">
   <h1>Endnotes</h1>
   
   <section>
     <h2>Chapter 1</h2>
     <ol>
      <li role="doc-endnote">…</li>
      …
     </ol>
   </section>
   …
</section>
Glossary
<dl role="doc-glossary">
   …
</dl>
Bibliography
<section role="doc-bibliography">
   …
</section>
Index
<section role="doc-index">
   …
</section>

Explanation

A limitation of the core HTML markup grammar is that it is not well-suited for identifying common publishing structures because of its small set of elements. There may be hundreds of aside elements in a publication, for example, but reliably distinguishing which ones represent notes from sidebars from warnings and alerts has not been possible.

For sighted users, the deficiency this causes has been masked by the enhanced visual rendering that CSS style sheets afford (backgrounds, borders and shading are used to convey roles visually). For users of assistive technologies — which rely on an understanding of the underlying markup in order to facilitate navigation — Web-based technologies have only had limited accessibility because primary and secondary material was often indistinguishable below the visual surface.

To make publications more accessible, you need to consider that many users will be interacting with the content in non-visual ways, and for that reason the logical reading order must be defined at the markup level. To facilitate this discovery, the ARIA role attribute allows more precise meanings to be applied to the generic tags.

Note

Semantic inflection can only be used to define the nature of structural markup. It is not defined for making associations between your content, a process called semantic enrichment.

EPUB 3

The epub:type attribute was intended to serve a similar function to the ARIA role attribute in EPUB 3, but accessibility support never materialized. The attribute is useful for enabling certain user agent behaviors, such as pop-up footnotes, but should not be used with expectations of enhancing the accessibility of publications.

References