JAWS not reading select box value when changing options using keyboard down arrow

7
votes

I'm testing my web page for accessibility using JAWS reader. Below is a sample HTML markup from my page.

<label for="MySelectBox">Select a color</label>
<select id="MySelectBox">
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
</select>

When navigating the page through keyboard and changing the select box value using Down arrow key, JAWS is not reading the changing values as you press down arrow.

Anything I'm missing in here? Should I add any additional ARIA labels to make JAWS recognize the change event?

6
htmlaccessibilityjaws-screen-reader
What does JAWS say? Basically, the only idea I have is that you don't automatically enter forms mode. – Andre Polykanine
JAWS does not read anything, when you tab into the combo box. It just sit silent. When you tab to next field, it starts reading that field. – Veera
You haven't said which browser you're using with Jaws, but have you tried alt-down to select options? That might work in IE. – AlastairC
Basically, Alt+Down is needed only for select boxes triggering immediate page update on items selection (which are a headache for blind users, btw). But I still don't get what the OP means: I've made a test HTML page with an edit box, the select box from the question and a submit button, and with IE 11 under Windows 7 (JAWS 15 latest release) everything is read correctly with Tab. – Andre Polykanine
Did you ever solve this problem? @Menelion it's not an issue with Tab. When you press down arrow to change options, it's not reading the options. I'm in Chrome 43 on Windows 8. – regularmike

6 Answers

1
votes

This one does seem strange. You can debug this by first creating test html page containing just the code you pasted here and testing it under same setup. If that works, you might want to go back your page and check for incorrectly formatted mark-up above this select box. Sometimes unclosed tags (typical culprits:<LI> and <BR>) and erroneous JavaScript/Jquery element manipulations create issues with screen readers.If possible, post your rendered page's HTML content here for others to review.

0
votes

For anyone else who might see this, I was having trouble having JAWS read the ListItems stored in the DropDownList too.

I had been testing this only in Chrome and after reading the comments here tested in Firefox and JAWS would read the ListItems when you scrolled through the DropDownList with the arrow keys. So this must be a compatibility issue with Chrome.

0
votes

You need to add aria-live="assertive" to the select tag. Reference : http://www.freedomscientific.com/Training/Surfs-Up/AriaLiveRegions.htm

0
votes

JAWS not reads the text of <option>Red</option>. <option> should have aria attribute, that is aria-label="value".
<option> element should be <optionaria-label="red">Red</option>.

0
votes

I was using asp:Dropwnlist. This has worked for me:

  1. Add aria-live="assertive" to the <asp:DropDownList> </asp:DropDownList> tag
  2. Add arial-label="whatevervalue" to the <asp:ListItem/> tag

Tested using Chrome + NVDA screen reader

0
votes

I had an issue similar to this, this is what I added to fix it for me. You may need to a different form of activedescendant, but you need something to focus on the selection when you hit the down arrow. https://www.w3.org/TR/wai-aria-practices/#kbd_focus_activedescendant

aria-live="assertive value" aria-required="true" aria-activedescendant="ID_REF"