无障碍思想

Refreshing...Saving. Hang tight!

Battery level: 50%

考虑到我们对图标可访问性的想法，如果图标仅添加了一些额外的装饰或品牌，则无需在用户浏览您的网站或应用程序时向用户宣布该图标。或者，如果图标在您的内容或界面中传达了含义，请确保也通过替代显示或文本将这一含义传达给辅助技术。

<a class="btn btn-default" href="path/to/settings" aria-label="Settings">
  <i class="fa fa-cog" aria-hidden="true"></i>
</a>
<a class="btn btn-danger" href="path/to/settings" aria-label="Delete">
  <i class="fa fa-trash-o" aria-hidden="true"></i>
</a>
<a class="btn btn-primary" href="#navigation-main" aria-label="Skip to main navigation">
  <i class="fa fa-bars" aria-hidden="true"></i>
</a>

<i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>
<span class="sr-only">Refreshing...</span>
<i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i>
<span class="sr-only">Saving. Hang tight!</span>

<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
  <input class="form-control" type="text" placeholder="您的邮箱地址">
</div>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
  <input class="form-control" type="password" placeholder="请输入密码">
</div>

<a href="path/to/shopping/cart" class="btn btn-primary" aria-label="View 3 items in your shopping cart">
  <i class="fa fa-shopping-cart" aria-hidden="true"></i>
</a>

<i class="fa fa-battery-half" aria-hidden="true"></i>
<span class="sr-only">Battery level: 50%</span>