Search code examples
accessibilityfont-awesomewai-ariascreen-readersicon-fonts

Font Awesome support for screen readers and accessibility


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?


Solution

  • 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?