Question

aria-hidden在fontAwesome中的作用是什么？有必要使用它吗？为什么？或者为什么不呢？

例如，我想知道aria-hidden="true"在下面代码中的效果

<i class="fa fa-star" aria-hidden="true"></i>

请帮帮我。

Answer 1

简而言之，它使图标对屏幕阅读器不可见，以增强可访问性。

来自the documentation：

如果您使用图标添加一些额外的装饰或品牌，则无需向用户宣布，因为他们正在浏览您的网站或应用。此外，如果您使用图标对HTML中已存在的内容进行视觉上重新强调或添加样式，则无需向使用辅助技术的用户重复该图标。您可以通过添加aria-hidden =＆＃34; true＆＃34;来确保无法读取此内容。你的Font Awesome标记。

Answer 2

如果您使用图标添加一些额外的装饰或品牌，那么不需要在用户导航时向用户公布网站或应用程序听觉。此外，如果您在视觉上使用图标重新强调或添加样式到HTML中已存在的内容，它不需要重复使用辅助技术的用户。您可以通过添加aria-hidden =＆＃34; true＆＃34;来确保无法读取此内容。至你的Font Awesome标记。

<i class="fa fa-fighter-jet" aria-hidden="true"></i>

用作纯装饰的图标

<h1 class="logo">
  <i class="fa fa-pied-piper" aria-hidden="true"></i>
  Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller
</h1>

用作徽标的图标

来源：http://fontawesome.io/accessibility/

aria-hidden在fontAwesome中的效果

2 个答案: