FontAwesome，Bootstrap和屏幕阅读器辅助功能

Question

FontAwesome，Bootstrap和屏幕阅读器辅助功能

csstwitter-bootstrapaccessibilityfont-awesomescreen-readers

3

我想了解在使用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不会使屏幕阅读器出错。

我没有看到与FontAwesome或Bootstrap相关的speech css标签，也不清楚屏幕阅读器将如何对每种情况做出反应。

我还了解到aria-hidden和Bootstrap的.sr-only，必须有一种理想的方法来处理这两种情况。

编辑：在示例2中添加了title="Edit"。

使用aria-label="Edit"相比标准的title="Edit"有什么优势？

编辑2：我遇到了this article这篇文章，解释了不同用法实现的利弊。

- dmathisen

如果你想支持屏幕阅读器，我猜你有一个或多个正在测试的屏幕阅读器？你试过看它们当前的反应吗？ - user247702

1

我可能误解了这个问题，但在第二个例子中，你可以简单地在a href标签中使用title属性吗？- title="编辑"。实际上，你甚至可以通过可访问性来添加有关编辑按钮相关内容的信息 - title="编辑内容xyz"。我想这取决于你周围的结构。如果你的编辑按钮在文章或部分内部，我想屏幕阅读器将能够确定将要编辑的*内容是什么。因此，事实上，你的问题是一个好问题，但也引出了其他问题。基本上，描述正在被编辑的内容！ - Matthew Trow

@MatthewTrow 您说得非常正确。在情况2中，我忘记了title="Edit"。如果这就是屏幕阅读器所需要的，那就太完美了！我也了解到aria-label="Edit"，但不确定它相对于标准的title属性有什么好处。 - dmathisen

@Stijn 这将是理想的。只是似乎设置和学习使用屏幕阅读器非常麻烦。如果有人们使用的公认的无障碍标准，我宁愿相信并坚持使用它。 - dmathisen

2

“title”属性不能被辅助技术可靠地宣布。不要仅依赖它来实现基本功能。 - steveax

2个回答

3

根据我的理解，我认为还可以增加以下内容：

aria-hidden="true"

将其应用于持有铅笔图标的span类。这样可以防止屏幕阅读器尝试读取此元素。

<span class="fa fa-pencil" aria-hidden="true"></span>

- ben charman

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tjameswhite · Accepted Answer

首先，您应该使用<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)。

我建议您使用第一个代码示例的变体，并利用Bootstrap的.sr-only类。如果我们将您的代码更新为button并添加类，则为：现在我们有一个更语义化的按钮元素; 视觉用户看到编辑铅笔图标; 屏幕阅读器用户将听到“编辑”。每个人都受益。

（注意，button 代码直接来自 Bootstraps CSS Buttons 部分。）