WCAG Techniques for Fixed Layout
General guidance
Helpful resources
Content access
Ensure meaningful order of content across spreads and within pages
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.
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.
In HTML, the design above would be rendered in reverse reading order.
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.
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.
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].
Provide multiple ways to access content
Ensure the order of the table of contents entries matches linear order
Bypass blocks in Fixed Layout
Roles
Titles and Headings
Descriptions
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 HTMLaltattribute; 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.
The title and desc SVG elements can also be used to annotate components
of a larger image.
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).
Language
Text
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:
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:
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.