2

In the application that I'm currently developing the UI for, the menu consists of sub menus that each have a heading. For this I'm using description lists but would like to add aria roles to the menu components. There doesn't seem to be a role for menu headings in the spec. Below is an example layout. Any thoughts on the correct role? Labeled-by doesn't seem to cut it but maybe that's correct.

<dl role="menubar">
    <dt role="menuitem">Item One</dt>
    <dt role="menuitem">Item Two</dt>
    <dd>
        <dl role="menu">
            <dt role="???">Sub menu</dt>
            <dd role="menuitem">Item One</dd>
            <dd role="menuitem">Item Two</dd>
       </dl>
   </dd>
</dl>
Jeff
  • 195
  • 9
  • Why do you think there's a need? Assistive technology knows how to handle lists, and if a list is marked with a menu role, the fact that the list items are part of the menu is implied. – isherwood Dec 07 '14 at 00:02
  • That's a good point, but then why do we have a specification defining the use of ARIA roles? I agree that most assistive technology understands lists, but do they understand them in the context that I'm using them? Im just starting to branch out into using ARIA roles so I'm just curious. – Jeff Dec 07 '14 at 00:09
  • You need a role to indicate that a list is a menu since there are other uses for lists. After that it's pretty clear, no? – isherwood Dec 07 '14 at 00:10
  • One of the best things you can do as a developer is to use the AT tools yourself, or, better, work with someone who does so out of necessity. I found that I was doing some work that simply wasn't necessary that way. – isherwood Dec 07 '14 at 00:11
  • I'll run the UI through JAWS and see what happens. So you think the only necessity is a role attribute on the parent? Just out of more curiosity, why do you think the child roles were spec'd? Maybe something browsers could map to? (Ie.
    maps to role="banner").
     – Jeff Dec 07 '14 at 02:13
  • The use of `dl` here is not valid. Did you check out http://stackoverflow.com/questions/12279113/recommended-wai-aria-implementation-for-navigation-bar-menu – Ryan B Dec 08 '14 at 17:58
  • Ryan you are correct. Thanks for pointing out the incorrect syntax, I've updated the original submission, but the original question remains. What role would be attached to the definition header tag in the nested definition list? – Jeff Dec 09 '14 at 19:04

1 Answers1

0

ok, you should probably not be using and related tags, there is no reason not to simply use ul and li. Take a look at this implementation:

http://dylanb.github.io/bower_components/a11yfy/examples/menu.html

ARIA uses the hierarchy to determine the "heading", the example above will show you how to do this with ul and li. You can achieve the same thing with dl but I have not seen it done.

One more thing you must remember in order to have the menu announce correctly: All elements in the hierarchy MUST have a role. If the role is not one of the menu roles, then you must add role="presentation" or the ordinal announcements of the menu will be wrong.

unobf
  • 7,158
  • 1
  • 23
  • 36