WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Font Icons and Pseudo-elements

for

From: Moore,Michael (Accessibility) (HHSC)
Date: Apr 12, 2016 2:32PM

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