This document, EPUB Fixed Layout Accessibility, outlines techniques and best practices for producing more accessible EPUB® fixed layout publications.

Introduction

Overview

Fixed Layout publications, or publications where the print layout is preserved in the digital edition, have been around since before EPUB 3.0.1. These publications span a number of genres and types, from comic books, cook books, children's books, and more.

The main motivation behind creating fixed layout publications is the need to preserve the print layout of the book, either because of it's importance to the text (i.e. complex diagrams) or it's artistic purpose (i.e. illustrated text). However, these publications are often partially or completely inaccessible to people with print disabilities.

This note serves to help content authors and publishers try to address some of the common accessibility issues found in fixed layout content, including navigation, reading order, and text alternatives. This document is a companion to [[epub-a11y-11]], specifically for fixed layout publications. All recommendations made in [[epub-a11y-11]], [[epub-33]], and [[epub-rs-33]] are applied and extended here.

The Limits of Fixed Layout Accessibility

Fixed Layout publications present some unique challenges for accessibility. The requirements laid out in [[epub-a11y-11]] recommend [[wcag2]] AA, but for many use cases in fixed layout, that might not be possible without fundamental changes to the content.

In particular, the needs of people with low vision or learning disabilities that rely on the transformation of text are still almost impossible to accommodate in fixed layout content. Content creators concerned about this may choose not to use fixed layout.

We want to recognize these challenges for content creators, and in this document will outline some techniques for producing more accessible fixed layout content. We encourage content creators to explore the full range of options for accessibility that digital publications present, even when creating fixed layout publications.

What does an accessible fixed layout EPUB look like?

Accessible fixed layout is challenging to produce, but not impossible. This document will cover the most important considerations content creators need to make.

Accessible fixed layout content requires the following considerations:

Reading Order

A key concept of EPUB is that an EPUB publication consists of multiple resources that can be completely navigated and consumed by a person or program in some specific order. - 1.2.1 Reading Order [[epub-overview-33]]

Whereas many reflowable publications have an obvious reading order, or logical progression through their content, fixed-layout publications are often more complex in their design and layout and may consist of multiple readable objects on the same page.

For viewers of the visual page, the reading order can be inferred by various visual triggers including:

In addition, there may be additional text and image objects on the fixed-layout page which are not required to be included in reading order, such as:

The Page Position Problem

For complex designs, the position of objects on the fixed-layout page is not a reliable indicator of their reading order.

A two-page spread featuring a layout with a prominent heading followed by paragraphs of text on the left-hand page, and a series of images with descriptive captions on the right-hand page.
In the example page above, the top level heading is inferred by its styling rather than its position. The step-by-step are reading across left to right but in two rows.
The same two-page spread, with outlined green boxes surrounding the text elements, each one labelled with a reading order number.
The correct reading order indicated with overlaid regions.

In a multi-column document, the linear presentation of the content flows from the top of a column to the bottom of the column, then to the top of the next column.

Example from Understanding Success Criteria 1.3.2: Meaningful Sequence.

The Stacking Order Problem

The default reading order for Text to Speech (TTS) is determined by the order of the elements in the XHTML page (DOM). Popular page layout programs like Adobe InDesign and Apple Pages export the page content in the order of the stacking order of objects on the page rather than their page position. The topmost objects sits above other objects and so is written last in the HTML.

Screenshot from Adobe InDesign demonstrating how the order of layers in a publication dictates the reading order, with the top-most object being the highest layer in the order.
The stacking order is commonly used by layout applications to dictate the reading order.

In HTML, the design above would be rendered in reverse reading order.

<body style="width:595px;height:842px">
    <div style="width:500px;height:200px;top:400px;position:absolute;">
        <p …>Bottom object</p>
    </div>
    <div style="width:500px;height:200px;top:225px;position:absolute;">
        <p …>Middle object</p>
    </div>
    <div style="width:500px;height:200px;top:50px;position:absolute;">
        <p …>Top object</p>
    </div>
</body>

Altering the Reading Order

If a blind user, who reads the page with a screen reader that follows the source order, is working with a sighted user who reads the page in visual order, they may be confused when they encounter information in different orders. A user with low vision who uses a screen magnifier in combination with a screen reader may be confused when the reading order appears to skip around on the screen. A keyboard user may have trouble predicting where focus will go next when the source order does not match the visual order. - Making the DOM order match the visual order

