跳过至内容
Font Awesome 文档
欢迎 Web Awesome，最大最好的开源 web 组件库。
今天预订！

无障碍

图标可以传达各种有意义的信息，因此它们能够接触到尽可能多的人非常重要。

Font Awesome 图标和无障碍

有相当一部分人存在视力和听力障碍：失明、弱视和视觉障碍占世界总人口的近 10%，而致残性听力损失占世界总人口的 5% 以上。

因此，确保支持残疾的技术，如屏幕阅读器，要么忽略，要么更好地理解您在网络上使用的图标至关重要。

图标在网站、应用程序和其他数字场所中以两种方式使用…

图标使用操作方法
装饰性元素如果您使用图标来添加一些额外的装饰或品牌，则无需向用户宣布它们，因为它们正在通过声音方式导航您的网站或应用程序。

此外，如果您使用图标在视觉上重新强调或添加已存在于 HTML 中的内容的样式，则无需将其重复到使用辅助技术的用户。

在这些情况下，应将图标从屏幕阅读器中隐藏，以免干扰已建立的含义。
语义元素当您使用图标来传达含义时，您需要确保通过提供基于文本的替代文本，将此含义也传达给用户。

这适用于您通过图标缩写的內容（例如购物车的状态、未读消息的数量等），以及交互式控件（例如按钮、表单元素、切换等）。

使用自动无障碍功能使图标可访问

支持可访问图标的最简单方法是使用 Font Awesome 网络软件中包含的自动无障碍功能。以下是它的工作原理…

用作装饰性元素的图标

自动无障碍功能将确保 装饰性 图标被辅助技术忽略。除了您通常引用图标的方式之外，您不需要做任何额外的事情。

如果您的标记如下所示

<button type="submit">
  <span class="fa-solid fa-envelope"></span> Email Us!
</button>

自动无障碍功能将通过添加 aria-hidden 属性自动将其从屏幕阅读器中隐藏。虽然结果相同，但 Font Awesome 的网站字体或基于 SVG 的软件渲染的代码不同。

<button type="submit">
  <span class="fa-solid fa-envelope" aria-hidden="true"></span> Email Us!
</button>

用作语义元素的图标

自动无障碍功能将使用您需要使用 title 属性设置的描述为 语义 图标创建备用文本。

因此，如果您的标记如下所示（您的 title 属性包含适当的备用文本）

<button type="submit">
  <i class="fa-solid fa-arrow-right" title="Next Page"></i>
</button>

自动无障碍功能将对其进行调整，以便在仅屏幕阅读器“看到”的支持元素中传达含义。同样，虽然结果相同，但 Font Awesome 的网站字体或基于 SVG 的软件会渲染不同的代码。

<button type="submit">
  <i class="fa-solid fa-arrow-right" title="Submit My Tax Return" aria-hidden="true"></i>
  <span class="sr-only">Submit My Tax Return</span>
</button>

何时可以使用自动无障碍功能？

自动无障碍功能包含在 Font Awesome 的许多基于网络的软件选项中。尽管并非所有情况下都包含它，但在那些情况下，您始终可以手动使您的图标可访问。

实现方法包含？默认情况下启用？
Vue.js 组件
React 组件
Ember 组件
Angular 组件
套件托管 SVG + JS
自行托管 SVG + JS
套件托管 网站字体（通过 JS 加载）
套件托管 网站字体（通过 CSS 加载）
自行托管网站字体（通过 JS 加载）
自行托管网站字体（通过 CSS 加载）
SVG 雪碧图
SVG 统一码
纯 SVG

手动使图标可访问

在自动无障碍功能不可用或您希望自行实施最佳实践的情况下，您可以使用以下说明，使您的图标尽可能地对所有人可访问。

用作装饰性元素的图标

如果您的图标纯粹是装饰性，则需要手动将 1 或 2 件事设置到图标的代码段中，以确保屏幕阅读器和辅助技术在向人朗读页面时忽略它们。

网站字体实现SVG 实现
1. 在图标中添加 aria-hidden="true" 属性。1. 在 <svg> 元素中添加 aria-hidden="true" 属性
2. 在 <svg> 元素中添加 role="img"
<!-- Decorative Web Fonts-based Icon -->
<i class="fa-solid fa-camera-retro" aria-hidden="true"></i>

用作语义元素的图标

如果您的图标具有语义 含义，您需要手动添加一些内容，以确保您的图标具有适当的可访问性

网站字体实现SVG 实现
1. 在图标中添加 aria-hidden="true" 属性。1. 在 <svg> 元素中添加适当的角色 (role="img")。
2. 在 <span>（或类似）元素中提供备用文本，该元素是图标的同级元素。2. 在 <svg> 元素中添加具有适当 id 属性的 title 元素。
3. 包含适当的 CSS 以视觉上隐藏元素，同时保持其对辅助技术的可访问性。3. 在 <svg> 元素中添加 aria-labelledby 属性，并将其值设置为与新添加的 title 元素的 id 相匹配。
4. 包含适当的 CSS 以视觉上隐藏元素，同时保持其对辅助技术的可访问性。
<a href="https://twitter.com/fontawesome">
  <!-- Semantic Web Fonts-based Icon -->
  <i aria-hidden="true" class="fa-brands fa-twitter"></i>
  <span class="fa-sr-only">The Font Awesome teams' Twitter account</span>
</a>

注重无障碍的样式实用程序

为了帮助进行任何手动可访问性工作，Font Awesome 的网络软件包含一些基于最佳实践的样式实用程序。这些有助于在视觉上隐藏元素，同时保持其对辅助技术的可访问性。

类详情
fa-sr-only在视觉上隐藏包含图标文本等效物的元素，同时保持其对辅助技术的可访问性
fa-sr-only-focusable与 fa-sr-only 结合使用，以便在元素获得焦点时（例如，由仅使用键盘的用户）再次显示元素

在可聚焦的交互式元素的情况下，有多种选项可以将备用文本或标签包含到元素中，而无需任何视觉上隐藏的 <span> 或类似元素。例如，只需在交互式元素本身中添加带有文本描述的 aria-label 属性就足以提供元素的可访问备用名称。如果您需要在鼠标悬停/聚焦时提供视觉工具提示，我们建议另外使用 title 属性或自定义工具提示解决方案。

动画图标和无障碍

Font Awesome 在我们的支持样式中捆绑了基本动画。这些动画现在支持并利用 prefers-reduced-motion CSS 媒体功能 来检测用户是否已请求系统最小化其使用的非必要运动量。

情况对包含动画的影响
未设置首选项（默认）动画将按预期渲染
首选项设置为 reduce动画将被禁用

当 prefers-reduced-motion 设置为 reduce 时，用户更喜欢页面上的运动更少，以帮助减轻前庭运动障碍和其他运动敏感性带来的不适。

其他情况和信息

虽然此处的情况和技术有助于避免一些严重的问题和混淆，但它们并非详尽无遗。

在可访问性方面，存在许多复杂的环境和用例，例如低视力用户需要高对比度比才能看到 UI。这里有一些很好的工具和资源，可以供您学习和解决这些问题。以下是一些我们推荐的读物

我们会继续在更广泛的可访问性主题下进行这些工作，但在此期间，如果您遇到任何错误或问题，请告诉我们。