Access

图标是可以传送大量信息，真正帮助人们理解的方向，标志和符号的接口。我们创建和使用他们，使他们能达到的人最大可能的量是很重要的。

#关于图标字体和无障碍浏览

辅助技术的现代版本，像屏幕阅读器将读取CSS生成的内容（真棒图标字体怎么渲染），以及具体的Unicode字符。当我们读取的标记的默认渲染图标，assisistive技术可能存在以下问题。

辅助技术可能无法找到任何内容读出给用户。
辅助技术可以读取等的Unicode，这不能匹配什么图标上下文意思，或者更糟糕的是只是普通的困惑。

#手动让你的图标易于访问

当使用在你的UI图标，还有手工技术和方法，以帮助辅助技术忽略或更好地了解字体真棒。

#用于纯粹的装饰或视觉样式图标

如果您使用的图标添加一些额外的装饰或品牌，它并不需要，因为它们是浏览您的网站或应用程序听觉公布给用户。此外，如果您使用的是视觉上的图标再次强调或添加样式到内容已经出现在你的HTML，它并不需要重复一个辅助利用技术用户。您可以确保这不是通过添加aria-hidden="true"将你的字体真棒标记读取。

<!-- 一个图标被用来作为纯粹的装饰 -->
<i class="fa fa-fighter-jet" aria-hidden="true"></i>

<!-- 一个被用作LOGO图标 -->
<h1 class="logo">
<i class="fa fa-pied-piper" aria-hidden="true"></i>
一个中等输出压缩解决方案使数据存储更小的问题。
</h1>

<!-- 一个用于超链接文字前的图标 -->
<a href="https://github.com/FortAwesome/Font-Awesome">
  <i class="fa fa-github" aria-hidden="true"></i> View this project's code on Github
</a>

#语义或交互的目的图标

如果你使用一个图标来传达的含义（而不是仅仅作为一种装饰元素），确保这个意义也会给辅助技术。这同样适用于您通过缩略的图标内容以及交互式控制（按钮，表单元素，切换等）。有几个技术来实现此目的：

#如果图标不是一个交互元件

提供替代文本的最简单方法是使用 aria-hidden="true" 属性上的图标，并包括一个额外的元素中的文本，比如一个 <span>, 与相应的CSS在视觉上隐藏的元素，同时保持它访问辅助技术。此外，您可以在图标添加一个title属性，为短视的鼠标用户的工具提示。

<!-- 一个被用于通信方式的图标 -->
<dl>
  <dt>
    <i class="fa fa-car" aria-hidden="true" title="Time to destination by car"></i>
    <span class="sr-only">Time to destination by car:</span>
  </dt>
  <dd>4 minutes</dd>

  <dt>
    <i class="fa fa-bicycle" aria-hidden="true" title="Time to destination by bike"></i>
    <span class="sr-only">Time to destination by bike:</span>
  </dt>
  <dd>12 minutes</dd>
</dl>

<!-- 图标被使用来表示剩余时间 -->
<i class="fa fa-hourglass" aria-hidden="true" title="60 minutes remain in your exam"></i>
<span class="sr-only">60 minutes remain in your exam</span>

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

<i class="fa fa-hourglass-end" aria-hidden="true" title="0 minutes remain in your exam"></i>
<span class="sr-only">0 minutes remain in your exam</span>

#如果一个图标代表一个互动的元素

在可调焦的交互元件的情况下，有不同的选择，包括一个替代文本或标签的元件，而不需要任何视觉上隐藏的<span>或相似。例如，简单地添加aria-label属性与文本说明的交互式元件本身将足以为元件提供可访问的替代名称。如果您需要提供鼠标悬停/焦点视觉提示，建议另外使用title属性或定制提示解决方案。

<!-- 一个图标被用来沟通的购物车状态 -->
<a href="path/to/shopping/cart" aria-label="View 3 items in your shopping cart">
  <i class="fa fa-shopping-cart" aria-hidden="true"></i>
</a>

<!-- 一个图标被用作一个链接到导航菜单 -->
<a href="#navigation-main" aria-label="Skip to main navigation">
  <i class="fa fa-bars" aria-hidden="true"></i>
</a>

<!-- 一个图标被用作一个删除按钮符号与title属性提供了原生的鼠标提示。 -->
<a class="btn btn-danger" href="path/to/settings" aria-label="Delete">
  <i class="fa fa-trash-o" aria-hidden="true" title="Delete this item?"></i>
</a>

#其他信息

虽然这里的场景和技术可以帮助避免一些严重的问题和困惑，他们并非详尽无遗。有很多复杂的情况和用例，当涉及到可访问性，如低视力谁需要一个高色彩对比度看到UI用户。有一些伟大的工具和资源，从学习和处理这些问题在那里。这里有几个读建议。

Accessibility