3

For the following piece of markup should the <i> element not be refactored to be the following HTML to make it more accessible for assistive technologies, like screen readers?

Shopping Bag

  1. aria-hidden="true" attribute applied to the <i> element

  2. aria-label="Click to view Shopping Bag" applied to the <a> element

<a href="http://www.cottontraders.com" class="mini" title="Click to view Shopping Bag">
    <span class="show-for-xlarge-up">Shopping Bag</span> (<span id="updateItems" class="js-updateItems minicart-items-number">0</span>)
    <span class="load-spin">
        <i class="ct-shopping-bag"></i>
    </span>
    <span class="text-deco">
        <span class="minicart-total">
            <span id="updateTotal" class="js-updateTotal">£0.00</span>
        </span>
    </span>
</a>

Edited version:

 <a href="http://www.cottontraders.com" aria-label="Click to view Shopping Bag" class="mini" title="Click to view Shopping Bag">
        <span class="show-for-xlarge-up">Shopping Bag</span> (<span id="updateItems" class="js-updateItems minicart-items-number">0</span>)
        <span class="load-spin">
            <i class="ct-shopping-bag" aria-hidden="true"></i>
        </span>
        <span class="text-deco">
            <span class="minicart-total">
                <span id="updateTotal" class="js-updateTotal">£0.00</span>
            </span>
        </span>
    </a>
Cave Johnson
  • 6,499
  • 5
  • 38
  • 57
user1554264
  • 1,204
  • 3
  • 22
  • 47

1 Answers1

2

A link that says "Shopping Bag" is at clear as it can get. "Click to view Shopping Bag" would be ballast. There is typically no point in saying "Click to view" if it’s a correctly marked up link.

If you include an icon (as decoration) via CSS, and the HTML element (used as hook) is empty, you don’t need to use any WAI-ARIA. While the aria-hidden state is used to hide content from all users (not only from users that use e.g. a screen reader), the spec makes an exception "if the act of hiding this content is intended to improve the experience for users of assistive technologies". However, an empty element should not affect users at all (there is no "content" to begin with), so this exception might not apply here.

You should use span instead of i, though.

Community
  • 1
  • 1
unor
  • 92,415
  • 26
  • 211
  • 360
  • 1
    Yes, with one extra detail: VoiceOver on iOS announces icon-fonts as the mapped letter if they're added as CSS content. If that's what the i element is for, aria-hidden will prevent that. If it's a CSS background image, then it can stay as is. – stringy Mar 06 '17 at 07:30