EPUB Accessibility - Fixed Layout Techniques

This document, Fixed Layout Accessibility Techniques, outlines the techniques content authors and publishers can use to make their Fixed Layout EPUB content accessible.

Content Accessibility - Programmatic Techniques

When building accessible content, there are two aspects to consider: programmatic and visual. This section will cover programmatic techniques for content accessibility. Programmatic techniques are related to how the underlying code of the EPUB file is constructed. Features like reading order, alternative text for images, navigation, media overlays, and tables all have programmatic considerations.

Reading Order

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 steps 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.

For further guidance, you can also refer to this example from "Understanding WCAG 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). Many EPUB production tools 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 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

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 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.

There are multiple ways to hide content from users visually, in the accessibility tree, or both. [TODO: Add more information about hiding content].

<div aria-hidden="true">
    <p class="folio">210</p>
</div>

Images

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.

SVG (Scaleable Vector Graphics)

SVG provides two elements for describing images:

title - the equivalent of the HTML alt attribute; it is used to provide alternative text for an entire SVG image and individual components within it.
desc - used to provide an extended description for the entire SVG image and individual components within it.

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.

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

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).

Navigation

Structural hierarchy

The use of heading tags ensures users do not have to rely on visual styling to understand and navigate the document outline. The structural hierarchy is already being considered at the design stage of visual page layout. By adding this information into the styles on the page and the tags used on export, we pull can this structure into EPUB. For example:

        <h2 class="Main-Head">The Technical Basics</h2>
        <p class="Paragraph">Photography, in its best form, is a mesh of science and art. You need both. For science, you need to understand the technical elements that affect the image – depth of field, diffraction, exposure, focus, magnification and more. On the artistic side, there are so many considerations from composition, colour, contrast, understanding what “beauty” is perceived as, narratives and storytelling elements and beyond.</p>
        <p class="Paragraph">The deeper you can weave the mesh of these two elements, science and art, the more magical your images will become.</p>
        <h3 class="Subhead">Understanding Depth of Field</h3>
        <p class="Paragraph">There are three primary considerations for how much depth of field – the amount of the scene in focus in the resulting photograph. The size of your aperture, the focal length of your lens, and the distance from your subject all have an impact on how much you’ll get in focus in a single frame.</p>

Region-based navigation

Within a page it may be possible to add the navigation to regions of interest within that page. Especially useful for splitting up a larger visual element or creating a layout for reading on smaller screens.

The EPUB Region-Based Navigation specification introduces conventions for navigation through a publication based on regions of interest.

Media Overlays

Tables

It is necessary to make sure that non visual users can understand and navigate the tabular data effectively. That mean content creators have to indicate which cells are headings for columns or rows. Easiest way is to use proper table elements and attributes to ensure that the table structure is clear and comprehensible. For example:

            <table>
             <caption>Sample Data Table</caption>
             <thead>
              <tr>
               <th scope="col">Header 1</th>
               <th scope="col">Header 2</th>
               <th scope="col">Header 3</th>
              </tr>
             </thead>
             <tbody>
              <tr>
               <th scope="row">Row 1</th>
               <td>Data 1</td>
               <td>Data 2</td>
              </tr>
              <tr>
               <th scope="row">Row 2</th>
               <td>Data 3</td>
               <td>Data 4</td>
              </tr>
             </tbody>
            </table>

That will render as:

Sample Data Table
Header 1	Header 2	Header 3
Row 1	Data 1	Data 2
Row 2	Data 3	Data 4

Complex tables can be authored by using additional attributes and elements to ensure that merged cells and other complex structures are understandable to all users. Proper use of headers, scope, and caption is then essential. For example:

        <table>
         <caption>Complex Data Table with Merged Cells</caption>
         <thead>
          <tr>
           <th id="main-header" colspan="3" scope="colgroup">Header 1</th>
          </tr>
          <tr>
          <th id="sub-header-2" scope="col">Header 2</th>
           <th id="sub-header-3" scope="col">Header 3</th>
           <th id="sub-header-4" scope="col">Header 4</th>
          </tr>
         </thead>
         <tbody>
          <tr>
           <th scope="row" id="row1">Row 1</th>
           <td headers="main-header sub-header-2">Data 1</td>
           <td headers="main-header sub-header-3">Data 2</td>
          </tr>
          <tr>
           <th scope="row" id="row2">Row 2</th>
           <td headers="main-header sub-header-2" rowspan="2">Merged Data</td>
           <td headers="main-header sub-header-3">Data 3</td>
          </tr>
          <tr>
           <th scope="row" id="row3">Row 3</th>
           <td headers="main-header sub-header-4">Data 4</td>
          </tr>
         </tbody>
        </table>

That will render as:

Complex Data Table with Merged Cells
Header 1
Header 2	Header 3	Header 4
Row 1	Data 1	Data 2
Row 2	Merged Data	Data 3
Row 3	Merged Data	Data 4

If for any reason, the tables can not be authored directly as HTML and images are used instead, then refer to the image section and consider adding a fallback HTML version for the tables.

Introduction

Accessibility Metadata for Fixed Layout EPUB