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 provides two elements for describing images:
title— the equivalent of the HTML
altattribute; 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 (
aria-describedby) are added to improve support in assistive technologies as SVG is
still not well supported.
<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>
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.
desc elements can also be used to annotate components of a
<g fill="lightgray" stroke="gray" role="img" aria-describedby="gtitle"> <title id="gtitle">Rain clouds</title> … </g>
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.
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).