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?

Armen Michaeli
  • 8,625
  • 8
  • 58
  • 95
andreasperelli
  • 1,034
  • 2
  • 11
  • 40
  • 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

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

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64
  • 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! – GrahamTheDev 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