CODEWITHSUNDEEP
accessibilityfont-awesomejaws-screen-reader
andreasperelli
andreasperelli

Reputation: 1034

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

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?

Upvotes: 1

Views: 864

Answers (1)

GrahamTheDev
GrahamTheDev

Reputation: 24905

<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.

Upvotes: 5

Related Questions