Link to the Transcript

The longdesc attribute ties an image to its long description, which browsers and screen readers turn that into a method to access the long description. JAWS, for instance, will announce a long description is available and the user can navigate to the content via the alt + enter keys. Unfortunately, the longdesc attribute is not well supported and the content is not made available to users without a screen reader.

Link Alternatives to the longdesc

Summer Travel infographic
[d]

To solve this problem, the d-link was introduced as an accessible method of connecting the image with its description. This is simply a link that points to the transcript and uses the text “d” or “[d]”.

While this technique is simple to use, it’s confusing to new users.

d link coding

This example uses the HTML5 figure and figcaption to create a self-contained package. These tags may be stripped by some web editors when shared. Also, they will be styled as inline elements unless the site has set them to display:block via the CSS. This means the image and link would sit inline with the rest of the content on the page.

Summer Travel infographic
[d]

Standard Text Link

Summer Travel infographic
Mapquest: Make the most of Summer Travel

While providing a link to the transcript is a great idea, we can improve upon the pattern by replacing the letter “d” with a standard text description. WebAIM’s article on long descriptions suggests “Text Alternative for Summer Travel Infographic”. This example uses the headline of the transcript to better describe the content, rather than the link’s purpose.

Connecting the Infographic and Link via aria-describedby

Summer Travel infographic
Mapquest: Make the most of Summer Travel

We could make the connection between the image and link by connecting them with aria-describedby. This announces the link’s text after a slight pause while the image is focused. It does not allow provide the longdesc’s ability to activate the link while the image is focused.

Descriptive link and aria-describedby code

Summer Travel infographic
Mapquest: Make the most of Summer Travel

Make the Infographic a Link

The key goals for infographics can be solved by our final approach; wrapping the image in a link.

  • Mouse users tend to click on images. Wrapping the image in a link gives them access to the transcript
  • Screen reader users will know there is an image within a link. It’s easy to define the purpose of the link.
  • It’s easy to code and share.
  • Sharing the linked graphic could increase the transcript’s search engine ranking. This provides added incentive towards sharing accessible infographics.

When an image is the sole object within a link, the alternate text should provide a description of the link’s purpose. Further, images that contain text must include the text within the alt attribute. For this complex infographic, the image’s alt text is the transcript’s header.

Linked infographic code


  Mapquest: Make the most of Summer Travel

Disabled World is using this pattern to share their infographic: Disability in America. Their page includes a complex infographic, visible transcript, and the code needed to embed the infographic.

Linked infographic video

This video shows how the samples on this page work with VoiceOver and Safari.

Sample Infographic

Summer Travel infographic

Leave a Reply

Your email address will not be published. Required fields are marked *