我想知道使用 Twitter Bootstrap 框架和 FontAwesome 图标字体的屏幕阅读器可访问性。
我正在考虑两种不同的图标情况：
1) 该图标具有屏幕阅读器将拾取的帮助文本：
<a href="#" class="btn btn-default" role="button"><span class="fa fa-pencil"></span> Edit</a>
2) 以及一个没有任何辅助文本的独立图标：
<a href="#" class="btn btn-default" role="button" title="Edit"><span class="fa fa-pencil"></span></a>
理想情况下，在这两种情况下，屏幕阅读器都会宣布该元素是“编辑”按钮。
根据 FontAwesome 的网站：
与其他图标字体不同，Font Awesome 不会干扰屏幕阅读器。
我没有看到任何speech与 FontAwesome 或 Bootstrap 相关的 css 标签，我不太清楚屏幕阅读器将如何对这些情况做出反应。
我也知道aria-hidden和引导程序的.sr-only并且必须有一种理想的方法来处理这两种情况。
编辑：添加title="Edit至示例 2。
使用有什么好处aria-label="Edit"超过标准title="Edit"?
编辑2：我遇到了本文 http://pauljadam.com/blog/javascript/image-text-inside-a-link-accessibility-issues-alt-title-attribute-expandedcollapsed-state-wai-aria-aria-expanded/这解释了不同使用实现的优缺点。
首先，你可能应该使用<button>代替<a href="#">。空链接可能会让屏幕阅读器感到困惑，但按钮就是按钮。简而言之，链接带您去往某个地方，按钮执行操作。 (http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/ http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/; https://ux.stackexchange.com/questions/5493/what-are-the-differences- Between-buttons-and-links https://ux.stackexchange.com/questions/5493/what-are-the-differences-between-buttons-and-links).
我会使用您的第一个代码示例的变体，并利用 Bootstraps.sr-only班级。如果我们更新您的代码button并添加到类中，我们有：
<button type="button" class="btn btn-default"><span class="fa fa-pencil"></span> <span class="sr-only">Edit</span></button>
我们现在有了一个语义上更正确的按钮元素；有视力的用户会看到编辑铅笔图标；屏幕阅读器用户将听到“编辑”。每个人都赢了。
（注意，button代码直接来自Bootstrap CSS 按钮 http://getbootstrap.com/css/#buttons部分。）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
