Valid uses of the ARIA group role

Just finished reading the ARIA spec again, and I am curious about the possible valid uses of the group role.  To date I've only ever seen it used with treeview, but the definition has me thinking that it could be used as a more semantic way to express collections of related siblings in a composite control over the aria role of separator.

For example, drop-down menus often visually group related menuitems by drawing a horizontal separator between groups.  By using the group role we could express this relationship semantically.  Each group could even be labeled using aria-label, right?

For example:

<div role="menu">
  <ul role="group">
    <li role="menuitem">Inbox</li>
    <li role="menuitem">Archive</li>
    <li role="menuitem">Trash</li>
  </ul>
  <ul role="group">
    <li role="menuitem">Custom Folder 1</li>
    <li role="menuitem">Custom Folder 2</li>
    <li role="menuitem">Custom Folder 3</li>		
  </ul>	
  <ul role="group">
    <li role="menuitem">New Folder</li>
  </ul>
</div>

Here is a demo example:
http://public.yahoo.com/kloots/aria/menubutton.html

Here is a movie of the example running if Firefox 3.6 using NVDA:
http://www.youtube.com/watch?v=rjVufxRlJ8k

As you can hear from the movie, it is nice how NVDA expresses the groups by announcing the ordinal position of the menuitem relative to the total number of items in the group.

To me this approach seems better than using the separator role to express groups, and could be used to group other descendants of composite controls, like buttons in a toolbar.  I am thinking that this could be a wholesale replacement for the separator role.

Using a separator you introduce markup for the purpose of applying the separator role, and are therefore introducing markup for the purpose of presentation.  Additionally the groups approach allows for the labeling of each group which could be a nice way of providing users of screen readers with additional context.

So, is this a valid use of the group role?  Any feedback would be greatly appreciated.

Todd Kloots
Accessibility Engineer
Yahoo!, Inc.

Received on Friday, 29 October 2010 03:40:44 UTC