WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Font Icons and Pseudo-elements

for

From: Robert Fentress
Date: Apr 12, 2016 12:21PM

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/
>
>
> -----Original Message-----
> From: Bim Egan [mailto: <EMAIL REMOVED> ]
> Sent: 11 April 2016 17:51
> To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Font Icons and Pseudo-elements
>
> Hi Joseph,
>
> There's a lot to do to make font icons accessible. The most obvious issues
> are for people who need to use personal stylesheets, you'll probably find
> that there's no content at all or the dreaded white squares displayed when
> your own stylesheet isn't being used.
>
> Here's a good resource:
> https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html
>
> In short, icon fonts need a text alternative, one that will replace it
> when it isn't displayed on the page.
>
> Sorry, can't help with the pseudo elements, I just know that using them
> for information is one of WCAG's failure techniques: F87 Failure of
> Success Criterion 1.3.1 due to inserting non-decorative content by using
> :before and :after pseudo-elements -
> http://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20160317/F87
>
> HTH
>
> Bim
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Joseph Sherman
> Sent: 11 April 2016 17:28
> To: 'WebAIM Discussion List'
> Subject: [WebAIM] Font Icons and Pseudo-elements
>
> Our web folks are suddenly using Font Icons and Pseudo-elements. Both seem
> to have some accessibility issues in our implementation.
>
>
> 1) The Font Icons are being used instead of IMG, in links with Title
> attributes. Unfortunately, accessibility support is inconsistent. When
> tabbing with NVDA or JAWS, the Title is always read properly. But when
> using JAWS and the "H" key, or having NVDA or JAWS list the elements, or ,
> when on a Mac using VoiceOver, the screen reader just says "link" and does
> not read the Title. Would adding 'aria-label' to Font Icon links solve
> these?
>
>
> 2) They are using Generated content (::after) to indicate DocTypes for
> links to file downloads. So the file would say "Instructions, PDF", where
> the PDF is added by generated content. Unfortunately, when using IE the
> user will only hear "Instructions, link" without the file type. Internet
> Explorer is the only browser regularly used with a screen reader that does
> not expose the generated content as the accessible name for the element. Is
> there a way to add an ALT to the CSS for generated content like
> .new::before { content:
> url(./img/star.png); alt: "New!";
>
> Joseph
>
> > > at http://webaim.org/discussion/archives
> >
> -----
> No virus found in this message.
> Checked by AVG - www.avg.com
> Version: 2016.0.7497 / Virus Database: 4556/12012 - Release Date: 04/11/16
>
>
> > > > >



--
Robert Fentress
Senior Accessibility Solutions Designer
540.231.1255

Technology-enhanced Learning & Online Strategies
Assistive Technologies
1180 Torgersen Hall
620 Drillfield Drive (0434)
Blacksburg, Virginia 24061