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


2 replies 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.

We’re working on changing this, so that both aria-description and aria-describedby will work in all contexts, on all elements, even those without roles, aka “all elements of the base markup”.

The browsers have implemented this already, except within Mac support, because there hasn’t been a way to do it.

What’s going to take time to catch up is the screen reader experience. Screen readers are working to change their code, but it will take time for all of this to arrive in the hands of users, especially when paid upgrades are required.

Leave a Reply

Your email address will not be published.