Accessibility issues with Chosen

mgifford commented 12 years ago

Just linking back to this discussion about accessibility & Chosen from the Drupal Community.

http://drupal.org/node/1271622#comment-4962028

Lots of nice usability enhancements in Chosen.

obert01 commented 5 years ago

After a few tests, I can confirm the compiled version (.zip archive) posted above (on July 1, 2016) works.

However, when I try @cooperfellows 's branch, or when I clone the @cooperfellows 's branch and then merge with harvesthq/master, the menu options are properly spoken by JAWS but the ENTER key does not submit the form.

cooperfellows commented 5 years ago

Hi @obert01, thanks so much for taking a look at this using JAWS, that was a big piece I was missing during my work.

This branch is way out of date from the current harvesthq/master branch, I will likely need to review the changes and adjust my PR in order to get things back to a working state.

I will try to get to this sometime before the end of the month, I'm pretty backed up at work right now.

I would love to get one of the contributors eyes on it again once it is updated, so I will ping @stof (who looked at the initial pull back in 2016) once I've got it updated.

obert01 commented 5 years ago

Thanks a lot.

For your information, I can test with all combinations of JAWS and NVDA screen readers, with the following browser : Internet Explorer 11, Google Chrome, Firefox ESR, Firefox Standard, Microsoft Edge.

obert01 commented 5 years ago

Any progress on this?

I'm sorry to insist, but my daily work suffers of this lack of accessibility.

Moreover, adding accessibility support would allow Chosen to be used in public sector / administration websites, since regulation in more and more countries is going in this way.

Thank you

csmuthukuda commented 5 years ago

Hi, We have an application that has used chosen and now we need to support accessibility but going through this what I can see is this has not been merged yet. It will be really helpful if @cooperfellows can finalize this and merge please.

cooperfellows commented 4 years ago

Hi @obert01 and @csmuthukuda,

I've just made updates to get my PR up to speed with the latest version of Chosen, please take a look here: https://github.com/harvesthq/chosen/pull/2596

You can get a copy of my forked repository and test on your end. I would love some real life feedback.

It passed all of the TravisCI checks, but I don't think they cover any A11Y issues. Let me know what you think.

csmuthukuda commented 4 years ago

Hi @cooperfellows , Thanks, a lot for your dedication to keeping this alive. I'll test this and let you know the feedback of this. I really hope the owners will consider merging this to the master. This is a mandatory requirement now.

cooperfellows commented 4 years ago

Thanks @csmuthukuda I would love for it to be merged in....

@pfiller @stof @tjschuck @koenpunt, anything I can do to help get this looked at? It really is a missing piece to an otherwise incredibly awesome system.

obert01 commented 4 years ago

Hi @cooperfellows,

I have tested your awesome work with most current web browser and the JAWS and NVDA screen readers. Thank you !

Arrowing through the options with the keyboard works well: speech and braille feedback is perfect, meaning that all ARIA attributes are well defined. However, when I press ENTER to choose an option, nothing happens. I am not experienced enough with JavaScript to determine if the issue comes from Chosen, or if it is present in the application using it.

To reproduce, try choosing an option in a Chosen combobox only using the keyboard: TAB to focus the combobox, arrow keys to browse the list, ENTER to select.

Once again, thank you very much.

cooperfellows commented 4 years ago

Thanks for that information @obert01. I will take a look and see what I can find.

cooperfellows commented 4 years ago

@obert01 Can you try using this JS fiddle to confirm it's working/not working? THis fiddle is loading the compiled jQuery version of my latest commit.

https://fiddle.jshell.net/cfellows/r5kp1udb/8/show/light/

I am able to navigate that dropdown using my keyboard (Chrome Latest), but I am NOT running a screen reader.

Let me know what you think.

obert01 commented 4 years ago

Hi @cooperfellows,

