EPUB Semantics, ARIA Roles, & Metadata

version française


Introduction

Most creators who are interested in accessible publications are familiar with the World Wide Web Consortium’s “Web Content Accessibility Guidelines“, (the W3C’s WCAG). Although the guidelines are developed for web content, they are also applicable to other forms of digital content – like ebooks – and provide the most basic standard that ebooks should conform to. In its simplest form, WCAG outlines four requirements for all content:

  1. Perceivable: Users must be able to read all information, including any content that is presented visually.
  2. Operable: Readers must be able to navigate and find content, which is accomplished through carefully-chosen semantic tags.
  3. Understandable: Content must be readable and understandable, so ebooks should operate in similar ways across a variety of platforms.
  4. Robust: Content must be interpreted reliably by E-readers and assistive technology, so semantic tags and ARIA roles should be used to accurately define its elements.

Although WCAG is hardly the gold standard for ebook accessibility compliance, it gives us a good springboard into the arena.

First, we’ll look at some semantic tags you can use to refine your styles, in order to satisfy WCAG’s “Operable” principle. Then, we’ll dive into ARIA roles, to make your content more robust. We’ll close with a quick overview of accessibility metadata, so you can promote your awesome content to readers who will benefit most from its newfound accessibility.

Styles

Styles greatly increase the visual appeal of your book, giving it a finished, polished look. Perhaps more importantly, styles are used to set blocks of text apart from the main narrative. Whether it’s the name of a magazine that belongs in italics, or a heading to introduce Chapter Three, the styles you choose will help readers understand and follow the content.

Readers with print disabilities rely on styles, too. But instead of taking cues from slanted letters or large text, assistive technology determines content changes based on the tag that achieves the visual effect. On an accessible stage, therefore, the style’s tag is just as important as its visual appearance.

The first step in styling text the accessible way is to pick tags from the below list, whenever possible. Attach these tags to the styles in your publication, and let them do the heavy lifting of styling your content. Every style in your book that fits into one of these categories should be achieved by using one of these tags. If it is a heading, tag it with <h1> or similar. If it is a block quote, ensure it is tagged with <blockquote>. These simple tags are all assistive technology needs to tell non-traditional readers about important changes in the style of your content.

Sections

The different parts of your book should live inside their own section tags. This gives separation and structure to your content. In addition, each section tag can be qualified with epub:type semantics and ARIA roles, to tell E-readers and assistive technology what the content is. Please see the “Sections” area in the ARIA roles document for an example of this.

Any text containers that house large blocks of text (such as a chapter or section) should have the section tag applied to them.

Example

<section> [This is the opening section tag for “Part One”]
<h1>Part One: The Early Years</h1>


<section>[This is the opening section tag for “Chapter One”]
<h2>Chapter One: When I was Born</h2>

</section>[This is the closing section tag for “Chapter One”]

<section>[This is the opening section tag for “Chapter Two”]
<h2>Chapter Two: Kindergarten</h2

</section>[This is the closing section tag for “Chapter Two”]

</section>[This is the closing section tag for “Part One”]

In this example, the book has parts and chapters. Part One, as well as each of the two chapters, are within their own set of section tags.

Headings

As seen in the example above, each section in your book should be introduced with a heading. This allows screen readers to pause between sections, and offers another way for readers to navigate through your book.

Section titles must be tagged with the appropriate heading number. Top-level sections should be tagged with <h1>, child sections with <h2>, and so on.

Example

<section>
<h1>Part One: The Early Years</h1>
<p>Welcome to Chapter One.</p>

</section>

Bold and Italic

The traditional tags of bold and italic (<b> and <i>)are ignored by screen readers, so should only be used to visually style words and phrases.

Bold can be used to make text stand out, for example, it might be used to indicate technical terms or keywords. Italic is a good choice for important names and magazine titles. Since these examples do not need to be vocally stressed, they can be tagged with <b> or <i>.

Example

In these two examples, there is no need to vocally stress the stylized text:

The <i>Red October</i> moved under her own power towards the main ship channel of the Kola Fjord.

The <b>oxalis triangularis</b> plant is commonly referred to as false shamrock.

Emphasis and Strong

The tags of emphasis and strong (<em> and <strong>) indicate words that should be vocally emphasized in some way.

