WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Font Icons and Pseudo-elements

for

From: Bim Egan
Date: Apr 11, 2016 10:50AM

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

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