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:

  • Margherita
  • Fiorentina
  • Four Seasons
  • American Hot
  • Giardiniera
  • 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:

  • Vegetarian
    • Giardiniera
    • Margherita
  • Meat
    • American Hot
    • Fiorentina
    • Four Seasons
  • Fish
    • Tuna and Sweetcorn

It is here that the optgroup tag comes into its own – to supply the groupings for the individual items.

Technical bit

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.

So, <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'

Categories: , , , | Tags: , , , | No Comments

Share this page (Links open new windows/tabs)

  • Share this page on LinkedIn (opens new window)
  • Share this page on Delicious (opens new window)
  • Share this page on Digg (opens new window)
  • Share this page on Posterous (opens new window)
  • Share this page on Reddit (opens new window)

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:

Next post: