无障碍思想

KuaiKan 6月前 77

无障碍思想

     

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>


签名:这个人很懒,什么也没有留下!
最新回复 (0)
返回