dmathisen dmathisen - 2 months ago 14
CSS Question

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.

Answer

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