带有图标的锚标签的可访问性，其中隐藏 aria = true

Question

我需要在锚元素中使用一个很棒的字体图标。锚元素不包含任何东西，而不是图标。

例如：

<a href="#" aria-label="List">
    <i className="fa fa-list-ul"
        title="List View"
        aria-hidden="true"
        title="List View">
    </i>
</a>

我想知道的是把 aria-hidden="true" 放到图标上是不是错误的，因为锚标签内没有其他文本或内容（在这种情况下，标签变成信息所以我认为在这里使用 aria-hidden="false" 是可以的）。

有没有相关的规则让我们都可以遵守？

Answer 1

您需要考虑两件事：

1. 不使用辅助技术的人（=不依赖 ARIA）

   哪些替代文本会让人们不使用辅助技术？ title 属性应添加到 a[href] 标记中。

   这将有助于认知缺陷的人、视力低下的人、计算机知识差的人理解图标的含义。如果你可以在键盘焦点上显示工具提示，那就太好了。

2. 使用辅助技术的人

   The Fourth rule of ARIA says:

   不要在可见的可聚焦元素上使用 role="presentation" 或 aria-hidden="true"

   在这里完美，只有a[href] 是可聚焦的。这并不妨碍您在 i 元素上添加 aria-hidden 属性，只要您保留 aria-label 以作为辅助技术的有效替代方案。