可访问性

让您的图标对所有用户都很棒

图标是可以传达大量信息并真正帮助人们理解标志和界面的符号。我们创建和使用它们非常重要,这样它们才能覆盖尽可能多的人。

关于图标字体和可访问性

辅助技术的现代版本,如屏幕阅读器,将读取CSS生成的内容(如何呈现Font Awesome图标),以及特定的Unicode字符。在阅读我们用于渲染图标的默认标记时,辅助技术可能会出现以下问题。

  • 辅助技术可能找不到任何要读给用户的内容
  • 辅助技术可能会读取等效的unicode,这与图标在上下文中的含义无法匹配,或者更糟糕的是只是简单的混淆

手动使您的图标可访问

在UI中使用图标时,有手动技术和方法来帮助辅助技术忽略或更好地理解Font Awesome。

用于纯装饰或视觉造型的图标

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

<iclass="fa fa-fighter-jet"aria-hidden="true"></i>
一个图标被用作纯粹的装饰
<h1class="logo">
  <iclass="fa fa-pied-piper"aria-hidden="true"></i>
  Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller
</h1>
用作Logo的图标
<ahref="https://github.com/FortAwesome/Font-Awesome"><iclass="fa fa-github"aria-hidden="true"></i> View this project's code on Github</a>
在链接文本前面使用的图标

具有语义或交互目的的图标

如果您使用图标来传达意义(而不仅仅是作为装饰元素),请确保将此含义传达给辅助技术。这适用于您通过图标以及交互式控件(按钮,表单元素,切换等)缩写的内容。有几种技术可以实现这一目标:

如果图标不是交互元素

提供文本替代的最简单方法是使用aria-hidden="true"图标上的属性,并在文本中包含一个附加元素(如a)<span>,并使用适当的CSS在视觉上隐藏元素,同时使辅助技术可以访问该元素。此外,您可以title在图标上添加属性,为有视力的鼠标用户提供工具提示。

<dl><dt><iclass="fa fa-car"aria-hidden="true"title="Time to destination by car"></i><spanclass="sr-only">Time to destination by car:</span></dt><dd>4 minutes</dd>

  <dt>
    <iclass="fa fa-bicycle"aria-hidden="true"title="Time to destination by bike"></i>
    <spanclass="sr-only">Time to destination by bike:</span>
  </dt>
  <dd>12 minutes</dd>
</dl>
用于传达旅行方法的图标
<iclass="fa fa-hourglass"aria-hidden="true"title="60 minutes remain in your exam"></i>
<spanclass="sr-only">60 minutes remain in your exam</span>

<iclass="fa fa-hourglass-half"aria-hidden="true"title="30 minutes remain in your exam"></i>
<spanclass="sr-only">30 minutes remain in your exam</span>

<iclass="fa fa-hourglass-end"aria-hidden="true"title="0 minutes remain in your exam"></i>
<spanclass="sr-only">0 minutes remain in your exam</span>
用于表示剩余时间的图标

如果图标表示交互元素

在可聚焦的交互元素的情况下,存在各种选项以包括元素的替代文本或标签,而不需要任何视觉上隐藏<span>或类似的。例如,简单地将aria-label具有文本描述的属性添加到交互元素本身就足以为元素提供可访问的替代名称。如果您需要在鼠标悬停/焦点上提供可视化工具提示,我们建议另外使用title属性或自定义工具提示解决方案。

<ahref="path/to/shopping/cart"aria-label="View 3 items in your shopping cart">
  <iclass="fa fa-shopping-cart"aria-hidden="true"></i>
</a>
用于沟通购物车状态的图标
<ahref="#navigation-main"aria-label="Skip to main navigation">
  <iclass="fa fa-bars"aria-hidden="true"></i>
</a>
一个图标,用作导航菜单的链接
<aclass="btn btn-danger"href="path/to/settings"aria-label="Delete">
  <iclass="fa fa-trash-o"aria-hidden="true"title="Delete this item?"></i>
</a>
一个图标,用作删除按钮的符号,带有一个title属性,用于提供本机鼠标工具提示

虽然这里的场景和技术有助于避免一些严重的问题和混乱,但它们并非详尽无遗。在可访问性方面有许多复杂的上下文和用例,例如低视力用户需要高色彩对比度来查看UI。有一些很棒的工具和资源可供学习和解决这些问题。以下是我们推荐的一些读物。