SelectWoo accessibility - Known issues

[mikejolley]

SelectWoo has been merged into master, and already has some fixes for screen readers to address issues raised by users.

Known issues

VoiceOver

• Control +option + space bar command is not working to open the list of choices. VoiceOver users normally use this combination to open select inputs. On the other hand, using the Enter key does open the select input.
• In a search, VoiceOver does not announce the results found or the total items available on the list. It does announce when no matches are found.
• When the list of options is open or closed, VoiceOver does not announce it.
• Nesting: VoiceOver ignores the options that are nested inside an option. I could not even give them focus.
• Multiselect: In a search, VoiceOver does not announce the option found. When an option is selected (it looks like a tag), VoiceOver announce it as a group. Even if the option is selected it, I was not able to delete it. I tried using space bar and the Enter key.

[claudiulodro]

Looks like the ajax product/user search in the admin needs a little help, too. That one looks like it just needs to mirror some of the changes I did to the regular dropdown, so it shouldn't be too bad.

[mikejolley]

@ryelle If you can look this week that would be great :) @claudiulodro is back next week to correct anything you find.

[ryelle]

So, to be honest I'm not a savvy screen reader user, but I did notice some confusing things while testing. That said, are you planning on testing with everyday screen reader users? I know that I'm not a good VoiceOver user, so what works for me might actually be worse for blind users. Maybe ask on that select2 ticket, or in the wp.org slack accessibility room? I'm sure wp core would be interested in using this for settings/etc if it's accessible, and I know they have connections with testers.

Also, there aren't really clear instructions for testing here, so I've just loaded up a few settings screens.

After running aXe, which does some automated testing:

• The single selects are highlighted with Certain ARIA roles must contain particular children: Required ARIA child role not present: listbox more info
• When a select with search box is open, it flags as not having a label
  
• When open, the input is expected to have an aria-expanded attribute

Single select without search

• VoiceOver still announces it as a combobox I can type in, even with no text input
• VO doesn't read the items as I arrow-key down, so I don't know what item is currently selected

Single select with search

• I had some trouble navigating into this one
• VoiceOver announces when no matches are found, but doesn't announce matches, even after I've paused typing (even just "X matches found" would be helpful)
• Going down the results of a search for "New" in "Country / State" doesn't announce the highlighted items, except for New Caledonia or Papua New Guinea. After more testing, it looks like it only reads countries.

Multi-select

• The input I land in has no label, so I'm not sure what I'm typing
• I can't backspace to delete items- or, I can, but not immediately after adding an item, i need to leave the input and come back
• Using just the keyboard, I can't delete the first item in the list without removing all others.
• Select All and Select None should be <button>s, given they're styled as & act like buttons

As an aside, I also noticed the text in the (?) icon is not available to screen readers at all. Core has the screen-reader-text class, you could use for this.

[mikejolley]

@ryelle We have a user in support who requested this; they will be able to confirm it's working before release.

[claudiulodro]

Feedback from afercia so I don't lose it.

Thanks @ryelle and @afercia!

[Umimarina]

Hello,

Rian asked me to test the selectwoo examples with Voice Over. Here are my findings:

Common bugs for all the examples:

• Control +option + space bar command is not working to open the list of choices. VoiceOver users normally use this combination to open select inputs. On the other hand, using the Enter key does open the select input.
• In a search, VoiceOver does not announce the results found or the total items available on the list. It does announce when no matches are found.
• When the list of options is open or closed, VoiceOver does not announce it.

Nesting: VoiceOver ignores the options that are nested inside an option. I could not even give them focus.
Multiselect: In a search, VoiceOver does not announce the option found. When an option is selected (it looks like a tag), VoiceOver announce it as a group. Even if the option is selected it, I was not able to delete it. I tried using space bar and the Enter key.

[mikejolley]

@claudiulodro ^ Should we log those as new issues here or selectwoo repo?

[claudiulodro]

@mikejolley here is good. I'll edit your original post and add checkboxes as issues come in.

Thanks for testing @Umimarina!

[KayLeung]

• Initial letter keyboard navigation doesn't work.
  https://woocommerce.github.io/selectWoo/accessibility-testing/samples/single-no-search.html

It's inconsistent if the site also has the native select tag.

[irbian]

