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
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
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.
Standard Text Link
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
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
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
Linked infographic video
This video shows how the samples on this page work with VoiceOver and Safari.