Categories
HTML Accessibility

aria-description: By Public Demand and to Thunderous Applause

upper torsos and heads of malevolent looking dolls, against a flowery wallpaper background.

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 to aria-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

Further reading

Pump it Up


Leave a Reply

Your email address will not be published. Required fields are marked *