Accessible <select> elem solution

[alademann]

Proposed solution for Issue 264

Instead of taking the "deep dive" into making the Chosen markup accessible, my proposed solution takes a much simpler approach centered around the principles of progressive enhancement.

Instead of using display: none on the converted <select> element, I have used a utility CSS class that follows accepted best practices for hiding content so that it is accessible to screen readers. In addition to this, I have added an aria-hidden=true to the <div class="chosen-container"> element.

The combination of these two simple changes makes for an accessible solution because:

• The <select> element will be the control used by screen readers
• The <div class="chosen-container"> element will be ignored by screen readers

Obviously a fully-accessible listbox solution would be ideal - but IMO, this change will go a long way to making existing Chosen implementations accessible today.

[stof]

Please prefix the class with chosen- to avoid conflicts with other libraries.

[alademann]

Good call @stof - done.

[stof]

There is a PR starting to add accessibility to Chosen: #2047

I guess both PRs should not be merged, right ? What do you think about the accessibility PR ?

[alademann]

@stof if that PR is going in any time soon, then no - it doesn't make sense to merge this one. But if it could take a month or two... why not gain the improvements from this, and simply remove them as part of the changes implemented in #2047