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

Re: How do assistive technologies handle icon fonts?

From: Elizabeth J. Pyatt <ejp10@psu.edu>
Date: Tue, 1 Dec 2015 09:06:23 -0500
Cc: Michiel Bijl <michiel@agosto.nl>, Web Accessibility Initiative Interest Group <w3c-wai-ig@w3.org>, Ja Eun Ku <jku@illinois.edu>
Message-Id: <4084FC33-E533-4715-A54B-59A9129F3844@psu.edu>
To: Mitchell Evan <mtchllvn@gmail.com>
Good to know this. 

For the record, I wouldn’t generally recommend using icon fonts if I had to tag each instance as an image in ARIA in order for it to be read consistently. At that rate, you might as well use an accessible SVG image!

On a side note though, I do wish we could get better language and Unicode symbol support on all screen readers. I don’t want to have to tag legitimate symbols like IPA phonetic symbols as images in ARIA either so the screen reader will read them out. MathML unfortunately doesn’t fill in all the technical symbol gaps.

My two cents.

Elizabeth

P.S. I wonder if the proliferation of standardized Emoji characters will make fuller Unicode support more important.


> On Nov 30, 2015, at 5:55 PM, Mitchell Evan <mtchllvn@gmail.com> wrote:
> 
> 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: https://bugzilla.mozilla.org/show_bug.cgi?id=789788
> 
> Cheers,
> Mitchell
> 
> 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
> mtchllvn@gmail.com
> +1 (510) 375-6104
> 

=-=-=-=-=-=-=-=-=-=-=-=-=
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
Received on Tuesday, 1 December 2015 14:07:02 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 1 December 2015 14:07:02 UTC