1

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?

amn
  • 7,742
  • 8
  • 54
  • 82
andreasperelli
  • 984
  • 2
  • 10
  • 37
  • 3
    Note: the `
    ` element has been obsolete for many years. https://html.spec.whatwg.org/dev/obsolete.html#obsolete
     – Rob Oct 14 '21 at 10:09

1 Answers1

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

Graham Ritchie
  • 20,576
  • 2
  • 25
  • 56
  • Great solution, I've just tested it and works like a charm. Many thanks! – andreasperelli Oct 14 '21 at 10:38
  • 1
    No problem, glad it helped! Good luck with the project! – Graham Ritchie Oct 14 '21 at 10:39
  • 1
    Just to add here that `aria-label` should only be used on certain types of HTML elements or on elements with certain roles applied. The reason Graham's example works is because `role="img"` has been applied to the same element. You can read more about this here: https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/ – Jon Gibbins Oct 14 '21 at 19:18