search

HemantNegi / jquery.sumoselect

A jQuery Single/Multi Select plugin which can be used on almost any device
http://hemantnegi.github.io/jquery.sumoselect
559 stars 287 forks source link

Accessibility #131

Closed NePheus closed 7 years ago

NePheus commented 8 years ago

Is it possible to add functions for accessibility?

Keyboard control: Sumoselect should behave as a normal select list. It should be reached by tab-key and when the focus is set, it should navigate with the arrow keys and open with enter or space. Inside the list items it should start at the first one moving over the last one.

Screen readers: There should be added a role attribute to the dropdown wrapper and a (maybe configure option) possiblity to add the aria-labelledby attribute.

It would be great if this could be added to a future release. This is a great plugin and my choice nr. 1 at the moment.

HemantNegi commented 8 years ago

tab key selection and keyboard navigation is already there, check on demo page.

NePheus commented 8 years ago

You are right, sorry. What about the screen reader?

HemantNegi commented 8 years ago

I did not tested very thoroughly but it should be compatible

NePheus commented 8 years ago

For a better accessibility you should add a role to the 'dropdown toggle' and an aria state that gets updated. And the tabindex should be set to this toggle and not the whole container. i.e.: <p class="CaptionCont SelectBox" title="Volvo" role="button" aria-expanded="false">...</p> So the screen readers reads something like "Volvo - button - not expanded". The aria-expanded must switch to true as soon as the dropdown opens.

http://davidstutz.github.io/bootstrap-multiselect/ here is the same structure as I wrote above, but he uses a button instead of a p-element, so you would need to add a role="button".

rossberenson commented 7 years ago

@NePheus , were you able to make any progress towards duplicating that kind of functionality?

NePheus commented 7 years ago

Honestly I hope that the developer will add this in a future release, because this is my favourite dropdown plugin. I did not extend it by myself yet. You could do it yourself if you observe the rules and html structure of the bootstrap example above.

rossberenson commented 7 years ago

@NePheus, yea I do too, but this isn't the only dropdown plugin that doesn't support screen readers. Bootstrap-select was the only one I found that does.

MswathiM commented 4 years ago

Hi, We are using JAWS screen reader and It's not announcing the options in the drop down when we navigate through, using the down arrow in keyboard. We tried with "arial-label" in "li" tag but it didn't work.

Would you please help if there is any fix for this?