我想知道使用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>
理想情况下，在这两种情况下，屏幕阅读器都会宣布元素是“编辑”按钮。
Per FontAwesome的网站：
与其他图标字体不同，Font Awesome不会绊倒屏幕阅读器。
我没有看到任何与FontAwesome或Bootstrap相关的speech css标签，并且我并不清楚屏幕阅读器如何对这些情况做出反应。
我也知道aria-hidden和Bootstrap的.sr-only，必须有理想的方法来处理这两种情况。
修改：将title="Edit添加到示例2。
使用aria-label="Edit"对标准title="Edit"有什么好处？
编辑2：我遇到了this article，它解释了不同用途实现的优缺点。
答案 0 :(得分：9)
首先，您应该使用<button>代替<a href="#">。空链接可能会使屏幕阅读器混乱，但按钮是一个按钮。简而言之，链接带您到位，按钮执行操作。 （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）。
我会使用您的第一个代码示例的变体，并使用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代码直接来自Bootstraps CSS Buttons部分。）
答案 1 :(得分：2)
根据我的理解，我认为也可以添加：
aria-hidden="true"
到包含铅笔图标的span类。这将阻止屏幕阅读器尝试读取此元素。
<span class="fa fa-pencil" aria-hidden="true"></span>