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?

score 2 · Answer 1 · answered Nov 04 '16 at 20:57

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.

score 2 · Answer 2 · answered Nov 05 '16 at 07:21

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

Some personal observations:

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).
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).
As pointed out by @DiscoInfiltrator alt is not a valid attribute for links
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.

score 1 · Answer 3 · edited May 23 '17 at 12:24

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>

Icon accessibility within links (aria-hidden)

3 Answers3