This document, EPUB Fixed Layout Accessibility, outlines techniques and best practices for producing more accessible fixed layout publications.
## Introduction {#intro} ### Overview {#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 {#limits} 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. We want to recognize these challenges for content creators, and in this document will outline some techniques for managing these challenges. We encourage content creators to explore the possibilities that digital publications present, even when creating fixed layout publications. ## Reading Order {#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: * Size and styles of font used * Design features such as imagery and coloured backgrounds * Position on the page top to bottom, left to right (when using left to right page progression) 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: * page numbers * section or chapter headings * other purely decorative objects ### The Page Position Problem {#reading-order-position} For complex designs, the position of objects on the fixed-layout page is not a reliable indicator of their reading order. ![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.](https://paper-attachments.dropbox.com/s_0AAB5B58D7ED490A2ECD81A9EF48D7CA8161EC26CC0E062275C355EA1B8AAB1F_1620130508735_image.png) ![The correct reading order indicated with overlaid regions.](https://paper-attachments.dropbox.com/s_0AAB5B58D7ED490A2ECD81A9EF48D7CA8161EC26CC0E062275C355EA1B8AAB1F_1620131709989_image.png) > 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 Criterion 1.3.2: Meaningful Sequence](https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence) ### The Stacking Order Problem {#reading-order-stacking} 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. ![The stacking order is commonly used by layout applications to dictate the reading order.](https://paper-attachments.dropbox.com/s_0AAB5B58D7ED490A2ECD81A9EF48D7CA8161EC26CC0E062275C355EA1B8AAB1F_1620137557760_InDesign_stack.png) The design above would be rendered in reverse reading order. ```html

Bottom object

Middle object

Top object

``` ### Altering the Reading Order {#reading-order-changing} > 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. *From Making the DOM order match the visual order* https://www.w3.org/WAI/WCAG21/Techniques/css/C27 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. ![Altering the stacking order will the alter reading order but may also disrupt the design of the page.](https://paper-attachments.dropbox.com/s_0AAB5B58D7ED490A2ECD81A9EF48D7CA8161EC26CC0E062275C355EA1B8AAB1F_1620136528766_Screenshot+2021-05-04+at+14.55.18.png) ```html

Top object

Middle object

Bottom object

``` ### Removing items from the Reading Order {#reading-order-removing} 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. From Using the aria-hidden attribute https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute ```html ``` ### Reading Order across the ‘fold’ {#reading-order-spreads} 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. ## Alternative text {#alt-text} 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. ### 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. Ensuring that the information conveyed in the images is available to users who may not be able to perceive the background 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](http://kb.daisy.org/publishing/docs/html/images.html), to provide alt text and extended descriptions when they contain information necessary to understanding the publication, 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. The 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. ### SVG 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](http://kb.daisy.org/publishing/docs/fxl/svg.html) 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. ```html The Hydrologic Cycle The continuous cycle by which water … ``` The `title` and `desc` elements can also be used to annotate components of a larger image. ```html Rain clouds ``` 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, however, as animations, for example, were completely restricted until EPUB 3.2. ### 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](http://kb.daisy.org/publishing/docs/html/hidden.html) 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](http://idpf.github.io/epub3-samples/30/samples.html#the-voyage-of-life-tol) 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: * [WCAG Technique: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description](https://www.w3.org/WAI/WCAG21/Techniques/general/G74) * [WCAG Technique: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G73) * [WCAG Technique: Providing long description for non-text content that serves the same purpose and presents the same information](https://www.w3.org/WAI/WCAG21/Techniques/general/G92) * [(DAISY's Example 2: Extended description in details)](http://kb.daisy.org/publishing/docs/html/images-desc.html#ex-02) * [(DAISY's Example 4: Hidden description)](http://kb.daisy.org/publishing/docs/html/images-desc.html#ex-04) 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](http://kb.daisy.org/publishing/docs/fxl/spreads.html)' 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. W3 Tutorial on Image Groups Not all details are needed in writing Alt-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 Alt-text. For more information on when, and how to describe you can go to the DIAGRAM centre, or AccessibilePublishing.ca. See resources for links. ### Useful Resources for describing images * [W3C - Resources on Alternative Text for Images](https://www.w3.org/WAI/alt/) * [Image Description Guidelines](http://diagramcenter.org/table-of-contents-2.html) * [POET - Image Description Training Tool](https://poet.diagramcenter.org) * [DIAGRAM - Accessible Image Sample Book](https://github.com/benetech/AccessibleImageSampleBook) * [How to Describe Complex Images for Accessibility - NCAM YouTube Video](https://youtu.be/oSdz6KZpLjs) * [Guide to Image Descriptions by AccessibilePublishing.ca](https://www.accessiblepublishing.ca/a-guide-to-image-description/) ## Navigation {#navigation} TBW ## Legibility {#legibility} TBW ## Media overlays {#media-overlays} TBW ## Tables {#tables} An image of text, or images with text, are not accessible. It is important to try to avoid images of text whenever possible, which is more of a challenge in FXL. 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](http://kb.daisy.org/publishing/docs/html/tables.html). If the table needs to remain an image, another option is to use alt-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 Alt-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: * Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description * Providing a long description in another location with a link to it that is immediately adjacent to the non-text content * Providing long description for non-text content that serves the same purpose and presents the same information * Extended description in details * Using hidden description (see example 4) ### ARIA Roles for Tables {#tables-aria} Provide an extended description for a table using either [aria-describedby or aria-details](https://www.w3.org/TR/WCAG20-TECHS/ARIA15.html). ## Accessibility metadata {#a11y-metadata} Books with accessible elements require metadata to indicate how they are accessible, and if they present and hazards to the reader. `accessibilityFeature` and `accessModeSufficient` should be used for FXL titles.