harvesthq/chosen — pull request #2013 by alademann (2014-07-16 16:18:18+00:00)
Title: Accessible `<select>` elem solution

> Proposed solution for [Issue 264](https://github.com/harvesthq/chosen/issues/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 `` element, I have used a utility CSS class that follows [accepted best practices for hiding content](http://a11yproject.com/posts/how-to-hide-content/) so that it is accessible to screen readers. In addition to this, I have added an `aria-hidden=true` to the `

` element.

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

+ The `` element will be the control used by screen readers
+ The `

` 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.