3

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>
Community
  • 1
  • 1
Andrew W
  • 107
  • 1
  • 7

1 Answers1

2

<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 "#".

eat-sleep-code
  • 4,753
  • 13
  • 52
  • 98
  • It does, thank you. JAWS is now announcing the value multiple times, but I think that's better than the alternative. I've been warned off relying on title for accessibility, but I'm pretty sure this is the only viable option. – Andrew W Mar 17 '15 at 20:37