ui-select icon indicating copy to clipboard operation
ui-select copied to clipboard

accessibility: screenreader always reads selection as "blank"

Open hohwille opened this issue 10 years ago • 5 comments
trafficstars

The ui-select is a very nice combo-box and already supports some aria attributation and partial accessibility. However if I focus the select a screenreader reads something like:

Choose a person focus menu button editable has auto complete blank

Even if there is currently a selection it will still read it as "blank". According to my observation this is because you produce the following html element as hidden representative for the control but without an aria-owns/aria-activedescendant pointing to the actual combo-box holding the value:

<input type="text" role="button" aria-haspopup="true" aria-label="Choose a person focus" id="focusser-0" class="ui-select-focusser ui-select-offscreen ng-scope" ng-disabled="$select.disabled">

I do not understand why you attach "focus" to the aria-label. Also why this has role button. See also: http://www.w3.org/TR/wai-aria/roles#combobox

BTW: To test yourself here the easiest instruction: If you want to get an quick impression how a blind person "sees" your content, quickly download and install NVDA (free OSS): http://www.nvaccess.org/

Then in case you do not actually need assistive technology set volume to zero and open the NVDA speech viewer to see what NVDA would read to a blind person. Then probably even unplug your mouse and try to read and edit your website with just the keyboard and the information your get in the speech viewer. This might open your mind to how a blind person "sees" the web.

Thanks for taking care!

hohwille avatar Apr 24 '15 14:04 hohwille

FYI: I am referring to the select2 theme of this demo: http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview The "Selectize theme" and the "Bootstrap theme" is not accessible at all. The select2 theme works fine for other aspects such as choosing from the options works perfect.

hohwille avatar Apr 24 '15 14:04 hohwille

Cause of error: There's an input element for the search and another input element for the focus. If the focus would have been set on the input element for the search then screenreader would have read everything correctly.

k7sleeper avatar May 31 '17 13:05 k7sleeper

2 years later, still open issue?

thomasrye avatar Jun 15 '18 18:06 thomasrye

Yes, it's still open! We just checked it.

k7sleeper avatar Jun 18 '18 15:06 k7sleeper

We've decided to move away from ui-select for the time being. Until we have time to fork it and fix a lot of these issues in house.

thomasrye avatar Jun 18 '18 21:06 thomasrye