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

Question

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?

Kino

What does JAWS say? Basically, the only idea I have is that you don't automatically enter forms mode. – Palmitate

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. – Kino

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. – Skid

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. – Palmitate

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. – Snapdragon

Please try the same page with an officially supported browser like IE or Firefox. FS claims to partially support Chrome (from JAWS 16, I believe), but its support is far from being complete and satisfactory. – Palmitate

Answer 1

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.

Favianus

Answer 2

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.

Marine

Answer 3

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

Ward

Add some explanation with answer for how this answer help OP in fixing current issue – Caldron

Answer 4

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

Photomicroscope

Answer 5

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

Fastidious

Answer 6

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"

Jodiejodo