WebAIM - Web Accessibility In Mind

E-mail List Archives

Icons and aria-label

for

From:
Date: Jun 20, 2019 12:47PM

Hi!!!

I am working in a project were we use Icons for different proposes.

In an alert to show a warning icon:

*<i class="fa fa-warning" aria-label="Warning - "></i> My message*


In a list of resources to show the resource type:

*<i class="fa fa-warning" aria-label="PDF"></i> My resource*


Or in a scenario that reinforces the message:

*<button><i class="fa fa-close" aria-hidden="true"></i> Close</button>*


Or more complex situations

<div aria-label="4 out of 5 ratings">
* <i class="fas fa-star"></i>*
* <i class="fas fa-star"></i>*
* <i class="fas fa-star"></i>*
* <i class="fas fa-star"></i>*
* <i class="fa fa-star"></i>*

*</div>*

The question is, It is this the usage of aria-label correct here? Should I
use another mechanism?

I am checking this with different screen reader and looks correct but then
I ended with this question in UX StackExchange that made me doubt.

https://ux.stackexchange.com/questions/85426/is-an-aria-label-necessary-on-icon-fonts-with-additional-context

Also, anyone has preferences between:

*<button><i class="fa fa-close" aria-label="Close"></i></button>*

and

*<button><i class="fa fa-close" aria-hidden="true"></i> <span
class="sr-only">Close</span></button>*

being sr-only the typical class to show content in a screen reader but not
in visual outputs.


Thanks!!!