When a single image is presented as a two-page spread, provide alternative text and description on the first page and refer back to the description from second page.
Explanation
It is common with fixed layouts, especially those that replicate a print work, to have a single image that is split across two pages(e.g., maps). The use of synthetic spreads(side-by-side pages) allows authors to place both images in the reading system display at the same time.
The question this practice raises is how to effectively describe the split image. Do you describe each half separately, and what if the image halves do not make sense separately? Do you only describe one half, and, if so, what about the other half?
A common web technique when there is a group of related images on a single page is to only describe the first image and treat the others as decorative so that users do not encounter duplicate descriptions.
1. <figure aria-details="map-desc">
2. <figcaption>…</figcaption>
3. <img src="map-pt1.jpeg" alt="World Map" />
4. <img src="map-pt2.jpeg" alt="" />
5. </figure>
This technique does not work well with publications, however, because the related images in a spread are on separate pages(i.e., it leaves users of assistive technologies with a seemingly empty page if only one image is described).
A solution to this problem is to provide the description with the first image but use the alternative text to guide users to the split nature of the image.
For example, the alternative text of the first image in a spread could include the total number of parts the image contains:
The second page would then indicate it is the second in the series and refer back to the first for the description:
1. <body>
2. <img src="map-pt2.jpeg" alt="World Map (Page 2 of 2). Refer to previous page for description." />
3. …
4. </body>
Although there is some redundancy in this approach, because users following the text linearly will already have encountered the description, it ensures that a user who lands on the second page of the spread first(e.g., by choosing to jump to a specific page) does not lose the context.
Note
Refer to the fixed layout images knowledge base page for more information on how to add an extended description.
Summary
Explanation
1. <figure aria-details="map-desc"> 2. <figcaption>…</figcaption> 3. <img src="map-pt1.jpeg" alt="World Map" /> 4. <img src="map-pt2.jpeg" alt="" /> 5. </figure> 1. <body> 2. <img src="map-pt1.jpeg" alt="World Map (Page 1 of 2)" aria-details="map-desc" /> 3. … 4. </body> 1. <body> 2. <img src="map-pt2.jpeg" alt="World Map (Page 2 of 2). Refer to previous page for description." /> 3. … 4. </body>