WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Font Icons and Pseudo-elements

for

From: James A.
Date: Apr 12, 2016 11:02AM

Regarding icon-fonts, I am also currently looking for accessibility techniques to make these both accessible and more usable for a project using the open source Font-Awesome library. So far I have identified the following possible approaches and would appreciate anybody's experience for this!

1. for a purely decorative icon then use aria-hidden=true
2. if a text description is required then use aria-hidden in combination with off-screen text (e.g. bootstrap's sr-only class) to provide a text equivalent

As per these use cases http://ryanfrederick.com/sandbox/d8/icon-test/

However that does aid those who may need assistance with understanding what an icon means. So I am also exploring using a keyboard accessible pop-up in combination with aria-described by tags to improve usability and accessibility - the approach currently used on many of the buttons on Facebook and Twitter. I have still to look for a solution for accessing these pop-s up or equivalent help information for touch devices.

Any thoughts or experiences on these approaches would be gratefully appreciated!

Best wishes

Abi James
Accessibility Team, WAIS, ECS
University of Southampton, UK
Web: https://access.ecs.soton.ac.uk/