Using Font Awesome with Accessibility in Mind
Mega popular web icon service Font Awesome released instructions on how to better serve a more accessible web. Demonstrating minor tweaks in a Web Developer’s workflow, describing best practices, and detailing a recent update to their Content Delivery Network, creator Dave Gandy gives insight into using font awesome with accessibility in mind.
From their website:
Font Awesome CDN helps you automate accessibility support more easily so your icons work for the most people possible. You only need turn on a setting, use our simple syntax, and any icons you use will have all of the best practices and manual techniques below applied automatically.
Manually Integrating into the existing Assertive Technology model
Font Awesome is a convenient and fast way to deliver visual styling to a website or blog without having to work with a designer. By following some simple instructions you can better position your blog so it can be read by assistive technology readers:
Icons used for pure decoration – Icons used for extra decoration or branding do not need to be announced to users navigating your site or app aurally. You can make sure these elements are not read by adding the aria-hidden=”true” to your Font Awesome markup.
If an icon is not an interactive element – The simplest way to provide a text alternative is to use the aria-hidden=”true” attribute on the icon and to include the text with an additional element, such as a <span>, with appropriate CSS to visually hide the element while keeping it accessible to assistive technologies. In addition, you can add a title attribute on the icon to provide a tooltip for sighted mouse users.
If an icon represents an interactive element – For focusable interactive elements there are various options to include an alternative text or label to the element, without the need for any visually hidden <span> or similar. Simply adding the title attribute to the interactive element itself will be sufficient to provide an accessible alternative name for the element, as well as providing the mouse tooltip.
Using Font Awesome with Accessibility in mind
For other tips and tricks integrating graphical elements into your website or app, while keeping accessibility in mind, click to visit the Font Awesome Accessibility page.
