装饰图标字体可访问性

如何解决装饰图标字体可访问性

对于装饰图标字体和其他适用的组件，使用 aria-hidden="true" 和使用 role="img" alt=""有区别吗

解决方法

是的，有区别，但不是很大。

aria-hidden="true" 会将其从可访问性树中完全删除。

role="img" alt="" 仍会将其作为装饰图像添加到可访问性树中。 （好吧，如果我们是技术人员，则图像没有 alt 描述 - 它不会被读出，而这正是我们关心的）

现在这不会对大多数屏幕阅读器用户造成问题。但一些屏幕阅读器用户可能会使用具有非常高详细设置（读取多少细节）的屏幕阅读器。

在这种情况下，实际上可能使用 role="img" 将图像读出为“图像，无描述”。

这是一种边缘情况，但需要考虑。

作为一个额外的想法 - support for role="img" may not be so great（这方面的数据不多）

我会鼓励使用 aria-hidden="true" 并且也许添加 role="presentation" 作为支持有利于作为一个很好的后备。