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?
aria-hidden="true"
attribute applied to the<i>
elementaria-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>