Jan 4, 2022 1 minute read

ARIA: img role

The ARIA img role can be used to identify multiple elements inside page content that should be considered as a single image.

If you are using embedded SVG images in your page, it is a good idea to set role="img" on the outer <svg> element and give it a label. This will cause screen readers to just consider it as a single entity and describe it using the label, rather than trying to read out all the child nodes: For example:

<svg role="img" aria-label="Description of your SVG image">
  <!-- contents of the SVG image -->
</svg>

Another use of this can be in

<span class="rating" role="img" aria-label="Rating: 3 out of 5 stars">
    <span aria-hidden="true" class="icon-star">★</span>
    <span aria-hidden="true" class="icon-star">★</span>
    <span aria-hidden="true" class="icon-star">★</span>
    <span aria-hidden="true" class="icon-star-empty">☆</span>
    <span aria-hidden="true" class="icon-star-empty">☆</span>
</span>