[A11y] Screen Reader Reads the Text Input Rather Than Option Values


I’m testing a Select2 element for accessibility, and am running into a bit of a problem.

When using keyboard-navigation and a screen reader (I’ve tried Windows Narrator and NVDA), when I use the arrow keys to move from one option to the next, the screen reader doesn’t announce the value of the option that I’ve highlighted. Instead, it reads out the first letter of the contents of the text input (so, if I haven’t typed anything in the text input, it says “blank”, but, if, for instance, I’ve typed “we”, it will say “w”). My guess is that this has to do with the fact that the text input is keeping the focus, but I’m not sure how to get around that.

If a screen reader can’t announce the values of the options as the user moves through them, then the selector will end up being pretty useless to folks that can’t see it.

Do you have any suggestions? Thanks.


As a follow-up, I did find a much more simplistic example of a combobox that does get read properly by screen readers. I’m not sure if it can offer any help in fixing this issue or not, but it’s located at http://www.oaa-accessibility.org/example/10/ if you want to look. Thanks.


I have the same issue. Do you understand why there is a hidden-accessible span with the proper select>option structure, and also one with a ul>li structure?