Summary

Include links to the where note, figure, table, and other types of reference marks are located to provide a convenient two-way means of locating information and allow for easier re-positioning of reading.

Techniques

• Use the doc-backlink role to identify links to reference mark or text.

• Use the aria-label attribute to add additional context if the purpose of the link is not clear. [[WCAG-2.4.4]]

Examples

<p>… was extra
   crunchy.<a id="fn01-ref" href="#fn01" role="doc-noteref">1</a>
</p>
…
<aside role="doc-footnote" id="fn01">
   <p><a href="#fn01-ref" role="doc-backlink">[1]</a> The first
      known instance of human cannibalistic …</p>
</aside>

<p>… as shown in <a id="fig01-ref" href="#fig01">Figure 1.0</a></p>
…
<figure id="fig01"> 
   <figcaption>Figure 1.0 …</figcaption>
   <img src="img01.jpg" alt="…"/>
   <p>
      <a href="#fig01-ref"><img src="back-arrow.jpg"
         alt="Text reference to figure"/></a>
   </p>
</figure>

<p>… as shown in <a id="fig01-ref" href="#fig01">Figure 1.0</a></p>
…
<figure id="fig01">
   <figcaption>
      <a href="#fig01-ref"
         aria-label="Figure 1.0 text reference">Figure 1.0</a>
      …
   </figcaption>
   <img src="img01.jpg" alt="…"/>
</figure>

<figure id="table01"> 
   <figcaption>
      Table 1 … 
      <a href="tbl01-ref01" role="doc-backlink"
         aria-label="Reference on page 235">[1]</a>,
      <a href="tbl01-ref02" role="doc-backlink"
         aria-label="Reference on page 303">[2]</a>,
      <a href="tbl01-ref03" role="doc-backlink"
         aria-label="Reference on page 318">[3]</a>
   </figcaption>
   <table>
      …
   </table>
</figure>

Explanation

Being able to link both to and from content that is referenced from the text greatly improves the reading experience for users. Although it is common to think of users only following a reference — for example, to get to a footnote — readers may only review these kinds of secondary source of information after having read through the full text of the chapter or section. Without a link back to the source reference mark, users will have difficulty determining the context and relevance.

In EPUB, two-way linking is also beneficial as many reading systems lack a back button, so once a user has followed a link, the only way they can return to where they were is manually. While this is a nuisance even for sighted readers, users of assistive technologies often must manually listen to the start of each paragraph until they find where they were.

Perhaps the most important consideration when adding links to reference marks is to avoid confusing the user about the purpose of the link and about its destination.

Although some linking patterns are commonly understood — for example, a "back link" on the reference number of a footnote to take the user to where the note was referenced — care should be taken when re-using such patterns in unfamiliar contexts. Example 3, depicts one such scenario. Linking a figure number is not as intuitive a pattern as linking a footnote reference. Users may misunderstand this as a link back to the figure since no mention of the reference is provided in the link or its surrounding context. In cases like these, if no other means of providing a link is possible (see example 2 for an alternative approach), the aria-label attribute should be used to add the missing context.

Similarly confusing for users is when there is more than one reference to a note, figure or table in the text, but only a single link back can be provided. If the user follows the second or third link, they will be confused if they are returned to the first reference. Adding context that the link returns the user to the first reference will help avoid confusion.

Note that even when multiple links back to reference marks can be provided, how to meaningfully label them can be a challenge. If static page break markers are present in the text, referring to the location by page number is one option to help users determine which is the correct way back (see example 4). But even this approach is problematic, as no assistive technologies currently announce page numbers. The user may have to try each link in turn until they find the right one.

Related Links

• DPUB-ARIA — doc-backlink role