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.
title="Edit to example 2.
What advantage does using
aria-label="Edit" have over the standard
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/; 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.
button code is straight from Bootstraps CSS Buttons section.)