2
votes

Here's the scenario; I need the screen reader to read something else for the heading than what is actually being displayed.

"My Heading" is displayed but screen reader reads "This is my heading"

<div>  
  <div aria-hidden="true">My Heading</div>
  <div aria-label="This is my Heading" role="heading" aria-level="1" tabindex="0"></div>
</div>

The above code achieves the required behavior on VoiceOver, but I can't get JAWS to do the same. Any Idea how to make it work in JAWS?

Eventually I'll be looking for a solution that's compatible with with both VoiceOver and JAWS.

Thanks

2

2 Answers

0
votes

Yes -- I've been trying to do something similar

<div >       
  <div id="entryLabel">This is My Label</div>
  <div tabindex="0" aria-labelledby="entryLabel">This My Value</div>
</div>

Jaws doesn't seem to read the aria-labelled by if used on a div element! It may be JAWS - but it may that the Browser isn't exposing the information ??

I've noticed the same using aria-label.

0
votes

I would suggest move with aria-labelledby, which works with most of screen reader and browsers and alternative to aria-label.

Sample Code

<div>  
  <div aria-hidden="true">My Heading</div>
  <div aria-labelledby="myheading" role="heading" aria-level="1" tabindex="0">
    <span id="myheading" style="visibility:hidden;">This is my Heading</span>
  </div>
</div>