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.
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 thearea-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