<i>嵌套在<a> element - does it require aria-label and aria-hidden attributes?

Question

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?

中

1. aria-hidden="true"属性已应用于<i>元素

2. aria-label="Click to view Shopping Bag"已应用于<a>元素

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

编辑版：

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

Answer 1

一个链接，上面写着＆＃34;购物袋＆＃34;尽管它很清楚。 ＆＃34;点击查看购物袋＆＃34;将是镇流器。通常没有必要说＆＃34;点击查看＆＃34;如果它是一个正确标记的链接。

如果通过CSS包含图标（作为装饰），并且HTML元素（用作挂钩）为空，则不需要使用任何WAI-ARIA。虽然aria-hidden状态用于隐藏来自所有用户的内容（不仅来自使用例如屏幕阅读器的用户），但该规范例外情况＆＃34;如果隐藏此内容的行为旨在改进对辅助技术用户的体验＆＃34;。但是，空元素根本不应该影响用户（没有＆＃34;内容＆＃34;开头），因此此异常可能不适用于此。

但你应该use span instead of i。