<i> 嵌套在 <a> 元素中 - 它是否需要 aria-label 和 aria-hidden 属性？

Question

对于以下标记，是否应将<i> 元素重构为以下 HTML 以使其更易于辅助技术（如屏幕阅读器）访问？

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

显示“购物袋”的链接非常清楚。 “点击查看购物袋”将成为镇流器。如果它是正确标记的链接，通常说“点击查看”是没有意义的。

如果您通过 CSS 包含图标（作为装饰），而 HTML 元素（用作挂钩）为空，则无需使用任何 WAI-ARIA。虽然aria-hidden 状态用于向所有用户隐藏内容（不仅来自使用例如屏幕阅读器的用户），但规范规定了一个例外，“如果隐藏此内容的行为旨在改善辅助用户的体验技术”。但是，一个空元素根本不应该影响用户（没有“内容”开头），所以这个例外在这里可能不适用。

不过，你应该use span instead of i。