Accessible FontAwesome Image Buttons

FontAwesome is a cool resource to use in web development. As its name suggests it is a font (like webdings/wingdings), except it has images that are actually useful. Some icons include edit, delete, email, save, lock, comment, search, facebook logo, etc. But since it’s a font some may wonder how to use it in an accessible way. Here is an example of an edit button:
Some of the classes being referenced are:
This example places an edit icon on an empty BUTTON tag with the fa fa-edit classes. I have also included CSS to remove the browser styling related to the BUTTON tag. Within the button tag is a SPAN tag with the value of Edit. It, however, is floated off the page and can only be detected by screen readers. The reader should say Edit Button. If CSS is completely disabled the image will not be shown but the text won't be hidden either. You are still left with a button whose purpose is understandable!

Read More