Icon accessibility within links (aria-hidden)

Question

Suppose I have two arrows on either end of a carousel which when clicked rotate the carousel. I might have markup like:

<a class="carousel-prev" alt="Previous Item"><i class="icon-angle-left" aria-hidden="true"></i></a>
<a class="carousel-next" alt="Next Item"><i class="icon-angle-right" aria-hidden="true"></i></a>

In this case, does aria-hidden="true" attribute break accessibility, or is it okay since the outer <a> tag is tabbable and is using alt text?

Answer 1

Why not just have an aria-label on the anchor tag? Should be a simple matter of changing your alt= to aria-label=. No need to have a nested span with a screen reader class.

<a class="carousel-prev" aria-label="Previous Item"><i class="icon-angle-left" aria-hidden="true"></i></a>
<a class="carousel-next" aria-label="Next Item"><i class="icon-angle-right" aria-hidden="true"></i></a>

It's valid html. Look at the "Allowed ARIA state and property attributes" section of https://www.w3.org/TR/html51/textlevel-semantics.html#the-a-element . All aria tags are allowed.

Answer 2

the alt attribute is not a valid attribute for links, so it not only is an accessibility concern but it is also invalid html. See this stackoverflow post if you want to read more: Is it correct to use alt tag for an anchor link?

I would recommend removing the alt from the link and instead include a "screenreader-only" class that will allow the text to be read but hidden from the screen. See this link from a11yproject.com on how to implement this:

http://a11yproject.com/posts/how-to-hide-content/

I would recommend altering the code to look like this:

 .sr-only { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); padding:0 !important; border:0 !important; height: 1px !important; width: 1px !important; overflow: hidden; } 

 <a class="carousel-prev"><span class="sr-only">Previous Item</span><i class="icon-angle-left" aria-hidden="true"></i></a> <a class="carousel-next"><span class="sr-only">Next Item</span><i class="icon-angle-right" aria-hidden="true"></i></a> 

Answer 3

First, the WAI provides a full example of a working carousel: https://www.w3.org/WAI/tutorials/carousels/

Some personal observations:

1. You have to ask yourself about the interest of rotating a carousel for a blind user. One way to handle UX for blind users is to make them ignore that what they are browsing is a carousel (switching items automatically as the keyboard focus move for instance).

2. aria-hidden does not break the accessibility because there's nothing inside the i tag, tag which is not designed to be used as a portmanteau tag (like span ).

3. As pointed out by @DiscoInfiltrator alt is not a valid attribute for links

4. As a small part of visually impaired users use screenreaders, you should use the title attribute on the a tag in order to make this information accessible for everyone rather than the aria-label which is also a good alternative.