CODEWITHSUNDEEP
javascriptwai-ariascreen-readersjaws-screen-reader
Arun Ramachandran
Arun Ramachandran

Reputation: 1372

JAWS ( on windows ) not reading aria-label given on `<p>` tag

I have given a specific aria-label for <p> tag in my web page. 

<p aria-label="my custom text" className="inline">text</p>

The aria-label given on this is reading perfectly fine on Mac screen reader, but it is not happening on JAWS ( on windows ). Is there any specific settings / extra tags has to be added in order to read the same in JAWS ? Any thoughts ?

Upvotes: 1

Views: 5667

Answers (2)

slugolicious
slugolicious

Reputation: 17435

The aria-label attribute may be ignored if the element you are setting it on doesn't have a specified role. In your case, the <p> doesn't have any semantic meaning other than just text.

See https://www.w3.org/TR/using-aria/#label-support

In particular, see the 8th bullet:

Don't use aria-label or aria-labelledby on any other non-interactive content such as p, legend, li, or ul, because it is ignored.

As an aside, it's a little unusual to have paragraph text read differently than what is visually displayed. So while you could use aria-hidden and the "visually-hidden" class, that will cause problems for low vision users who rely on augmenting their web experience by running a screen reader along with a magnifier. They will be able to see some text on the screen but when they hear it, it won't match what they see.

Upvotes: 4

realShadabSaifi
realShadabSaifi

Reputation: 31

Instead of aria-label you can use the visually hidden text by moving your text into a <span> with aria-hidden="true" attribute

E.g.

<p className="inline">
<span aria-hidden="true">text</span>
<span class="visually-hidden">my custom text</span>
</p>

And visually hidden class will have :

.visually-hidden{
position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}

Upvotes: 2

Related Questions