FontAwesome,Bootstrap和screenreader可访问性

Question

我想知道使用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不会绊倒屏幕阅读器.

我没有看到任何speech与FontAwesome或Bootstrap相关的css标签,也不清楚屏幕阅读器如何对这些情况做出反应.

我也知道aria-hidden和Bootstrap .sr-only,并且必须有一种理想的方法来处理这两种情况.

编辑:添加title="Edit到示例2.

使用aria-label="Edit"超过标准有什么优势title="Edit"？

编辑2:我遇到了这篇文章,解释了不同用途实现的优缺点.

Answer 1

首先,你应该使用<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/按钮和链接之间有什么区别.

我会使用您的第一个代码示例的变体,并使用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部分.)