FontAwesome，Bootstrap和screenreader辅助功能 [英] FontAwesome, Bootstrap and screenreader accessibility

问题描述

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

我正在查看2种不同的图标情况：

1）图标具有屏幕阅读器将会提取的帮助文本：

  ; a href =＃class =btn btn-defaultrole =button>< span class =fa fa-pencil>< / span>编辑< / a> 
  

2）没有任何帮助文字的独立图标：

 < a href =＃class =btn btn-defaultrole =buttontitle =Edit>< span class = -pencil>< / span>< / a> 
  

理想情况下，在这两种情况下，屏幕阅读器都会宣布该元素是一个编辑按钮。

每个FontAwesome的网站：

Font Awesome不会跳过屏幕阅读器与其他图标字体不同。

我没有看到任何演讲 css与FontAwesome或Bootstrap相关的标签，以及屏幕阅读器如何对这些情况做出反应。

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

编辑：添加 title =编辑到示例2。

使用 aria-label =Edit超过标准 title =Edit？

编辑2：我遇到了本文介绍了不同使用实现的利弊。

< button> 而不是< a href = ＃> 。空链接可能使屏幕阅读器混乱，但按钮是一个按钮。简而言之，链接可以带你去地方，按钮执行动作。 （ http：//www.karlgroves。 com / 2013/05/14 / links-are-not-buttons-both-are-divs-and-spans / ; http://ux.stackexchange.com/questions/5493/what-are-the-differences-between-buttons-and-links ）。

我会使用你的第一个代码示例的变体，并使用Bootstraps .sr-only class 。如果我们使用按钮更新您的代码，并在类中添加，我们有：

< button type =buttonclass =btn btn-default>< span class =fa fa-pencil>< / span> < span class =sr-only>编辑< / span>< / button>

正确的按钮元件;目击用户看到编辑铅笔图标;和屏幕阅读器用户将听到编辑。每个人都获胜。

（注意，按钮代码直接从 Bootstraps CSS Buttons 部分。）

I'm wondering about screen reader accessibility using Twitter Bootstrap framework and FontAwesome icon fonts.

I'm looking at 2 different icon situations:

1) The icon has helper text that a screen reader will pick up:

<a href="#" class="btn btn-default" role="button"><span class="fa fa-pencil"></span> Edit</a>

2) And a standalone icon without any helper text:

<a href="#" class="btn btn-default" role="button" title="Edit"><span class="fa fa-pencil"></span></a>

Ideally, in both situations, a screen reader will announce that the element is an "Edit" button.

Per FontAwesome's site:

Font Awesome won't trip up screen readers, unlike other icon fonts.

I don't see any speech css tags related to FontAwesome or Bootstrap and not really clear to me how a screen reader will react to each of these situations.

I'm also aware of aria-hidden and Bootstrap's .sr-only and there has to be an ideal way to handle both situations.

Edit: added title="Edit to example 2.

What advantage does using aria-label="Edit" have over the standard title="Edit"?

Edit 2: I came across this article that explains pros and cons of different use implementations.

解决方案

First of all, you should probably use <button> instead of <a href="#">. Empty links can be confusing for screen readers, but a button is a button. In short, links take you places, buttons perform actions. (http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/; http://ux.stackexchange.com/questions/5493/what-are-the-differences-between-buttons-and-links).

I would go with a variation of your first code sample, and utilize Bootstraps .sr-only class. If we update your code with button and add in the class, we have:

<button type="button" class="btn btn-default"><span class="fa fa-pencil"></span> <span class="sr-only">Edit</span></button>

We now have a more semantically correct button element; sighted users see the edit pencil icon; and screen reader users will hear "Edit". Everyone wins.

(Note, the button code is straight from Bootstraps CSS Buttons section.)

这篇关于FontAwesome，Bootstrap和screenreader辅助功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！