2

I've looked at this: Is it possible to style a select box? but it does not satisfy my needs of having a completely accessible select box that can be styled (Unless i missed something).

Before I embark off on my own control I'd like to check in here if anyone ever made or found a select that can satisfy the following requirements.

  • Keyboard accessible and works like the normal select box. Fx Handles all of the following keyboard shortcuts http://access.aol.com/dhtml-style-guide-working-group/#combobox
  • Allows both the drop down open menu content and drop down it self to be styled (including focus and hover states)
  • Supports clickable labels.
  • Works properly (as an aria-combobox) on Jaws, NVDA and Voice over

Every single one on the above mentioned link does not pass this criteria fully

Community
  • 1
  • 1
Tim
  • 3,576
  • 6
  • 44
  • 58
  • Look into http://ivaynberg.github.io/select2/ and use CSS – Dom Apr 08 '14 at 22:38
  • 1
    Didn't check the code fully, but check out http://test.cita.illinois.edu/aria/combobox/index.php. If one of those pass, I recommnd posting your code as an answer so people can reference it. – Ryan B Apr 09 '14 at 13:02
  • The U Illinois one looks promising as a starting point. The select 2 one doesn't have the correct keyboard shortcuts and doesnt announce with screen readers. – Tim Apr 14 '14 at 15:02

1 Answers1

1

StyleSelect:

  • Is keyboard navigable
  • Appears in tabIndex by default
  • Screen reads exactly the same as a regular select box, since it uses the aria-hidden attribute.

enter image description here

Many of the a11y browsers are proprietary, but if you'd like to test in them and report if anything else needs adding the project will work on it (it also takes pull requests if you can fix it yourself).

mikemaccana
  • 110,530
  • 99
  • 389
  • 494