aria-description
is the ARIA attribute you wanted, it makes adding a description (for screen reader users ONLY) so much simpler.
The
aria-description
attribute is similar toaria-label
in 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