Connect with aria-describedby

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-describedby

The aria-describedby attribute allows the developer to connect an object with a chunk of content that provides additional information. This is commonly used to connect an invalid form input with its error message. The ability to connect an image with its description via aria-describedby has been used as an argument for deprecating the longdesc attribute.

The content declared by the aria-describedby does not replace the alternate text. It is announced in addition to the alternate text. It may be easier to think of the aria-describedby attribute as the title attribute.

The content targeted by the aria-describedby attribute may be hidden or visible. However it must be on the same page as the image.

Pros and Cons of Using aria-describedby

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

Advantages

• Placing the descriptive content on the same page as the infographic increases the SEO of the page.
• The screen reader does not require the user to interact with the image; it will announce the description after the alternate text.
• The aria-describedby attribute is well supported by screen readers and browsers.
• The important content is not “hidden” from the average user, which is an argument against longdesc.
• It’s easy to understand and program.

Disadvantages

• The description 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
• The screen reader does not require the user to interact with the image, it will announce the description after the alternate text. While this is also listed as an advantage, it forces the user to hear the description every time they visit the image.

Implementing aria-describedby

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

The aria-describedby attribute is used to indicate the IDs of the elements that describe the object. It is used establish a relationship between widgets or groups and text that described them. This is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need.

The aria-describedby attribute is not used only for form elements; it is also used to associate static text with widgets, groups of elements, panes, regions that have a heading, definitions, and more. The Examples section below provides more information about how to use the attribute in these cases.

This attribute can be used with any typical HTML form element; it is not limited to elements that have an ARIA role assigned.

Using the aria-describedby attribute – Mozilla Developer Network

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-describedby may be redundant and confusing.

...

Future: aria-describedat

There is a preliminary specification for aria-describedat, which would allow the image to point to content located on another page. This would allow satisfy one of the longdesc features. This attribute is not yet finalized.

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

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-describedby attribute.

Resources

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

• Long Description Example 2: Using aria-described by to point to a show/hide button
• aria-describedby – an argument against replacing longdesc with aria-describedby
• aria-describedby specification – WAI ARIA Supported States and Properties
• WAI-ARIA Primer 1.0
• Use ARIA To Define Invalid Responses For Form Inputs – Yahoo! Developer Network