5

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.

Improve this question
  • 1
    The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. Why are you using the area-label tag to label an icon, its basic purpose is for controls; see the example on this page. Given that, I'd say you shouldn't include it. – Evil Closet Monkey Oct 5 '15 at 21:44
  • Yes it's necessary. For readers who are wondering, ARIA means Accessible Rich Internet Applications. Details at w3.org/TR/wai-aria. Assuming the invalid field entry is for a field that has a label, and the label is visible on screen, the aria-labelledby is recommended over aria-label. The reason to use it is for people who cannot see the icon or cannot see it clearly, so their screen readers can tell them what the icon is. However, you're asking about an icon FONT, and I don't know how well screen readers do when reading fonts that essentially contain graphics. Anyone…? – JeromeR Oct 6 '15 at 8:16
  • 2
    @JeromeR - screenreaders ignore icon fonts, as they don't contain meaningful text or alternate text. So in another example, where we use icon fonts for social icons, we add the aria-label explicitly - aria-label="Share on facebook" – Jason Oct 6 '15 at 18:08
5

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.

Improve this answer
  • Interesting. So you're recommending to leave one object unlabeled because another element on the screen has it covered. I wouldn't be comfortable with leaving a visual element unlabeled so people who are Blind—who else are these labels for?—because it's a visual object that's a sighted person could see is labeled by another object. See what I mean? :) – JeromeR Oct 7 '15 at 9:34
  • @JeromeR That's not what I meant. I recommend not to use aria attributes when they are irrelevant for people who depend on them. The icon is clearly only meant to draw attention to the label for people who can see and should be ignored by screen readers. The aria-invalid attribute is for people who depend on screen readers as what the icon is for people who depend on their eyes to scan a page. – jazZRo Oct 7 '15 at 10:23
0

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.
Improve this answer
0

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.