4

I am using CSS content to generate icons from a font set. The problem is that screen readers, most notably JAWs, are reading out the content also!

So the following:

<span class="uxf-icon uxf-search"></span>

and:

.uxf-search::before {
    content: ";"
}

So the screen reader will actually read out "semi-colon". Is there a way to prevent it from doing this? I understand the speak:none CSS tag doesn't actually work!

j00m
  • 491
  • 5
  • 20
  • 1
    Related - http://stackoverflow.com/questions/15753418/appropriate-way-to-hide-icons-from-screen-readers – Paulie_D Jun 20 '16 at 15:09
  • Indeed **Paulie_D** - especially http://stackoverflow.com/a/15795793/3022387 where **unor** recommends using the PUA (Private Use Areas) of UTF-8 instead of 'regular characters'. – flowtron Jun 20 '16 at 15:30

1 Answers1

5

Screen readers have adapted an now read CSS generated content. The comments on your question offer good feedback (even being from 2013 and with a few updates to JAWS since then). Note, if you are using a third-party icon font then you have no control whether or not those icons live in Unicode's Private Use Area.

Font Awesome uses the same technique as in your example and has caught some flack for just the issue you cite. As a result, Font Awesome came up with an accessibility page that may be of use to you.

If your icon is genuinely used only for decoration, and not to convey information, then this chunk of code from the FA accessibility page may work for you:

Icons used for pure decoration or visual styling

If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the aria-hidden="true" to your Font Awesome markup.

<i class="fa fa-fighter-jet" aria-hidden="true"></i>

an icon being used as pure decoration

<h1 class="logo">
  <i class="fa fa-pied-piper" aria-hidden="true"></i>
  Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller
</h1>

an icon being used as a logo

<a href="https://github.com/FortAwesome/Font-Awesome"><i class="fa fa-github" aria-hidden="true"></i> View this project's code on Github</a>

an icon being used in front of link text

As always, test with real users and make sure the absence of the icon does not harm meaning of the page (hide it from sighted users in testing and see if its absence is confusing to them).

Community
  • 1
  • 1
aardrian
  • 8,581
  • 30
  • 40
  • Thanks for that @aardrian, the problem I have found with using aria-hidden is that JAWs ignores this and still reads out the CSS content. – j00m Jun 21 '16 at 09:53
  • Do you have a test page URL you can share? – aardrian Jun 21 '16 at 13:16
  • take a look here: https://alastairc.ac/testing/icon-font-link.html If you test that page in JAWs, even the aria-hidden icon is being read out. – j00m Jun 21 '16 at 13:45
  • What version of JAWS? I get no announcement with the `aria-hidden=true` in JAWS 17 with Firefox. Made a page to test the solution I proposed: http://s.codepen.io/aardrian/debug/YWpGzO – aardrian Jun 21 '16 at 20:02
  • JAWS 17 with Firefox also! – j00m Jun 22 '16 at 09:37
  • So it reads out "Goog" if I arrow to the first link and "Google.com" if I arrow to the link BUT if I tab to the link (which is what I was doing) then it reads out the "arrow" part. I'm no expert in JAWs but I was assuming that users generally tabbed around the page. – j00m Jun 22 '16 at 14:56
  • Depends on the user and the context of the page. JAWS has keyboard shortcuts to navigate with arrows, tabs, and [many other keys](http://webaim.org/articles/jaws/#quick). – aardrian Jun 22 '16 at 15:18
  • Its just strange how when you tab to it it still reads out the aria hidden content?!? – j00m Jun 22 '16 at 15:29
  • Agreed. That is indeed strange. And annoying. – aardrian Jun 22 '16 at 15:43