Axe is giving me an error, I would like to share:

Issue description
Ensures elements with an ARIA role that require child roles contain them
Fix the following:
Required ARIA child role not present: listbox

You can get the error in your example https://woocommerce.github.io/selectWoo/accessibility-testing/samples/single-search.html

Edit: Could be related with dequelabs/axe-core#214

[Umimarina]

Here are my results after testing:

• Control +option + space bar command is still not working to open/close the list of choices.
• In a search, VoiceOver does announce now the results found.
• When the list of options is open or closed, VoiceOver still does not announce it.
• Nesting: VoiceOver announce the options that are nested inside an option. I was able to give them focus.
• Multiselect: In a search, VoiceOver does not announce the option found. When an option is selected, VoiceOver announce it as a group but also announce the name of the country. Even if the option is selected it, still I was not able to delete it.

[ivaynberg]

@mikejolley not to hijack this thread, but why not ask to become a maintainer on the original select2 repo and move this work into it to remove the need for a fork and allow the wider user group to benefit? While I dont have time to work on Select2 I dont mind adding others who do to the project. Email me if you are interested.

[claudiulodro]

@ivaynberg I am a maintainer on the original select2 repo. Until the last week it was abandoned, so contributing back to it did not make sense unless we took over select2 releases and general maintenance also. Now that it is back in business we will try and merge the improvements back into it when they are completed.

[claudiulodro]

Closing in favor of issues.

[akinhwan]

can selectWoo be used outside of Woo Commerce?
also will it support screenreader narration of select options as user keys up or down in the dropdown?
I noticed this is currently not the behaviour out of the box in select2

[claudiulodro]

@akinhwan yes it can be used outside of WooCommerce. Just download the latest release and use the select2.js file there instead of your current select2.js file. Narration of select options is the main improvement! :)

[akinhwan]

@claudiulodro how would I replace only the select2.js if I'm currently importing 'select2' library from npm as a dependency in my package.json? Thanks for the headsup! I'm surprised a project with over 100K weekly downloads still doesn't have a11y baked in

[akinhwan]

@claudiulodro do you think it would be simple enough to make a PR with just selectWoo's accessibility updates into select2 repo?

[afr-ux]

I am a regular user of screen readers and I have tried these components by detecting important accessibility problems in all of them. Please, I would pray to improve your accessibility since it is very important for users of technical aid.

Below I send some problems, both the latest version and in the previous ones (if they could help them).

Regarding the first (https://woocommerce.github.io/selectwoo/accessibility-testing/samples/single-search.html) you can present barriers to some users. In principle works well, but for some reason, I suspect an aria-haspopup aria attribute, if the list is not deployed with the space bar, the normal behavior of the cursors up and down to scroll through the SELECT it does not work correctly.

The selected element is read outside the combo and in the combo itself, that is, in duplicate.
In the form mode of a screen reader, with down arrow / up no item is read.
Yes we can deploy it, but it does not tell us how many elements there are.
If we close the combo, it does not select the item.
You can only select by pressing Enter.

I would recommend changing this
United States (US)
By a SELECT HTML SELECT label if possible. The component can be used, but it is not the most appropriate.

Here (https://woocommerce.github.io/selectwoo/accessibility-testing/samples/single-no-search.html) We can find the same barrier.

In this (https://woocommerce.github.io/selectwoo/accessibility-testing/samples/single-nesting.html) we can detect a similar screens reader. It can be used, but I would use a tree presentation instead of a non-native SELECT. What I would use would be something like this:

https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html

It is clearer and more intuitive.

The simple selection is missing with AJAX has a behavior similar to the first. Although in this case, it gives more tobarra because it is not known what is if a letter is not introduced before, and nowhere informs that you have to press a letter, the message appears when you press space and then move the arrows.

In this (https://woocommerce.github.io/selectwoo/accessibility-testing/samples/multi.html) directly no native controls are used. Nor is it known if something has been selected if the web is not explored. It is not intuitive. The screens reader does not notice that something has been selected or deselected.

The same goes for the next.

In general, all can be used with screens reader if you know what is being done, but none is optimal 100% and will give problems with most users.

Software used:
Windows 10 64 bits (last update)
Chrome (last update)
JAWS (last update)
NVDA 2020.4