HTML Accessibility

Micro-note on aria-roledescription

aria-roledescription is not a label

It is an alternative expression of the Aural UI of the role of an element.

inappropriately using aria-roledescription may inhibit users’ ability to understand or interact with an element.
ARIA 1.1

The wrong way to use aria-roledescription and call out someone as a fascist:

donald trump


<img aria-roledescription="fascist" src="dt.PNG" 
alt="Donald Trump">

This is wrong because you are not identifying the subject of the image as a fascist, you are overwriting the <img> element role so it effectively becomes a <fascist> element. Also, there is no explicit text identification of the subject as a fascist.

A much better way to achieve the aim of identifying a fascist (and not misusing aria-roledescription):

Example of a fascist
donald trump


<figcaption>Example of a fascist</figcaption>
<img src="dt.PNG" alt="Donald Trump">

6 replies on “Micro-note on aria-roledescription”

Leave a Reply

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