ARIA & EPUB
ARIA roles are a key feature of EPUB 3, allowing different types of content to be unambiguously identified to assistive technology. ARIA roles can clarify and refine the semantic elements in your book, giving readers with print disabilities a much better idea of the contents of the ebook. Including them will often clear up violations on the Ace report (an EPUB accessibility checker developed by the DAISY Consortium), bringing your publication much closer to accessibility standards. Everybody wins!
Simply put, reading systems use the epub:type attribute to offer special features and behaviors.[1] The ARIA role attribute, on the other hand, exposes information to assistive technology. It is therefore a best practice to include both epub:type semantics and ARIA roles in any tags that use one or the other. If they are applied correctly, you can never have too many of these unambiguous identifiers.
ARIA is designed to add more semantic meaning to help assistive technology convey structure that is implied by the visual formatting, but that is not clearly expressed by existing HTML elements. In this document/appendix, we will highlight a few common places where ARIA roles are used. Including these in your books will enhance accessibility, and result in more sophisticated ebooks! Care needs to be taken to ensure that roles are only used where they will make sense to users of assistive technology. The below list should help you pick roles that identify particular types of content in meaningful ways.
Sections
Sections refer to distinct components that make up the frontmatter, body, and backmatter of a book, including things like epigraphs, dedications, parts, chapters, bibliographies, indexes, etc. These usually have several paragraphs, such as a chapter, or encompass an entire page, such as a dedication or other kinds of front or back matter. Each component has meaning, but if the meaning is not defined using an ARIA role, it can sometimes be hard to guess. When you apply an EPUB structural semantic and an ARIA role to the tag, however, its meaning becomes crystal clear to E-readers and the people who use them.
The below table shows the various types of content that can be identified within a section tag. For a more comprehensive list with definitions, you can read the official documentation in this link.
| epub:type | ARIA Role |
|---|---|
| epigraph | doc-epigraph |
| dedication | doc-dedication |
| foreword | doc-foreword |
| prologue | doc-prologue |
| introduction | doc-introduction |
| notice | doc-notice |
| preface | doc-preface |
| part | doc-part |
| chapter | doc-chapter |
| conclusion | doc-conclusion |
| epilogue | doc-epilogue |
| afterword | doc-afterword |
| acknowledgments | doc-acknowledgments |
| appendix | doc-appendix |
| qna | doc-qna |
| bibliography | doc-bibliography |
| endnotes | doc-endnotes |
| glossary | doc-glossary |
Example
<section epub:type=”chapter” role=”doc-chapter”>[2]
<h1>The Boy who Lived</h1>
<p>Mr and Mrs Dursley…</p>
</section>
Navigation File
If your navigation file is included in the “spine” (AKA reading order), the nav containers must have an ARIA role applied to them.
The below table shows the navigation lists that can be identified.
| epub:type | ARIA role |
|---|---|
| toc | doc-toc |
| page-list | doc-pagelist |
Example
<nav epub:type=”toc” role=”doc-toc”>
<h1>Table of Contents</h1>
<ol>
<li><a href=”c1.xhtml”>The Boy who Lived</a></li>
…
</ol>
</nav>
Cover Page
Currently, there is no ARIA role for the cover section of a book. It is considered a best practice to apply an epub:type semantic tag of cover to the page, but the role attribute cannot be included. You can apply an aria-label to the section, however, and we’ll show that in our example.
The below table shows the available attributes for the cover page.
| Component | epub:type | ARIA role |
|---|---|---|
| Section | cover | (NOT ASSIGNED – but an aria-label can be used) |
| Image | cover-image | doc-cover |
Example
<section epub:type=”cover” aria-label=”Cover”>
<img src=”cover.jpg” alt=”Cover …” epub:type=”cover-image” role=”doc-cover”/>
</section>
Page Breaks
Page numbers may be the best illustration of the power of ARIA roles yet. Since there is no semantic code for a page break in HTML, assistive technology relies on ARIA roles and labels to tell it when the narrative moves to a new page – and what that page number is.
Page numbers are usually marked with the span tag, though they can appear in just about any element. Whatever you choose to house your page breaks in, make sure they contain these three elements:
- An epub:type semantic of pagebreak
- An ARIA role of doc-pagebreak
- An ARIA label with the new page number
Although not required to meet the EPUB accessibility specification, adding the word “page” before the number can help give it context for tools that read the number but do not identify it as a page break.
Example
<p>…but this time the Vogon captain didn’t shout because it was the door from the galley quarters where the <span epub:type=”pagebreak” id=”page_48″ role=”doc-pagebreak” aria-label=”Page 48″ /> Dentrassis prepared his meals. …</p>
Notes
Whether your content uses footnotes or endnotes, the general layout is the same. A small number appears next to an important sentence in the text. When clicked, this link takes the reader to a list of notes, with the applicable one highlighted. At the end of the note is another link, which navigates back to the reader’s place in the book.
The difference between the ARIA markup for footnotes and endnotes is that a footnote is contained in an <aside> element within the body of a section, and an endnote is contained in an ordered list of notes at the end of a section.
Here’s how to apply semantic meaning to each of those components.
| Component | epub:type | Role |
|---|---|---|
| Link to Note | noteref | doc-noteref |
| Text of Footnote | footnote | doc-footnote |
Examples
Endnote Example
<section epub:type=”chapter” role=”doc-chapter”>
<h1>1. The Greatest Story Ever Told</h1>
<p>Einstein’s general theory of relativity, put forth in 1916, gives us our modern understanding of gravity, in which the presence of matter and energy curves the fabric of space and time surrounding it.<a href=”#fn1″ id=”fnref1″ epub:type=”noteref” role=”doc-noteref”>1</a></p>
…
</section>
<section epub:type=”endnotes” role=”doc-endnotes”>
<ol>
<li id=”fn1″ epub:type=”endnote”><p>1. Astrophysics for People in a Hurry. Neil Degrasse Tyson, W. W. Norton and Company, 2017. <a href=”#fnref1″ epub:type=”referrer” role=”doc-backlink”>Back to Text</a></p></li>
</ol>
</section>
Footnote Example
<p>The radio announcer called Cinnamon buns <a href=”#fn1″ id=”fnref1″ epub:type=”noteref” role=”doc-noteref”>1</a> into the microphone.</p>
<aside id=”fn1″ epub:type=”footnote” role=”doc-footnote” >
<p>1 Many audio enthusiasts use the phrase cinnamon buns to check the quality of a recording. <a href=”#fnref1″ epub:type=”referrer” role=”doc-backlink”>Back to Text</a></p>
</aside>
Sidebars
Labelling sidebars is recommended, and is especially important if there is more than one aside tag within a document. Use an <aside> tag with an aria-label or aria-labelledby attribute, similar to the structure for a section label.
Example
<aside aria-label=”About Cicero”>
<p>It’s difficult to know where to put Cicero, so let’s give him a box of his own…</p>
</aside>
Landmarks and ARIA Labels
Many section roles also create ARIA landmarks when they are included.[4] An ARIA landmark is an important section of a page that a user may wish to navigate to easily, as assistive technology commonly allows users to navigate using these landmarks. For example, when supported by a screen reader, a user can move to the next or previous landmark, or past the text inside the current landmark. This can be helpful to skip past text contained in a sidebar, for instance.[5]
Although not required, adding labels to landmark roles will allow assistive technology to identify the landmark with a more descriptive label, such as the name of a chapter, instead of as a generic landmark. This label can either refer to the text of an element in the document (“aria-labelledby”), or be added text that is not part of the document (“aria-label”).
The aria-labelledby attribute is used to refer to an element id when referring to text in the document, and aria-label is used when adding text that is not associated with an element. For a chapter marked with role=”doc-chapter” that has a heading contained in an <h1> tag, using aria-labelledby with the id of this heading causes the text of the heading to be used as the label.
For a section without a heading, such as a dedication page, aria-label=”Dedication” can be used to indicate the purpose of the section. If a section such as a chapter is split across more than one file, only the first one should have a role and label (this is uncommon, but not unheard of!).
Roles which can benefit from having labels are those which correspond to a section of the book such as a copyright page in the front matter, a chapter, or a sidebar marked up using an aside tag. For page numbers with the role of doc-pagebreak, an aria-label attribute should contain the page number.
How do screen readers interact with landmarks?
When a screen reader indicates a landmark such as a section, it will include the aria-label or aria-labelledby element in its description of the landmark. The landmark may also be indicated when crossing its end boundary. Having a section labelled is particularly helpful in this situation since the heading used as the label is at the beginning, and users do not need to skip back to it to find out what section they are reading if they move backwards into the section.
Support for this type of markup varies between different assistive technology and reading systems. Following the published standards and best practices will help to ensure that the structure is available to be used by tools that support it today, and hopefully by more in future if support improves.
ARIA Landmarks vs. Landmarks in the navigation file
Although they are named similarly, the landmarks nav element that is part of the navigation file is not at all related to ARIA landmarks. The Accessible Publishing Knowledge Base page on nav landmarks has more information about them.
Example
ARIA Landmark using aria-labelledby on a section element
<section epub:type=”chapter” role=”doc-chapter” aria-labelledby=”hd1″>
<h1 id=”hd1″>The Boy who Lived</h1>
<p>Mr and Mrs Dursley…</p>
</section>
ARIA Landmark using aria-label on a section element
This example is for a chapter that does not have a heading or title
<body>
<section epub:type=”chapter” role=”doc-chapter” aria-label=”Chapter 3″>
<p>In the times when they were…</p>
</section>
</body>
ARIA Labels in page numbering
<p>…but this time the Vogon captain didn’t shout because it was the door from the galley quarters where the <span epub:type=”pagebreak” id=”page_48″ role=”doc-pagebreak” aria-label=”Page 48″ /> Dentrassis prepared his meals. …</p>
[1] At this point, reading system support for epub:type semantics has been mainly for pop-up footnotes. However, including epub:type attributes where appropriate will mean the markup is available if more support is added in future.
[2] An ‘aria-labelledby’ attribute could also be added here, as they are often recommended on section elements. See below for a full discussion of ARIA landmarks, the aria-label, and aria-labelledby attributes.
[4] ARIA landmarks are not to be confused with landmarks navigation that is often included in the navigation file of EPUB 3 books. “ARIA landmarks are dynamically compiled by an assistive technology for the current page a user is on. Landmarks navigation, on the other hand, is a static list of locations that allows sections across a multi-document publication to be listed.” DAISY KB Landmarks
[5] To see a list of the ARIA roles that create ARIA landmarks, review the list provided on the Landmarks page in the DAISY Knowledge Base, under “Explanation”.