The aria-describedby attribute plays a vital role in enhancing web accessibility, particularly when dealing with images that require more than a simple alt text. This attribute, a part of the WAI-ARIA (Accessible Rich Internet Applications) specification, allows web developers to link an image to a separate element containing a detailed description.
Why and how to use aria-describedby
The primary purpose of aria-describedby is to provide extended context for images that are complex or require a more comprehensive explanation than the alt attribute can offer. The alt attribute should remain concise and serve as a brief text alternative for the image’s content. However, when an image represents intricate data, complex diagrams, or detailed artwork, additional information is necessary.
The aria-describedby attribute functions by referencing the id of another HTML element on the page. This referenced element, typically a div or p tag (but it can be any element), contains a detailed description of the image. Screen readers can then access this linked content, providing users with a richer understanding of the image’s information.
Here’s an example of how it is used:
<img src="detailed_diagram.png" alt="Technical diagram" aria-describedby="diagram-description">
<div id="diagram-description">
This diagram illustrates the flow of data through the system...
(detailed explanation).
</div>
Benefits of aria-describedby
- Enhanced accessibility
The most significant benefit is improved accessibility for users who rely on screen readers. By providing detailed context, developers ensure that these users can fully grasp the image’s information. - Improved user experience
For all users, providing comprehensive context can improve the overall user experience, especially when dealing with complex visualisations. - Contextual clarity
Complex images, like infographics or technical diagrams, often demand extensive explanations. aria-describedby provides the means to deliver this context without cluttering the main content. - SEO considerations
While not a direct SEO (Search Engine Optimisation) ranking factor, providing thorough descriptions can improve the overall quality of content, which search engines value. Additionally, crawlers can index well–described images more effectively, leading to better image search results. - Improved readability
When the description is visible to all users, it can greatly improve the readability of the content.
aria-describedby vs. aria-description and longdesc
It’s crucial to understand the differences between aria-describedby and aria-description, and how they relate to the existing longdesc attribute.
aria-describedby links to an existing element on the page, whereas aria-description provides the description directly as an attribute value. aria-description is less widely supported than aria-describedby, and is generally used when providing a short description that does not already exist on the page.
Historically, the longdesc attribute served a similar purpose. The longdesc attribute was first published as part of the HTML 4.0 specification in December 1997 and continued to be a valid part of the specification following the minor update to HTML 4.01 published in 1999. However, longdesc has faced significant browser support issues and accessibility tool inconsistencies. With the publication of the HTML 5 specification in 2008 the longdesc attribute was marked as “obsolete”. Although, W3C later released it as a “recommended extension”. In truth, it seems the W3C has largely deprecated longdesc in favour of aria-describedby, which has far better screen reader and browser support.
Therefore, website owners and developers should carefully consider whether to use the longdesc attribute in modern web development. Relying on aria-describedby ensures better cross–browser compatibility and adherence to current accessibility standards. The modern approach provides better control and more reliable results.
Conclusion
The aria-describedby attribute is an essential tool for developers who prioritise accessibility. By providing detailed descriptions for complex images, developers can ensure that all users, regardless of their visual abilities, can fully understand and engage with the content. Embracing aria-describedby contributes to a more inclusive and accessible web.
Further reading
Redcentaur services: accessibility in web design
The compelling case for website accessibility
The benefits of an accessibility strategy
Website accessibility: a simple guide to stop excluding visitors
The indispensable need for image alt text
Alt text or description: ensuring image accessibility on the web
About the author…
Glenn has been a web developer and graphic designer since the early 1990s. He has followed the development of HTML, JavaScript and CSS from the beginning and has caught on to newer technologies, such as PHP.
Never resting, Glenn tries to keep abreast of new developments in his areas of expertise and is always keen to pass on his knowledge to help the web and graphic design community to improve user experience.
Glenn set up Redcentaur to offer easy access to the internet for small businesses and individuals, without the cloud of mysticism that surrounds internet technology. The stated objective of Redcentaur is to demystify the web for the uninitiated by offering easy-to-use, end-to-end web solutions and hosting at accessible prices.
