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


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.

Leave a Reply to Brennan Young Cancel reply

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