Automatic exports can derive their reading order either by analysing the position of the page and / or the stacking order in order to influence the reading order. Neither is suitable. Altering the stacking order to dictate the reading order has the potential to alter and disrupt the design of the page.

Screenshot from Adobe InDesign demonstrating how altering the layer order to fix the reading order in export alters the visual design, causing the bottom-most layer to appear over top the other ones.
Altering the stacking order will the alter reading order but may also disrupt the design of the page.

The recommended best practice solution is to adjust the order of the elements in the XHTML page and to preserve the design using CSS z-index.

<body style="width:595px;height:842px">
    <div style="z-index:3;width:500px;height:200px;top:50px;position:absolute;">
        <p …>Top object</p>
    </div>
    <div style="z-index:2;width:500px;height:200px;top:225px;position:absolute;">
        <p …>Middle object</p>
    </div>
    <div style="z-index:1;width:500px;height:200px;top:400px;position:absolute;">
        <p …>Bottom object</p>
    </div>
</body>

Removing Items from the Reading Order

There may be cases when text appears on the page but is unnecessary, duplicated or otherwise confusing for it to be added to the reading order. e.g. page numbers, section or chapter headings which are already part of the publication’s structure or text used for visual effects.

Adding aria-hidden="true" will remove the entire element from the accessibility API. - Using the aria-hidden attribute
<div aria-hidden="true">
    <p class="folio">210</p>
</div>

Reading Order across the 'Fold'

Fixed-layout documents can be presented as synthetic spreads when a left and right page are presented together as a spread. As each page of the fixed-layout document is a separate XHTML document it is expected that reading order moves through there document from left to right (when using left to right page progression) but is not possible for the reading order to move from the left to the right and then back to the left page again.

If the text must be read in this way, the only solution to maintain the correct reading order is to convert the double page spread in to a single landscape page that contains the entire content of the spread and for the EPUB to be rendered as single pages.

Images in Fixed Layout

Overview

Images are often an integral part of fixed layout publications. Fixed layout publications sometimes consist entirely of images, in the case of comics, or images may be used as backgrounds to a story, as in children's books. Fixed layout content where images serve as both the content and the layout pose a particular challenge for content creators interested in accessibility.

Ensuring that the information conveyed in the images is available to users who may not be able to perceive the image or may have difficulty processing it, is consequently of high priority in making fixed layouts as accessible as possible.

The basic requirements for all images are to provide alternative text and extended descriptions when they contain information necessary to understanding the publication, which applies to fixed layouts. For example, while a reader may be able to follow the dialogue of a story when it is overlaid as text, only the placement on image might give context to what character is saying what.

One challenge with fixed layouts is finding ways to describe the image and provide context given that there is no extra area on the page users can access in which to place a description. The other challenge is for content where the text is rasterized as part of the image, which can be unavoidable for content where the text is hand-drawn or part of the image. As much as possible, we recommend making the text on the page its own layer, using technologies such as SVG and CSS to achieve the desired styling and placement, while also making the text more accessible to the user. When text is rasterized into the image, it is recommended to use the alternative text and image description recommendations described in this section.

Image descriptions and alternative text do have limits in their ability to translate image content to text, those limitations include the ability to adequately map the flow of action on a page to text, or translation of visual effects to textual equivalents. Work continues in this area to improve this experience, and we will note gaps in the sections below.

Alternative Text and Image Descriptions

Describing images within a fixed layout book will somewhat depend on the type of book these images are within. For example describing a childrens picture book will be quite different than if this is a fixed layout graphic novel such as a comic book.

SVG (Scaleable Vector Graphics)

SVG provides two elements for describing images:

When a publication is made of fixed-layout SVG pages these two elements can be used to describe the content. Note that ARIA attributes (role and aria-describedby) are added to improve support in assistive technologies as SVG is still not well supported.

<body style="width:595px;height:842px">
    <svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" role="group" aria-describedby="svgtitle svgdesc">
        <title id="svgtitle">The Hydrologic Cycle</title>
        <desc id="svgdesc">The continuous cycle by which water …</desc>
            …
    </svg>
</body>

The title and desc SVG elements can also be used to annotate components of a larger image.

<body style="width:595px;height:842px">
    <g fill="lightgray" stroke="gray" role="img" aria-describedby="gtitle">
    <title id="gtitle">Rain clouds</title>
        …
    </g>
</body>

The one problem with using these elements to annotate SVG images is that their content is typically only made available to users of assistive technologies.

A more advanced approach would be to add a link or button to view the description using script or animations (e.g., open the description like a pop-out). EPUB reading system support for such approaches is likely to be limited and testing is encouraged.

