accessibility css font-awesome screen-readers twitter-bootstrap

FontAwesome, Bootstrap and screenreader accessibility

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. (;

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.)