“Italic” emphasis should be achieved with the <em> tag, and “bold” emphasis with <strong>. Never use these tags on words that require only a visual style (e.g., titles of books, magazines, etc.), use bold <b> or italic <i> for such passages.

Example

In these two examples, the stylized text needs to be said with vocal stress in order to accurately convey the meaning to the reader.

I <em>told</em> you the door was green.

The fallen sign had a stern warning: <strong>Do Not Enter!</strong>

Figures

Images with captions are semantically referred to as figures. The <figure> tag prevents content from disrupting the main narrative, and ensures the caption is associated with the image and its text description.

Each figure in your book should be encased in the <figure> tag. Additionally, the caption should be wrapped in <figcaption> tags.

Example

<figure>
<img src=”figure1.jpg” alt=”Two men in suits shake hands”>
<figcaption><p>Canada’s Prime Minister Justin Trudeau and former U.S. President Barack Obama shake hands at the end of a bilateral meeting at the Asia-Pacific Economic Cooperation summit on November 20, 2016 in Lima, Peru.</p></figcaption>
</figure>

Sidebars

Sidebars can provide anecdotal information that is loosely related to the main section. If not coded properly, however, these little tidbits can be both confusing and distracting for non-traditional readers.

Sidebars should be wrapped in the <aside> tag.

Example

<aside>
<p>Command module 107 was built primarily by North American. Named Columbia by the crew, the command module was crafted with more than 2 million parts; nearly 15 miles of wire; a control panel with 24 instruments, 566 switches, 40 indicators, and 71 lights.</p>
</aside>

Citations

Including a passage from another work in your book is called a citation. Citations – and only citations – should be encased in the <cite> tag. Only use this tag when styling a citation that includes the source.

Note: If the citation contains only a name (e.g., Amelia Earhart in the Block Quotes example below), there is no specific tag for it.

Example

<blockquote>
<p>All we have to decide is what to do with the time that is given us.</p>
<cite>The Fellowship of the Ring, J.R.R. Tolkien</cite>
</blockquote>

Block Quotes

A block quote is a block of one or more sentences attributed to a particular individual or organization. This semantic style is widely supported, and alerts screen readers that a particular author is being quoted in the paragraph to follow.

Passages of quotes should be encased in the <blockquote> tag.

Example

<blockquote>
<p>Please know I am quite aware of the hazards. I want to do it because I want to do it. Women must try to do things as men have tried. When they fail, their failure must be but a challenge to others. – Amelia Earhart</p>
</blockquote>

ARIA Roles

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. The 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. As long as they are applied correctly, you can never have too many of these unambiguous identifiers.

ARIA roles are more restricted in where they can be used than EPUB’s structural semantics. Although there are a number of elements that accept any role, 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 a role that identifies particular types of content in a meaningful way.

Sections

Sections refer to large blocks of text. 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. Therefore, though they offer valuable semantics to readers, their meaning 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:typeRole
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”>
<h1>The Boy who Lived</h1>
<p>Mr and Mrs Dursley…</p>
</section>

Navigation File

If your navigation file is included in the 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:typerole
tocdoc-toc
page-listdoc-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 a 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.

Componentepub:typerole
Section cover (Not Assigned)
Image cover-image doc-cover

Example

<section epub:type=”cover” aria-label=”Cover”>
<img src=”cover.jpg” alt=”A white boy with a lightning bolt-shaped scar…” 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, 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 anything. Whatever you choose to house your page breaks in, make sure they contain these three elements:

  1. An epub:type semantic of pagebreak
  2. An ARIA role of doc-pagebreak
  3. An ARIA label with the new page number

Example

<span epub:type=”pagebreak” id=”page_48″ role=”doc-pagebreak” aria-label=”48″ />

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. Here’s how to apply semantic meaning to each of those components.

Componentepub:typeRole
Link to Note noteref: doc-noteref
Text of Footnote footnote doc-footnote
Text of Endnote endnote: doc-endnote
Link to Text referrer: doc-backlink

Example

Endnote:

<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” role=”doc-endnote”><p>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

<p>The radio announcer called “Cinnamon buns” <a href=”#fn01″ epub:type=”noteref” role=”doc-noteref”>1</a> into the microphone.</p>
<aside id=”fn01″ epub:type=”footnote” role=”doc-footnote”>
<p>Many audio enthusiasts use the phrase “cinnamon buns” to check the quality of a recording.</p>
</aside>

