CODEWITHSUNDEEP
htmlaccessibilitywai-ariascreen-readersjaws-screen-reader
Andrew W
Andrew W

Reputation: 107

How can I ensure JAWS reads the link text rather than the URL?

I have the following code, used to present a number of radio buttons that needed to be significantly styled. The issue that I am having is that JAWS announces the full URL of the web page whenever an anchor gets the focus, rather than announcing the link text. Other screen readers do not have this issue. I have tried adding aria-label and aria-labelledby. arial-labelledby has no result; aria-label results in nothing being announced. I've also explored the suggestions in this question. Has anyone experienced this, and been able to sort it out?

<ul role="radiogroup">
  <li class="checked" role="radio" aria-checked="true">
    <a href="#" class="radio-button" data-value="1,3">Options 1 and 3</a>
  </li>
  <li role="radio" aria-checked="false">
    <a href="#" class="radio-button" data-value="1">Option 1</a>
  </li>
  <li role="radio" aria-checked="false">
    <a href="#" class="radio-button" data-value="3">Option 3</a>
  </li>
</ul>

Upvotes: 3

Views: 3479

Answers (1)

eat-sleep-code
eat-sleep-code

Reputation: 4855

<a href="#" class="radio-button" data-value="1,3" aria-label="Options 1 and 3" title="Options 1 and 3">Options 1 and 3</a> should beat JAWS into submission to reading "Options 1 and 3" instead of "#".

Upvotes: 2

Related Questions