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:
- Perceivable: Users must be able to read all information, including any content that is presented visually.
- Operable: Readers must be able to navigate and find content, which is accomplished through carefully-chosen semantic tags.
- Understandable: Content must be readable and understandable, so ebooks should operate in similar ways across a variety of platforms.
- 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 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. 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:type | 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”>
<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:type | 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 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.
| Component | epub:type | role |
|---|---|---|
| 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:
- An epub:type semantic of pagebreak
- An ARIA role of doc-pagebreak
- 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.
| Component | epub:type | Role |
|---|---|---|
| Link to Note | noteref | doc-noteref |
| Text of Footnote | footnote | doc-footnote |
| Text of Endnote | endnote | n/a |
| 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 epub:type=”endnotes” role=”doc-endnotes”>
<h2>Endnotes</h2>
<ol>
<li id=”fn1″ epub:type=”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>
</section>
Note that the Endnotes section is nested within the chapter 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:type | role |
|---|---|
| tip | doc-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 |
|---|---|
| summary | A human-readable list of accessibility features |
| accessMode | Specifies how the publication can be read |
| accessModeSufficient | Indicates reading modes that are sufficient to consume the content |
| accessibilityFeature | A 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>
<meta property=”schema:accessibilityHazard”>none</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.