Search code examples
htmlaccessibilityjaws-screen-reader

get jaws to read all options in a select


Is there a simple way to get jaws to read all the options for a select, currently we have

<div class="mySelectLabel">
  <label for="mySelectId" class="mySelectLabel">
    <span class="required" aria-hidden="true" role="presentation">*</span>
    <span class="offScreenText">Mandatory</span>
    <span class="labelText">Are you old enough?</span>
  </label>
</div>
<div class="myDivClass">
  <select id="mySelectId" name="mySelectName">
    <option value="">Please Select...</option>
    <option selected="selected" value="Y">Yes</option>
    <option value="N">No</option>
  </select>
</div>

Currently jaws reads ... Are you old enough? Combo box Yes the client wants it to read all the options.

I figure I could output hidden text for jaws to read but it would be nicer if there was an aria setting or something similar I could apply.


Solution

  • This is one of basic navigation rules with JAWS.
    Actually JAWS should read:

    Are you old enough? Combo box Yes

    If a user hears that this is a combo box, he/she knows (at least, should know) that in order to navigate he/she must press the Enter key in order to turn on the forms mode (unless the automatic forms mode is turned on). When in forms mode, he/she reviews the combo box with his/her vertical arrow keys.
    This is intended behavior, again, navigation with JAWS works like this.
    What you can do if you are absolutely required to do such a thing is the following: put an aria-describedby attribute to your select and in the description (which is visually hidden, of course) put something like this: «Select from one of the following values: Yes, No» (sure, you can grab the values from the options array with some JavaScript).