3

According to the Font Awesome home page:

Font Awesome won't trip up screen readers, unlike other icon fonts.

I also know that it is recommended to add the aria-hidden="true" attribute to font icons so that screen readers can ignore them.

My question is, what does Font-Awesome do that "won't trip up screen readers" (I had a look on their GitHub site and I can't find anything) and do I still need to add the aria-hidden="true" attribute?

unor
  • 92,415
  • 26
  • 211
  • 360
Muhammad Rehan Saeed
  • 35,627
  • 39
  • 202
  • 311
  • 1
    I assume it's becuase FA uses pseudo-elements and so the content isn't in the DOM to be read by screen-readers. – Paulie_D Apr 01 '15 at 14:35
  • I am using to use font-awesome so there is extra markup in the DOM. – Muhammad Rehan Saeed Apr 01 '15 at 14:42
  • 1
    But no content as such...it's just an empty span..isn't it? So how would you expect a screen reader to read it out? – Paulie_D Apr 01 '15 at 14:45
  • 2
    Hmm..seems modern readers may read it out. this might help - http://stackoverflow.com/questions/20953806/fontawesome-bootstrap-and-screenreader-accessibility – Paulie_D Apr 01 '15 at 14:48

2 Answers2

4

Best case:

<a href="https://www.facebook.com/#" title="Your title">
  <i class="fa fa-facebook" aria-hidden="true"></i>
  <span class="screen-reader-text">We are on Facebook</span>
</a>
Muhammad Rehan Saeed
  • 35,627
  • 39
  • 202
  • 311
Robert
  • 41
  • 1
3

They are just plain talking out of the nether regions of their anatomy. What is an icon font other than an image? Their icon fonts do not have text alternatives when presented purely as an icon. On OS X with Safari, they are read out as unintelligible characters and not with a description of what the icon is...so...how should I say this diplomatically....

FONT AWESOME'S ICONS ARE NOT ACCESSIBLE!!!

Just to illustrate, here is the markup for their "buyselladds" icon

<i class="fa fa-buysellads"></i>

I can see no description of the icon. Can you? How can this possibly be accessible?

unobf
  • 7,158
  • 1
  • 23
  • 36
  • 1
    Have an upvote. By the way, I have read that it is more 'correct' to use a , rather than . – Muhammad Rehan Saeed Apr 02 '15 at 07:44
  • 2
    They are not accessible by default (you must supply some sort of alternative text) but what they mean by "won't trip up" can be seen in the [source](https://github.com/FortAwesome/Font-Awesome/blob/master/scss/_icons.scss): "Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons" – steveax Apr 03 '15 at 03:22