Option lists with many items may cause problems for users with assistive technology, such as screen readers. The solution is to use the Optgroup element to split options in the Select list into manageable groups. This also better practice for usability.
Download Web Axe Episode 51 (Option Groups [OptGroup])
WCAG 1.0 says: Guideline 2.3 Divide large blocks of information into more manageable groups where natural and appropriate. [Priority 2]
Links
- The SELECT, OPTGROUP, and OPTION elements (W3C)
- Grouping Form Controls (W3C)
- Accessibility Conformance Tests, Further Improvements
- Accessible Forms from HTML Dog
Sample Code:
News
- What is an on-screen keyboard?
- WCAG 2.0 Polishing the Rough Edges from Jared Smith at WebAIM
3 replies on “Podcast #51: Option Groups (OptGroup)”
As Jared Smith from WebAIM reminded me, in addition to making select lists more ‘usable’, the Opt Group makes them more understandable for those with certain cognitive disabilities.
I have always not used/recommended Option Groups as Jaws and Zoom Text do not read the text in the option group. Which can be a big deal depending on how you are categorizing your list items.
IS this still not the case?
Mark
Hello Mark,
As Joe Clark would say, this is a problem with the user-agent, not the coding of the web site. You’d think an advanced program like JAWS would interpret the optgroup since the tag’s main purpose is for usability and accessibility!
I’ve contacted a couple resources about the optgroup/screenreader issue (as the answer doesn’t seem to be found anywhere on the web) but haven’t heard back. I’ve attempted to test it in JAWS myself, but I’m not very good with that program and wouldn’t report any of my pitiful experiences!
With that said, one obvious solution is to not create really long select lists–alternatively, you can try the following techniques:
1) The user selects a category, then options for that category only are presented–don’t forget progressive enhancement here 😉
2) The user inputs the option in a simple text field (and possibly search on that to provide a short list of options).
3) If the field is not required, provide a link to jump past the Select.