EPUB 3 Accessibility Guidelines

Separation of Style

The visual appearance of content is often the only consideration that ebook authors take into account when producing content, but this focus excludes that many readers are not going to be reading visually (e.g., refreshable braille, text-to-speech playback, etc.). Separating style from markup is consequently not just about keeping CSS in a separate file from your markup, but recognizing that markup must convey meaning to be useful to all readers, and that visual rendering is only one possible use case.

To create rich markup, EPUB 3 includes the epub:type attribute for semantic inflection — the ability to make statements about the nature of the tagging you're using beyond just the tag name. Using this attribute with the most relevant structural tag is the most effective way to create meaningful structures that promote accessibility regardless of the medium used to read the content — by establishing the logical reading order.

Semantically-rich markup also enables meaningful styling, as the epub:type attribute can be used in CSS selectors to apply styling by purpose. (See Example 2.) The use of semantic styling is encouraged as it ensures focus is kept on how the data is represented, not just how it looks when rendered.

But also note that the choices that you make for your content are not necessarily the optimal ones for many visual readers. A reader may prefer a different color scheme, to increase the contrast levels, to change the justification, fonts or line height to better suit their needs.

For this reason, cleanly separating style information from the markup is a good practice to maintain. Avoid using the style attribute, as it can impede the ability of readers to reflow and re-style documents.

CSS style definitions can be linked to the content documents to which they apply via the HTML5 link element. Multiple style sheets may be attached to a document to target different rendering mediums and/or to more cleanly group style by function.

Examples

Example 1 — Using the epub:type attribute to style a sidebar

The following CSS would make any aside elements defined as sidebars float to the right of the text:

@namespace epub 'http://www.idpf.org/2007/ops'
aside[epub|type~='sidebar'] {
   padding: 0.5em;
   margin-left: 2em;
   width: 25%;
   max-width: 15em;
   background-color: rgb(240,240,240);
   border: solid 1px; rgb(0,0,0);
   float: right;
}

Aplying to this markup:

<aside epub:type="sidebar">
   <h4>UK Prime Ministers</h4>
   <ol>
   	<li>Sir Robert Walpole</li>
   	…
   </ol>
</aside>

would result in the following rendering in a publication:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Example 2 — Adding a red border to a warning

Instead of using style alone to create an alert box, semantic styling could be achieved using the epub:type attribute as follows:

<aside epub:type="warning">
   <h4>Alert</h4>
   <p>
      Adding acids and bases can cause 
      violent reactions!
   </p>
</aside>
@namespace epub 'http://www.idpf.org/2007/ops'
aside[epub|type~='warning'] {
   border: solid 2px rgb(200,0,0);
}

aside[epub|type~='warning'] h4 {
   text-indent: 0.5em;
   width: 4em;
   margin: -1.25em 0em 0em 1em;
   background-color: rgb(255,255,200);
   border: solid 1px rgb(0,0,0);
}

The above markup would render as follows:

Example 3 — Linking a style sheet
<html …>
   <head>
      …
      <link
           rel="stylesheet"
           type="text/css"
           href="css/epub3.css"/>
      …
   </head>
   …
</html>
Example 4 — Including style overrides for mobile rendering
<html …>
   <head>
      …
      <link
           rel="stylesheet"
           type="text/css"
           href="css/epub3.css"
           media="screen"/>
      
      <link
           rel="stylesheet"
           type="text/css"
           href="css/epub3-mobile.css"
           media="screen and (max-width:480px)"/>
      …
   </head>
   …
</html>

Compliance References and Standards