Is an aria-label necessary on icon fonts with additional context?

Question

Given the following code, which is an error message on an invalid field entry:

<i class="attention" aria-label="alert">Please enter a valid email address.

The icon font is an alert icon (red exclamation in a circle).

Is the aria-label on the icon font necessary, or is there enough context for understanding.

Answer 1

The icon is there to draw someones attention to the label, it is not a label itself. The label should speak for itself and doesn’t need an aria-label attribute either.

To quote W3.org:

If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label.

So instead of aria-label you can do something like:

<span class="attention" aria-labeledby="invalid-email-alert"></span>
<i id="invalid-email-alert">
    Please enter a valid email address.
</i>

But I don't think you have to add aria-labeledby to the icon because it has no particular significance over the label. It is clearly meant to draw attention to the label for people who can see and should be ignored by screen readers. To make form validation more accessible you can add a aria-invalid attribute to the input:

<input type="text" name="email" aria-invalid="true" aria-labeledby="invalid-email-alert">

Aria attributes should be used only where they are relevant and are used here to draw attention to the invalid input for screen readers, just as the icon does for people depending on their eyes to scan the page.

Answer 2

Visually impaired users should be aware that error message is displayed on the screen. Alert icon and red color message communicates to visual users that it is an error. But for screen reader users, word error should be part of the message either by including word error directly in the message or using off- screen text

Approach 1:

 <i class="attention" aria-hidden = "true"></i> Error: Please enter a valid email address.

Approach 2:

 <i class="attention" aria-hidden = "true"> </i>
 <span class = "sr-only"> Error: </span> Please enter a valid email address.

Answer 3

For this case consider:

<i class="attention" aria-label="Warning" role="img"></i>

If the element is inside a focusable element consider move the aria-label to this element

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

In your specific case, I will go for aria-hidden:"true" since this icon doesn't provide extra information. But if you are adding extra info like an error icon, you should notify the user that is the statement is an error.

For more information about this:

https://developer.paciellogroup.com/blog/2017/07/short-note-on-aria-label-aria-labelledby-and-aria-describedby/

This is information came from a thread opened after I read these questions an all answers. Here is the link to the thread with other examples: https://webaim.org/discussion/mail_message?id=40331 Thanks from the answers Patrick and Birkir.