In the realm of web accessibility, providing comprehensive context for images is crucial. While the alt attribute offers a concise text alternative, there are instances where a more detailed explanation is necessary. This is where the aria-description attribute shines. This attribute, a part of the WAI–ARIA (Accessible Rich Internet Applications) suite, allows developers to provide an extended description for an image. Using it enhances accessibility for users with visual impairments. It is simple to use, requiring just an HTML element and a related HTML attribute.
Why and how to use aria–description
The primary purpose of aria-description is to supplement the alt attribute, not replace it. The alt attribute should remain a short, functional description of the image’s content. When an image contains complex information, such as charts, diagrams, or intricate artwork, a simple alt text may not suffice. In such cases, aria-description might be a suitable alternative if a longer description in an aria-describedby attribute is unnecessary, or there is no suitable descriptive element available.
The aria-description attribute accepts text directly inserted into the attribute to describe the image. Screen readers can then access this content, providing users with a richer understanding of the image.
For example:
<img src="complex_chart.png" alt="Sales data chart" aria-description="This chart displays sales data over the past year, identifying the record sales in March.">
Benefits of aria-description
- Enhanced accessibility
The most significant benefit is improved accessibility for users who rely on screen readers. By providing context, developers ensure that these users can fully comprehend the image’s information. - Contextual clarity
Some images require further explanation for comprehension. aria-description provides the means to deliver this context without cluttering the main content or providing an additional element. - SEO considerations
While not a direct Search Engine Optimisation (SEO) ranking factor, providing thorough descriptions can improve the overall quality of content, which search engines value. Additionally, well–described images can be indexed more effectively by search engines. - User engagement
Providing comprehensive context can increase user engagement, especially for images that are central to the content’s message.
aria–description vs. aria–describedby and longdesc
Historically, longdesc has had a pretty long run at being the main descriptive attribute for images on the internet. It was first introduced in HTML 4.0 in 1997 and was finally marked “obsolete” with the introduction of HTML 5 in 2008. This emphasised the inconsistent browser and screen reader support for the attribute. Despite this, it has become an HTML 5 extension, currently with Recommended Candidate status. So, it’s future is unclear and inconsistent.
On the other hand, aria-describedby is an attribute that has become as useful as aria-description. In our sister article, which describes the use of aria-describedby, we examine the usefulness of this attribute where the description of the image is necessarily longer. For complex images, charts, and infographics it might make more sense to use aria-describedby than aria–description.
Conclusion
The aria-description attribute is an essential tool for developers who prioritise accessibility. By providing detailed descriptions for images, developers can ensure that all users, regardless of their visual abilities, can fully understand and engage with the content. Embracing aria-description contributes to a more inclusive and accessible web. When it is used logically and intelligently alongside aria-describedby, it provides a powerful combination to enhance user experience.
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
aria-describedby: contextualising images
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.
