W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > October to December 2015

Re: How do assistive technologies handle icon fonts?

From: Mitchell Evan <mtchllvn@gmail.com>
Date: Mon, 30 Nov 2015 22:55:24 +0000
Message-ID: <CAK=xW6tt34-toty-M4h36mvcZbJ2BHj+8o3=BvMKgNSW6kHBOQ@mail.gmail.com>
To: "Elizabeth J. Pyatt" <ejp10@psu.edu>, Michiel Bijl <michiel@agosto.nl>
Cc: Web Accessibility Initiative Interest Group <w3c-wai-ig@w3.org>, Ja Eun Ku <jku@illinois.edu>
When reading one character at a time, symbols even in the private use area
(PUA) do get announced in Firefox + NVDA. I'm told the Alex voice in
VoiceOver (Mac OS) also by design attempts to announce the symbol. In each
case, it announces the hex code of the symbol. I don't know what they do in
Braille displays (testing needed). For these reasons, I recommend authors
wrap custom icons with aria-hidden="true", and add hidden accessible text
adjacent to the symbol.

An additional challenge is how to make the experience work for sighted
users who customize their fonts, such as with "ignore fonts" settings in
the browser or with custom style sheets. As far as I know, this can only be
fixed in the browser. Example:


On Mon, Nov 30, 2015 at 2:05 PM Elizabeth J. Pyatt <ejp10@psu.edu> wrote:

> Hello:
> If your icon font is displaying something different from the intended
> Unicode value, you will almost certainly need a workaround for screen
> readers. I have experimented with ARIA and found that assigning the role of
> image to a character not otherwise recognized in a screen reader and adding
> a description in “aria-label” works.
> http://sites.psu.edu/gotunicode/2014/11/18/aria-for-screen-readers-not-able-to-read-symbols/
> I would be interested to find if this works for an icon font as well.
> Elizabeth
> P.S. I have some other notes about icon fonts at
> http://sites.psu.edu/gotunicode/2013/06/26/icon_fonts_unicode_and_accessi/.
> If you assign the glyphs to the Private Use Area in Unicode, you would
> probably get consistent results - they might be visible on a browser, but
> skipped by JAWS (and possibly VoiceOver). That could be handy for
> decorative icons which don’t need ALT tags.
> > On Nov 30, 2015, at 4:37 PM, Michiel Bijl <michiel@agosto.nl> wrote:
> >
> > Jemma and I are doing some accessibility testing on icon
> fonts—especially Font Awesome—and how assistive technologies handle them.
> I’ve setup a GitHub repository called Font Awesome (because we initially
> targeted that specific library; should rename it). I’ve already added one
> test example and some test results, but suggestions for more examples (ways
> to fix the issue of icon fonts being announced weird), or test results for
> existing tests, or even tips on how to display test results properly; it’s
> all welcome!
> >
> > —Michiel
> >
> =-=-=-=-=-=-=-=-=-=-=-=-=
> Elizabeth J. Pyatt, Ph.D.
> Instructional Designer
> Teaching and Learning with Technology
> Penn State University
> ejp10@psu.edu, (814) 865-0805 or (814) 865-2030 (Main Office)
> 210 Rider Building  (formerly Rider II)
> 227 W. Beaver Avenue
> State College, PA   16801-4819
> http://www.personal.psu.edu/ejp10/psu
> http://tlt.psu.edu
> --

Mitchell Evan
+1 (510) 375-6104
Received on Monday, 30 November 2015 22:56:39 UTC

This archive was generated by hypermail 2.3.1 : Monday, 30 November 2015 22:56:39 UTC