Accessible Publishing Knowledge Base

hyperlinks

Plain old hyperlinks remain the most widely accessible way to provide a link to a description.

<figure>
   <img src="crime-map.jpg" alt="Crime in Gotham City">
   <a href="crime-desc.xhtml">Description</a>
</figure>

The primary advantage of hyperlinks is that they are exposed to all users, unlike the aria-describedby attribute described in the next section. Their primary disadvantage is that they are always visible, and publishers are often prevented from adding any visble content by their agreements with authors.

Note that a hyperlink does not always have to reference a description in another document; descriptions might be included at the end of a section, like footnotes.

aria-describedby

The aria-describedby attribute can be used to add a description to any HTML5 element, not just img, and is the currently recommended mechanism for referencing descriptions in EPUB 3.

The attribute references the ID of the element on the page containing the description. For example:

<table aria-describedby="table-desc">
   …
<table>

<aside id="desc">
   <p>The table is composed of three smaller tables
        each of which … </p>
</aside>

Note that the ID reference does not include a hash (#) at the start. If the description is spread across multiple elements, the ID of each can be listed in the attribute.

It is not required that the element containing the description be visible content. The aria-describedby attribute can point to hidden elements:

<img … aria-describedby="img-desc"/>

<aside id="desc" hidden="hidden">
   …
</aside>

Before using hidden content too extensively, be aware that the ability to navigate the description is removed when content is not visible. Hidden descriptions are read as one long text string that the user has to listen to in its entirety.

One of the primary limitations of aria-describedby is that the element containing the description must be present in the same page as the content that is being described, so it is not possible to reference out-of-band descriptions directly. The workaround to this limitation is to reference the external description through an iframe element:

<img src="bunny.jpg" aria-describedby="bunny-desc"/>

<iframe id="desc" src="bunny-description.xhtml" hidden="hidden"></iframe>

Although using an iframe in this fashion mimics the out-of-band functionality of the longdesc attribute, there are a number of drawbacks:

• There is no way to reference into the content in the iframe from an aria-describedby attribute; all content in the iframe will be read.
• The iframe will be announced as a separate document.
• Using many iframe elements slows down the loading of documents, since each description must be loaded, unlike proper out-of-band linking mechanisms, which allow the content to only be loaded as requested by the user.