3

I am trying to use aria-describedby on select box, but JAWS does not announce the text associated using the aria-describedby attribute in IE. I have even added tabindex="-1" to the span tag which is being referenced.Below is the sample code I am using. Can somebody please provide me any information on this topic.

<form action="#" method="post">
  <div>
    <label for="State">State</label> 
    <select  id="State" name="State" aria-describedby="spanId">
      <option value="acct">Choose</option>
      <option value="act">ACT</option>
      <option value="nsw">NSW</option>
      <option value="nt">NT</option>
      <option value="qld">QLD</option>
      <option value="sa">SA</option>
      <option value="tas">TAS</option>
      <option value="vic">VIC</option>
      <option value="wa">WA</option>
      </select>
      <span id="spanId" tabindex="-1">This is the text</span>
  </div>

</form>
mangala jaggal
  • 31
  • 2

2 Answers2

0

You can use aria-label="spanId"

Make sure you don't use title and aria-labelfor the same HTML element because title gets suppressed.

KannarKK
  • 1,593
  • 20
  • 35
  • Unless the code snippet was altered I don't follow how `title` is relevant here. – vpiTriumph Nov 11 '15 at 20:05
  • @vpiTriumph, It is just additional info to the OP, because aria-label suppresses everything else. I see code usually with title as well. Just a warning. – KannarKK Nov 12 '15 at 10:52
0

Using IE11 and Jaws 17 I have observed this issue as well.

My take is that this is a bug.

Until it's addressed by Freedom Scientific, I'd recommend using aria-labelledby.

This means something slightly different semantically:

a label describes the essence of an object, while a description provides more information that the user might need.

Source: Mozilla Developer Network

But it's probably the best substitute you have available.

vpiTriumph
  • 3,116
  • 2
  • 27
  • 39