Connect with aria-labelledby

The ARIA coding standard was developed to solve accessibility issues discovered while the web transformed from documents to applications. ARIA uses a series of pre-defined attributes to provide information to the user about an object on the page. ARIA attributes pass information to the user agent about an object’s role, state, or properties.

aria-labelledby

Bridge as a metaphor for aria-labelledby

Paris Bridge by Ted Drake, on Flickr

The aria-labelledby attribute allows the developer to connect an object with a label. While it’s intended to be used for forms, this attribute has been suggested as a potential solution for infographic accessibility. The content within the container identified by the aria-labelledby attribute will replace the alt attribute on an image.

The aria-labelledby attribute is used to indicate the IDs of the elements that are the labels for the object. It is used establish a relationship between widgets or groups and their labels. Users of assistive technologies such as screen readers typically navigate a page by tabbing between areas of the screen. If a label is not associated with an input element, widget or group, it will not be read by a screen reader.

aria-labelledby is very similar to aria-describedby: a label describes the essence of an object, while a description provides more information that the user might need.
Using the aria-labelledby attribute – Mozilla Developer Network

Pros and Cons of Using aria-labelledby

There are distinct advantages and disadvantages to using the aria-labelledby attribute. Its usefulness may be decided by the complexity of your infographic.

Advantages

  • The descriptive content will be read immediately, as it is replacing the alt attribute.
  • The screen reader does not require the user to interact with the image.
  • The transcript is treated as the alternate text of the image, not as a description. This may be more natural for simpler infographics.
  • The important content is not “hidden” from the average user, which is an argument against longdesc.
  • It’s easy to understand and program.

Disadvantages

  • Alternate text guidelines suggest a 100 – 150 character limit. Large infographic transcripts may not be supported.
  • Users expect the alternate text to be a short description of the image. Connecting a large transcript could be disconcerting
  • The aria-labelledby attribute definition does not suggest using this for images. Browser/screen reader support may be inconsistent.
  • The text is announced as a text string. Users are not able to navigate within the transcript and the semantic structure of the transcript is ignored.
  • The description must be on the same page as the image. This requires duplication of content when an description could be used by images on multiple pages.
  • The description must be included with the image when shared via social media

Implementing aria-labelledby

The aria-labelledby attribute is easy to implement. It requires an id on the transcript’s container and matching that id with the aria-labelledby attribute.

The infographic on this page points to a div that has been hidden visually. This div also uses aria-hidden="true" to reinforce the hidden nature of this content. Further, the content is hidden with display:none, which removes the content’s links from the natural tab flow.

You don’t have to hide the content, but making it visible AND connecting with aria-labelledby may be redundant and confusing.

Summer Vacation Infographic

The Infographic

This complex infographic describes summer travel options. It’s filled with information that we can easily describe with basic HTML.

For an alternate version, view this infographic with the longdesc attribute

Summer Vacation Infographic

The hidden information

The following div is completely hidden with the display:none and visibility:hidden as described in Clip your hidden content for better accessibility by Thierry Koblentz. It includes the infographic’s transcript. This hidden content will be announced by the screen reader via the aria-labelledby attribute.

Resources

This infographic and description are also available on a simpler page aria-labelledby for image and transcript on same page.

Leave a Reply

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