带有图标的锚标签的可访问性，其中aria hiden = 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]可以集中精力。只要您保留aria-hidden作为辅助技术的有效替代方案，这不会阻止您在i元素上添加aria-label属性。