FontAwesome, Bootstrap and screenreader accessibility

Question

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.

Answer 1

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/; https://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.)

Answer 2

From my understanding I think it may be useful to also add in:

aria-hidden="true"

to the span class that holds the pencil icon. This will prevent the screen reader from trying to read this element.

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