WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Font Icons and Pseudo-elements

for

From: Lucy Greco
Date: Apr 12, 2016 2:35PM

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