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, 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 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.
4. <desc id="svgdesc">The continuous cycle by which water …</desc>
5. …
6. </svg>
Note
The role group is given to the image because it contains additional text content(not shown) that the user will interact with. If the image were entirely graphical, the role img would be used instead.
The title and desc 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, 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 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).
Overview
SVG
1. <svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" … 2. role="group" aria-describedby="svgtitle svgdesc"> 3. <title id="svgtitle">The Hydrologic Cycle</title> 4. <desc id="svgdesc">The continuous cycle by which water …</desc> 5. … 6. </svg> 1. <g fill="lightgray" stroke="gray" role="img" aria-describedby="gtitle"> 2. <title id="gtitle">Rain clouds</title> 3. … 4. </g>HTML