Sidebars

There are currently a limited number of roles specifically developed for sidebars. However, here is a short list, in hopes that it can be expanded in the future.

epub:typerole
tipdoc-tip

Example

<aside epub:type=”tip” role=”doc-tip”>
<p>If your dish water starts to foam when you add soap, you may be using too much detergent.</p>
</aside>

Accessibility Metadata

Now that your ebook is even more accessible, it’s time to promote it to a wider audience. This is the good news story for accessible publishing. You’ve done all the hard work, and now it’s time for some free marketing.

Metadata is used to tell others about your publication. Internal metadata lives inside your EPUB, and there’s a section to specify the accessibility features it contains. Not only does this tell non-traditional readers what to expect from the reading experience, it helps promote the publication to a wider audience. You can add accessibility metadata using DAISY’s Ace tool. Note that external metadata – something like an ONIX record – also has accessibility tags, but we’ll focus on the components of your EPUB itself for now.

Four key pieces of information are used to indicate the accessibility of a publication. They are Summary, Mode, ModeSufficient, and Feature. This is really the low-hanging fruit for accessible publishing, because each neglected tag will generate a violation on the Ace report.

The following table shows the purpose of common accessibility tags. All but the Summary are machine-readable, and must be populated with specific fields.

Tag Description
summaryA human-readable list of accessibility features
accessModeSpecifies how the publication can be read
accessModeSufficientIndicates reading modes that are sufficient to consume the content
accessibilityFeatureA list of features offered throughout the content

You’ll probably want to draw up your own text summary, to make it suit your style and accurately reflect the features in your content. However, unless your content contains only text or images, you can safely indicate that it can be accessed textually and visually, and that it can be sufficiently understood through these modes. More on that in the “Explanation” section, following our example. 

The last piece of the puzzle specifies the accessibility features of your ebook. There are several options here, and each is specified with another line of metadata. Remember to only include tags that indicate features that are actually present in your book. Here is a list of common accessibility features.

Feature Description
alternativeText All important images include a text alternative description
displayTransformability Users can modify the display of textual content such as font family and size
highContrastDisplay There is at least a 7:1 contrast ratio between the foreground text and the background
index The publication contains an index of the content, such as a topical index
longDescription All complex images include an extended description of their purpose
none The publication does not include any accessibility features
pageNavigation The publication includes a structured page list
printPageNumbers Static print page break locations are included in the text
readingOrder There is a logical reading order to the text
structuralNavigation All headings are properly marked up
synchronizedAudioText Audio narration is available, and synchronizes with the text
tableOfContents A complete navigation file is included

It’s worth reiterating that making books more accessible has benefits far beyond the needs of a particular reader. Accessible publications encompass a much wider segment of the population, and when produced, accessibility metadata helps promote the title to those looking for content they can easily read. When the title is ingested into library systems and online booksellers, it will be discoverable as an accessible publication to everyone. The business case here is clear. By doing the right thing in increasing the accessibility of your books, you automatically increase the market for them by specifying the above metadata. Modify as needed, copy and paste into all applicable digital content, and don’t look back.

Example

<meta property=”schema:accessibilitySummary”>This Publication meets the requirements of the EPUB Accessibility specification with conformance to WCAG 2.0 Level AA. The content is screen-reader friendly. Images are described, and sections are introduced with correctly-cascading headings.</meta>
<meta property=”schema:accessMode”>textual</meta>
<meta property=”schema:accessMode”>visual</meta>
<meta property=”schema:accessModeSufficient”>textual,visual</meta>
<meta property=”schema:accessModeSufficient”>textual</meta>
<meta property=”schema:accessibilityFeature”>structuralNavigation</meta>
<meta property=”schema:accessibilityFeature”>alternativeText</meta>

Explanation

The above metadata describes an ebook whose text is fully exposed to screen-readers. All images are described with alternative text, and headings have been used throughout to introduce sections in a hierarchical manner.

You may wonder why we indicate that the publication can be understood through a combination of textual and visual modes, then specify that textual access is also sufficient. That’s because the images in this fictitious book are wonderfully described, making them available to both blind (textual) and sighted (visual) readers. Visual readers can view the image, and textual readers can peruse the alt text. It’s two different modes of consuming content, but both are fully supported in this ebook.


Return to Resources for Publishers