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/
> >
> >
> > -----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
> > > > >