WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Font Icons and Pseudo-elements

for

From: Lucy Greco
Date: Apr 12, 2016 1:56PM

also what does the dragon user say if they need to click that icon

Lucia Greco
Web Accessibility Evangelist
IST - Architecture, Platforms, and Integration
University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu
Follow me on twitter @accessaces


On Tue, Apr 12, 2016 at 11:21 AM, Robert Fentress < <EMAIL REMOVED> > wrote:

> As I understand it, the problem with icon-only font icons (as opposed to
> icons with visible text beside them) is that providing alternative text as
> hidden text does not deal with users who are not blind, but who replace
> their fonts for improved readability. For instance, a dyslexic user may
> replace the fonts on a page with OpenDyslexic. There are also other,
> non-accessibility-related reasons why someone may not be downloading and
> using the web fonts associated with those font icons. Another thing I
> noticed is that if you provide the alternative text using aria-label, it is
> not voiced on iOS (or wasn't last time I checked), so you should be aware
> of that.
>
> The Filament Group has guidance on how to do accessible font icons that
> seems to work in my testing:
> https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html
>
> But, really, SVG icons are probably the best:
> http://blog.cloudfour.com/seriously-dont-use-icon-fonts/
>
> Is there a reason why you can't use those?
>
> Hope that helps!
>
> Best,
> Rob
>
> On Tue, Apr 12, 2016 at 1:02 PM, James A. < <EMAIL REMOVED> > wrote:
>
> > 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/
> >
> >
> >