使用键盘向下箭头更改选项时 JAWS 未读取选择框值

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?

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.

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.

Answer 3

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

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 <option aria-label="red" >Red</option> .

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

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"