No problem with your JS Fiddle. Thus I suppose the problem is due to the way Chosen is used in MISP (https://www.misp-project.org/).

I will check this with the MISP project team.

Thanks

cooperfellows commented 4 years ago

Thanks @obert01. Please do let me know what you find out. It could point to an incompatibility with a specific set up of Chosen, so if there is a way for me to see how MISP utilizes it, I can try to take a look at their implementation.

Is chosen used somewhere publicly?

csmuthukuda commented 4 years ago

@cooperfellows can you please give me a new build with the latest changes I don't know how to build it.

woenlee commented 4 years ago

@obert01 @cooperfellows I just tried the Fiddle with NVDA, it seems that the keyboard navigation works perfectly (including selecting with ENTER key). However, when I navigate through with up and down arrow keys, the screen reader reads, "____not selected", i.e. "Bermuda not selected". Is this the expected behavior?

obert01 commented 4 years ago

I have the same issue as @woenlee. It is not so harmful. But maybe, the way the "selected" attribute is set on the selected item should be checked.

cooperfellows commented 4 years ago

What is the expected behavior when you "enter" and "exit" a list item? When you navigate down onto a new item, should it read out the newly selected item? Does it also announce what is NO longer selected? @obert01 @woenlee

On Sun, Aug 25, 2019 at 12:18 PM Olivier BERT notifications@github.com wrote:

I have the same issue as @woenlee https://github.com/woenlee. It is not so harmful. But maybe, the way the "selected" attribute is set on the selected item should be checked.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/harvesthq/chosen/issues/264?email_source=notifications&email_token=ABT3ZTIESGLX6IYW4BF2QCLQGKWDVA5CNFSM4AATGGB2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5CWTYY#issuecomment-524642787, or mute the thread https://github.com/notifications/unsubscribe-auth/ABT3ZTMH2KUYYE7HNO2UGH3QGKWDVANCNFSM4AATGGBQ .

-- ~Cooper

woenlee commented 4 years ago

@cooperfellows After running some axe accessibility tests, I seem to have found a bug in your PR, which explains why it was doing that. In line 342 of Abstract-chosen.coffee, the input has 2 roles assigned to it, "combobox" and "listbox".

`

` After giving the

mlncn commented 4 years ago

Paying customers of Harvest here, and testing to be internally accessible ran into this. Accessibility is a must, and we will move off of Harvest if this is not addressed, if a maintainer with Harvest does not at least show some support to this soon.

thomasnguyen95 commented 4 years ago

@obert01 Can you try using this JS fiddle to confirm it's working/not working? THis fiddle is loading the compiled jQuery version of my latest commit.

https://fiddle.jshell.net/cfellows/r5kp1udb/8/show/light/

I am able to navigate that dropdown using my keyboard (Chrome Latest), but I am NOT running a screen reader.

Let me know what you think.

@cooperfellows I was testing this JS Fiddle with JAWS 2019 and experienced something slightly different when navigating the options with the up and down arrow keys. On Google Chrome 71.0.3578.98: JAWS would not read the current highlighted value unless the list did some scroll/rendering. i.e. If the list is showing

<option selected="selected" value="United States">United States</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>

9 options, JAWS does not read the highlighted option when pressing down until you get to the 10th option at . The box does a little auto scroll to highlight Antigua and Barbuda and then read the option.

On IE 11.0.9600.19463: Navigating with the arrow keys seems to read the current highlighted option correctly going up and down. Does not require some sort of render.

Would like to know if anyone else has experienced this. @obert01 @woenlee

obert01 commented 4 years ago

Hello and thanks for your work.

Unfortunately, this doesn't work properly. It is extremely hard to describe, as the behavior changes in function of the browser or screen reader used.

I think some aria properties are not present or are not updated. Here the general problems I encounter:

Scrolling issue: when I arrow down and reach the end of the visible list of items, I have to press two times on the down arrow to focus the next item.
When I press ENTER to select an item, the focus is not released. The expected behavior would be that the screen reader goes back in quick navigation mode and let me read the rest of the web page. Instead, the arrow keys are still controlling my choice in the list.
The current scripts do not allow to know if proposals are displayed and how many are they. In most accessible select plugins I know, JAWS/NVDA announce how many results match the string entered in the text input.
Finally, I have the impression JAWS does not understand if the list is collabsed or expanded. Sometimes, after making a choice with ENTER and trying to read the rest of the page, JAWS still reads the latest proposals that have been displayed.

Good points:

The auto-complete part works well. If I enter "fra", JAWS pronounce "France", and I can press ENTER to select.
The items are read properly as I arrow in the list.

I unfortunately don't know many things in regards of ARIA, JavaScript and web in general. I suggest you to be sure the maximum of ARIA properties are properly set and updated.

Please find below the demo and code of a JQuery plugin that perfectly interacts with screen readers: https://a11y.nicolas-hoffmann.net/autocomplete-list/

I am sorry not being able to help more.

Don't hesitate to post new demos of your work. I am happy to test for you.

harvesthq / chosen

Accessibility issues with Chosen #264