WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Font Icons and Pseudo-elements

for

From: James A.
Date: Apr 12, 2016 11:02AM

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

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