WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Font Icons and Pseudo-elements

for

From: Caitlin Geier
Date: Apr 13, 2016 10:55AM

FontAwesome (one of the most popular icon font libraries) just released a
guide for using icon fonts accessibly - http://fontawesome.io/accessibility/

I find icon fonts to be quite useful - they're easy to implement and
manage, and you don't have to have a designer slaving away to create custom
images / icons to represent something. That being said, it's often better
to just use text. In the application I'm working on, we mostly use them as
decoration (aria-hidden=true).

On Tue, Apr 12, 2016 at 4:35 PM, Lucy Greco < <EMAIL REMOVED> > wrote:

> mike thats ausom
>
> 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 1:32 PM, Moore,Michael (Accessibility) (HHSC) <
> <EMAIL REMOVED> > wrote:
>
> > "Mouse grid, 7, 3, 5, 9, ... click that" </sarcasm>
> >
> > Mike Moore
> > Accessibility Coordinator
> > Texas Health and Human Services Commission
> > Civil Rights Office
> > (512) 438-3431 (Office)
> >
> > -----Original Message-----
> > From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> > Behalf Of Lucy Greco
> > Sent: Tuesday, April 12, 2016 2:56 PM
> > To: WebAIM Discussion List < <EMAIL REMOVED> >
> > Subject: Re: [WebAIM] Font Icons and Pseudo-elements
> >
> > 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
> > > >
> > > > > > > > > > > > archives 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
> > > >
> > > >
> > > > > > > > > > > > archives at http://webaim.org/discussion/archives
> > > > > > > >
> > >
> > >
> > >
> > > --
> > > 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
> > > > > > > > > archives at http://webaim.org/discussion/archives
> > > > > >
> > > > > > at http://webaim.org/discussion/archives
> > > > > > > > > > > >
> > > > >



--
Caitlin Geier
User Experience Designer
<EMAIL REMOVED>