HTML

When an image is embedded in an HTML fixed layout page, there are more options available for including accessible descriptions. As with SVG fixed layouts, the primary consideration is once again the limitation of having only limited screen space in which to include the description.

For this reason, descriptions are typically hidden from view using a variety of HTML, ARIA and CSS techniques. Descriptions can be hidden, clipped, made opaque, layered under an image, etc. The knowledge base page on hidden content delves into these possibilities in more detail.

Support for scripting in XHTML content documents in EPUB is generally much better than is available for SVG, so there are more reliable techniques that can be used to make the descriptions viewable by a wider range of users. Clicking or tapping on an image can be used to show its description, for example. The Voyage of Life sample EPUB contains an experimental example of this technique.

Unlike reflowable publications, the CSS background-image property can be used with fixed layouts to set the background image for a page. It is best to limit this practice to backgrounds that are purely presentational as much as possible, however, as it complicates the ability to provide a description that any user will be able to reach (i.e., it often involves hiding the description only for assistive technologies).

Complex Image Descriptions

Depending on the complexity of the image this may require complex description with one of the following formats:

If an image splits over two pages, put the full image description of both images in the first image and in the second image reference back to the first. See Multiple Page Spreads.

If there are a group of images in sequence, you only have to describe details in the first image. In the proceeding images only mention what has changed.

Not all details are needed in writing alternative text for images, and what you do describe relies heavily on context. For example, if the image is described in the surrounding text, you only need to briefly describe it in the alternative text. For more information on when, and how to describe you can go to the DIAGRAM centre, or AccessiblePublishing.ca.

Useful Resources for Image Descriptions

Legibility

The legibility, or readability, of fixed layout content is an important contributing factor to its accessibility, particularly for users with low vision, cognitive, or learning disabilities. As text in a fixed layout document is unalterable, it is important to consider best practices in putting together clear, legible documents. Content creators are reminded that ebooks can be read on a number of different screen sizes and devices, many that will be smaller than the printed version of the page. Designs for fixed layout content should take into account these smaller screen sizes and their impact on legibility and layout. This section will focus on what to consider when constructing more legible fixed layout publications.

Font Selection

There is no single font that meets the legibility needs of all users, but considering certain font characteristics to increase legibility is possible. When planning font selections in fixed layout publications, consider the following:

Font Sizing

There is no font size guideline in [[wcag2]], however the standard default font size in most desktop and mobile browsers is 16pt for body text (I.e. in a p element). This size is sufficient for most content, and headings should be based off of it by using em or rem sizing in [[css]]. If content contains a great deal of text, it is also recommended to consider a larger body font size like 18pt to ensure readability.

Content creators should also ensure font size patterns are consistent throughout the content, to assist users in differentiating and contextualizing the content.

Font Weight

Depending on the chosen font, it might be necessary to consider the weight of the font to make it more legible. A font weight of 400 is considered normal or regular, but depending on the font face, may be too light. A font that is too light can disappear into the background of a page, especially if factors like clarity or contrast are not considered. A font weight of 700 is considered bold, and would be more readable, but overusing a bold typeface can present its own issues for legibility.

Font Face

Selecting a font face for your content can depend on a number of factors. When choosing a font for fixed layout content it is important for content creators to consider readability because a user will not be able to alter the font face to suit their needs or preferences.

One of the most important factors for the readability of fonts relates to character differentiation. Character differentiation in a font is a strong indicator of readability, specifically for characters that have similar shapes in a font face. In the Latin alphabet, letters like I and l, b and d, or a o and e can look very similar to one another depending on the style of the font. The same issue is possible in fonts for other alphabets, particularly when glyphs are similar in appearance or use similar elements.

Color Contrast

[[wcag2]] specifies that the color contrast should meet certain ratios depending on its size and weight.

Body text, or text that is less than 18pt (or 14pt bold) in size must have a contrast of at least 4.5:1 to the background.

Large scale text, text that is over 18pt (or 14pt bold) must have a contrast of at least 3:1 to the background.

It is recommended text be placed on a solid background or one that is significantly muted in order to increase the legibility of the text.

Text Layout

The layout of text in a fixed-layout publication is also important when considering legibility. As outlined in the Reading Order section, the order of content on the page, and the order in code should match. When laying out a page in a fixed layout document, consider the order the reader should follow, how to indicate that order visually, and any complications to the order (i.e. asides, definitions, images, etc).

