aria-description is the ARIA attribute you wanted, it makes adding a description (for screen reader users ONLY) so much simpler.
aria-descriptionattribute is similar to
aria-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
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:
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.
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
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>
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>
— Steve Faulkner (@stevefaulkner) February 8, 2021
Pump it Up