aria-description is the ARIA attribute you wanted, it makes adding a description (for screen reader users ONLY) so much simpler.
The
aria-descriptionattribute is similar toaria-labelin that both provide a flat string to associate with the element, but a label should be concise, whereas a description is intended to provide more verbose information.source: ARIA 1.2
Vibes
The good vibes about aria-description is that once implemented in the browser it will automatically have the same level of support as aria-describedby as they are both the source of text for the accessible description property in accessibility APIs In fact it’s already implemented in Firefox/Chrome/Edge on Windows (and other platforms too with Firefox) and is announced by screen readers, you can try it for yourself:
See the Pen
aria-description tests by steve faulkner (@stevef)
on CodePen.
The bad vibes the accessible description content is, currently, only announced on a subset of roles/elements; such as interactive elements. So do not ass-u-me that your aria-description/aria-describedby will be announced on a <span> for example.
ALL Times
Think really REALLY carefully about whether screen reader only content of any type is really REALLY needed. Ask yourself could the content I am going to hide away from many people actually be useful to them?? Of course there are contexts where content for assistive technology users is both appropriate and essential to understanding:
<img alt="Neon Meat Dream of an Octofish"> comes to mind
Now
To provide a screen reader only description an element with the text needs to be added, associated with the element using aria-describedby and then hidden:
<a href="help.html" aria-describedby="help1">HELP</a> <div hidden id="help1"> We can help you with a range of problems</div>
Future
To provide a screen reader only description for an element add it directly to the element:
<a href="help.html" aria-description="We can help you with a range of problems"> HELP</a>
Be Pithy
#ARIA be pithy ??
aria-label: a word or phrase is better than a sentence
aria-describedby: a sentence is better than a paragraph#a11y— Steve Faulkner (@stevefaulkner) February 8, 2021
Further reading
Pump it Up
One reply on “aria-description: By Public Demand and to Thunderous Applause”
The real value of aria-description is that it offers a way to ‘tag’ or annotate an element *without* hacking the accessible name.
Concrete examples:
A notification widget on a social media site will typically include a small overlay with a number inside, showing how many unread/unseen notifications there are. The aria-label is “notifications”, whereas the notification *count* may be offered via aria-description, and kept in sync as new posts appear.
A set of navigation links which must be completed in a given order. Some of them are ‘locked’ because the earlier steps have not yet been completed. The “locked” state is expressed via aria-description
A list of products in an e-commerce site includes an icon indicating that the item is on sale at a discounted price. This label (including the non-discounted price, and/or a percentage reduction) is expressed via aria-description.