When constructing a page or chapter, consider the following:

Media Overlays

TBD

Tables

The best way to create an accessible table is to present it as tabular data. This is already documented in the DAISY Knowledge Base with directions on creating semantic tagging for tables.

If the table needs to remain an image, another option is to use alternative text and caption or ARIA roles to describe the data in logical reading order. The caption could be used as a summary of the table, and the alternative text would dive deeper. You would start with describing what the header row is followed by what is presented in each row. You could then dive deeper and list all the data as it appears in reading order.

Depending on the complexity of the image this may require complex description with one of the following formats:

ARIA Roles for Tables

Provide an extended description for a table using either aria-describedby or aria-details.

The advantage of aria-details over aria-describedby is that it allows users access to the markup of the linked description (which could be the table markup if you put it, for example, inside a details element to collapse it). The current drawback, however, is that there isn't great support yet for the attribute. And expanding details element within a fixed layout page is also likely to wreak a bit of havoc when users click on it (unless you find a way to reliably position it offscreen, but then that limits who can access it).

The aria-describedby attribute's big drawback is that it turns the description into one long text string that users have to listen to. There's no way to navigate the columns and rows or have headers read out, so it's likely going to be very difficult for users to make sense of except for very simple and very small tables.

Package Metadata

The package metadata used in the EPUB is the primary method for a reading system to determine whether content is fixed layout or reflowable. In addition to identifying the pagination mode with rendition:layout, package metadata can also allow the content creator to have some control over other display characteristics.

These display characteristics include:

The default value for the orientation and spread properties is auto, which means that the reading system settings or defaults take effect.

It is recommended that content creators do not set a specific orientation property, as this can interfere with user device preferences. It is especially important for users who may be unable to change the orientation of their device to match the content settings.

An example of package metadata for a fixed layout publication.

<meta property="rendition:layout">pre-paginated</meta>
<meta property="rendition:orientation">auto</meta>
<meta property="rendition:spread">auto</meta>

Accessibility Metadata

Books with accessible elements require metadata to indicate how they are accessible, and if they present and hazards to the reader.

Accessibility Features

The schema.org property accessibilityFeature is used to define all accessibility features within the book.

A few values that could apply to a Fixed Layout book might be:

<meta property="schema:accessibilityFeature">
    alternativeText
</meta>
<meta property="schema:accessibilityFeature">
    readingOrder
</meta>

Access Mode

The schema.org property accessMode is used to define the ways in which this book can be consumed be that visual, textual, auditory, or tactile.

A picture book would only have an accessMode of visual.

<meta property="schema:accessMode">
    visual
</meta>

A fixed layout book which contains both text and images would have two separate accessModes defined.

<meta property="schema:accessMode">
    visual
</meta>
<meta property="schema:accessMode">
    textual
</meta>

Access Mode Sufficient

The schema.org property accessModeSufficient is used to define the combinations in which this book can be consumed be that visual, textual, auditory, or tactile.

For picture books with no text, or no alternative text, the way one would consume this would be completely visually so having accessModeSufficient of visual would be solely defined.

<meta property="schema:accessModeSufficient">
    visual
</meta>

For Fixed Layout books that have both visual and textual elements then having accessModeSufficient of visual,textual would be appropriate. In addition, if the Fixed Layout book is primarily images that are fully described, textual would also apply, as this implies the boook is Screen Reader Friendly and can be fully read by assistive technology.

<meta property="schema:accessModeSufficient">
    visual,textual
</meta>

If a Fixed Layout book has all images fully described then having accessModeSufficient of textual would be appropriate which implies this book is Screen Reader Friendly and can be fully read by assistive technology.

<meta property="schema:accessModeSufficient">
    textual
</meta>

Accessibility Hazards

The schema.org property accessibilityHazard defines any hazards within the book.

Currently there are only three possible hazards defined: flashing, sound, and motionSimulation. All of which refer to embedded sound, video, or motion images such as GIFs within the book.

If there are no hazards within the book one can simply have none or can call out each specific non-hazard explicitly by stating noFlashingHazard, noSoundHazard, and noMotionSimulationHazard.

<meta property="schema:accessibilityHazard">
    none
</meta>

Accessibility Summary

The schema.org property accessibilitySummary is a human readable statement on how accessible or inaccessible the book is.

<meta property="schema:accessibilitySummary">
    This Fixed Layout EPUB contains a lot of visual formatting
    where images can span over two pages.  All images do have
    a textual description to aid in accessibility.
</meta>