Accessible Forms – Grouping Options With Optgroup
Published: | No Comments
Reading Time: 2 minutesThe
<optgroup> HTML tag is a grouping element used in conjunction with the list of options in a select (or dropdown) input field. This post shows how it can help your users and potentially improve the accessibility of a web form.
Short list, long list
If you have a short list of items in a select input field it may be easy for visitors to the form to find the entry they’re looking for.
Consider this list of favourite pizza toppings:
- Four Seasons
- American Hot
- Tuna & Sweetcorn
In this list a way of grouping the options may be superfluous. However not all dropdown lists are that simple and even in pizza toppings there are useful groupings which may help users. I may want to differentiate between vegetarian, meat and fish options.
Now the list might be:
- American Hot
- Four Seasons
- Tuna and Sweetcorn
It is here that the optgroup tag comes into its own – to supply the groupings for the individual items.
This example HTML shows how the above list would be marked up:
<label for="pizza">What is your favourite pizza topping?</label> <select id="pizza" name="pizza"> <optgroup label="Vegetarian"> <option value="gia">Giardiniera</option> <option value="mar">Margherita</option> </optgroup> <optgroup label="Meat"> <option value="amh">American Hot</option> <option value="fio">Fiorentina</option> <option value="fou">Four Seasons</option> </optgroup> <optgroup label="Fish"> <option value="tun">Tuna</option> </optgroup> </select>
And here’s what it looks like:
In most modern browsers the
<optgroup> labels are visible but not selectable. And they can be styled in your stylesheet if you wish.
Optgroup and Screen Readers
This story would have a happy ending if the
<optgroup> tags were supported and voiced in screen readers. But unfortunately they are not widely supported. Testing has shown that neither JAWS 11 or NVDA2011.2 recognise the
<optgroup>. It’s disappointing but hopefully this will change in the future. Maybe if more people actually used the
<optgroup> screen reader developers would respond. The good news is that using
<optgroup> tags does not adversely affect the way screen readers interpret a form.
<optgroup> remains a useful semantic visual grouping item which improves the usability of selects but doesn’t at this stage do much to improve accessibility despite being a WCAG2.0 recommended technique.
Any other suggestions?
If you’ve got comments on any of the points ccovered in this post (or any of the others) I’d be glad to hear them. Likewise if you feel I’ve missed something please let me know. You can leave a comment using the comment form below.
Other posts tagged 'Forms'
- How to Build an Accessible WordPress Theme - Apr 28th, 2019
- Accessibility Checklist - Apr 7th, 2019
- Dragon Naturally Speaking Video 9 – Internet Forms - Mar 13th, 2014
- Video: How Do I Know My WordPress Website is Accessible? - Mar 5th, 2014
- Accessible Forms – Grouping Elements Together With Fieldset - Oct 11th, 2011
- Accessible Forms – Selects or Dropdowns - May 24th, 2011
- Accessible Forms – Checkboxes and Radio Buttons - Apr 26th, 2011
- Accessible Forms – Should Every Input Have a Label? - Apr 15th, 2011
- Designing and Building Accessible Forms - Apr 12th, 2011
There are no comments yet - would you like to leave one?
Like to leave a comment?
Please note: All comments are moderated before they will appear on this site.
Previous post: Evolving Standards in Accessibility 2011 – Part 2