Why doesn't JAWS screen reader read my Font Awesome icons?

0
votes

I'm testing the JAWS screen reader on a table having the following markup in its cells:

<center><i class="fa fa-check fa-1" title="MyTitle" aria-hidden="true" style="color:green" aria-label="read me"></i></center>

I've noticed that the screen reader can't "enter" the above cell (due to the aria-hidden), so I removed it:

<center><i class="fa fa-check fa-1" title="MyTitle" style="color:green" aria-label="read me"></i></center>

Now it can enter the cell but doesn't read any text.

Any way to put some text accessible only to the screen reader and not visible on the UI?

1
accessibilityfont-awesomejaws-screen-reader
Note: the <center> element has been obsolete for many years. html.spec.whatwg.org/dev/obsolete.html#obsolete – Rob

1 Answers

1
votes
<center>
  <i class="fa fa-check fa-1" 
     title="MyTitle" 
     style="color:green" 
     aria-label="read me" 
     role="img">
  </i>
</center>

Notice how I added role="img", this instructs the screen reader to treat this like an image and so it will read the aria-label.

Without it some screen readers will ignore aria-label attributes on certain elements as they aren't "semantically correct".

The alternative is to leave the aria-hidden on the icon and add some visually hidden text that is for screen reader users.