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

我想知道使用Twitter Bootstrap框架和FontAwesome图标字体的屏幕阅读器可访问性。FontAwesome，Bootstrap和屏幕阅读器的辅助功能

我期待在2种不同的图标情况：

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的网站：

字体真棒不会跳闸了屏幕阅读器，不像其他的图标字体。

我没有看到相关的FontAwesome或引导任何speech CSS标签，并没有真正清楚，我的屏幕阅读器将如何对上述各种情况作出反应。

我也知道aria-hidden和Bootstrap的.sr-only，必须有一个理想的方式来处理这两种情况。

编辑：添加title="Edit实施例2，

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

编辑2：我遇到了this article，它解释了不同使用实现的优缺点。

来源

2014-01-06 dmathisen

如果你想支持屏幕阅读器，您有一个或多个屏幕阅读器，你正在测试与我猜想？你有没有试过看他们目前的反应？ – Stijn

我可能会误解这一点，但当然，在第二个示例中，您可以简单地在href标记中使用title属性？ - title =“编辑”。哎呀，你可以通过无障碍访问整个猪群，并实际添加关于编辑按钮涉及的信息 - title =“编辑内容xyz”。我想这取决于你周围的结构。如果您的编辑按钮位于文章或部分内，我猜屏幕阅读器能够确切地确定*它将被编辑的内容。所以，事实上，你的问题是一个很好的问题，但也会带来其他问题。基本上，描述正在编辑的内容！ –

@MatthewTrow你完全正确。我在情况2中忘记了标题=“编辑”。如果这就是屏幕阅读器需要“阅读”的全部内容，那很完美！我还阅读了关于aria-label =“编辑”的内容，但不确定标准标题属性的好处。 – dmathisen

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

来源

2014-01-06 22:03:09 tjameswhite

是的。对我而言，这是最有意义的。谢谢。 – dmathisen

编辑：看看我的应用程序，许多“按钮”确实包含href =“...”，它们链接到内容的编辑页面。所以他们是看起来像一个按钮的链接。 – dmathisen

很有意思。而对于按钮与链接，它当然不会被切割和干燥。祝你好运！ – tjameswhite

从我的理解，我认为这可能是有用的在还补充：

aria-hidden="true"

到持有铅笔跨度类图标。这将阻止屏幕阅读器尝试阅读此元素。

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

来源

2016-09-12 14:01:25

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

回答

相关问题