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

admin管理员组

文章数量:1391943

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 ?

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 ?

• javascript
• wai-aria
• screen-readers
• jaws-screen-reader

Share Improve this question Follow asked Dec 5, 2018 at 10:15 Arun RamachandranArun Ramachandran 1,40277 gold badges2424 silver badges3737 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

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; 
}

本文标签： javascriptJAWS ( on windows ) not reading arialabel given on ltpgt tagStack Overflow