EPUB 3 Accessibility Guidelines

Headings

Headings remain one of the primary means of navigation for users of assistive technologies. Without widespread support for the HTML5 outline algorithm, and with the algorithm at risk of removal from HTML5, headings should be treated as the primary indicator of the structural outline of your content within each content document.

Each section should have a numbered heading (e.g., h1) that reflects its level in the document hierarchy, as numbered headings allow assistive technologies, regardless of their support for HTML5, to navigate the document structure.

Only a single heading should be included in a section. If you need to include subheadings, it is best to incorporate them into the main heading or include them in subsequent paragraphs using a header tag to encapsulate (Example 2 shows both usage examples).

If a section does not have a heading, consider including a title or aria-label attribute on the section with the implied nature (e.g., 'chapter' or 'part'). Although it is anticipated that assistive technologies will be able to voice/render the epub:type semantics in such cases, a fallback attribute is prudent at this time. (Note that the title attribute may present a visible tooltip in contexts where the content can be hovered (e.g., by a mouse), whereas aria-label will not.)

Note

It is not recommended that heading elements be used within figure, blockquote and other HTML5 sectioning root elements at this time. Although these headings are technically exempt from the document outline, with only minimal support for the outline algorithm they will be treated as structural headings by assistive technologies, impeding progress through a document.

Examples

Example 1 — Numbered headings
<section epub:type="division">
  <h1>Book One: 1805</h1>
      <section epub:type="chapter">
         <h2>Chapter 1</h2>
Example 2 — Headings and Subtitles

Combined

<section epub:type="chapter">
   <h1><span epub:type="title">ORIGIN OF THE WORLD.—FIRST DYNASTY.</span>
   <span epub:type="subtitle">URANUS AND GÆA. (Cœlus and Terra.)</span></h1>

Using header

<section epub:type="chapter">
   <header>
      <h1>ORIGIN OF THE WORLD.—FIRST DYNASTY.</h1>
      <p epub:type="subtitle">URANUS AND GÆA. (Cœlus and Terra.)</p>
   </header>
Example 3 — Headingless sections

title attribute

<section epub:type="preamble" title="preamble">
   <p>
      How these papers have been placed in sequence 
      will be made manifest in the reading of them.
      …
   </p>
</section>

aria-label attribute

<section epub:type="preamble" aria-label="preamble">

Compliance References and Standards

Additional Resources

Frequently Asked Questions

Why not use generic h1 headings?

Not all assistive technologies handle HTML5's new allowance that a section can begin anew with an h1 heading. It is best to avoid the problems this will cause until it is clearer whether the document outline algorithm will remain a part of HTML5 and what devices support it.

Why not use hgroup for multiple headings?

The hgroup element has been removed from HTML 5.0. Its future is uncertain.

Revision History

2014-01-21
  • Fixed closing tags in header example and missing aria-label attribute.
2013-11-25
  • Updated to reflect latest HTML5 best practices for subheadings.
2013-05-28
  • Noted that hgroup has been removed from HTML 5.0.
2013-03-21
  • Added aria-label as alternative to title.
2013-01-01
  • Added advisory note not to use headings in sectioning root elements at this time.
2012-11-15
  • Revised to remove any guidance to use the outlining algorithm and hgroup, as both at risk of removal from HTML5