E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 4 (In chronological order)

From: Chris Rodriguez
Date: Wed, Feb 13 2013 8:48AM
Subject: ARIA menubar/menuitem keyboard use
No previous message | Next message →

Hello,

I'm working with a vertical style subnavigation menu that I'd like to make
keyboard navigable. It functions like an accordion - clicking/pressing
Enter on one level will "expand" it's child pages. Currently, I can Tab
through the menu and navigate to each element, but screen readers aren't
aware there are nested lists under each top-level section.

It was brought to my attention to try the ARIA role="menubar" and
"menuitem". I've implemented this and the screen readers understand the
items are part of a menu, but I cannot use the keyboard arrow keys to move
around as I'd like.

Does anyone have insight as to why this is the case and suggestions or
recommendations for making it work?

Thanks in advance,
Chris

From: Jared Smith
Date: Wed, Feb 13 2013 9:05AM
Subject: Re: ARIA menubar/menuitem keyboard use
← Previous message | Next message →

On Wed, Feb 13, 2013 at 8:48 AM, Chris Rodriguez wrote:

> Does anyone have insight as to why this is the case and suggestions or
> recommendations for making it work?

First, thanks for bringing this discussion to the mailing list.
Twitter's 140 characters just doesn't work for such things.

Adding ARIA roles does not change the interactivity or keyboard
functionality. It simply changes the information that is presented to
a screen reader user. By indicating that it is a menu, the user can
expect a certain keyboard interactivity (e.g., arrow keys to
navigate), but you still most program all of that keyboard
interactivity. The ARIA spec outlines interactivity patterns for you
to implement - http://www.w3.org/WAI/PF/aria-practices/#aria_ex

But to take a step back, it may be first useful to ensure that an ARIA
menubar is actually appropriate. This is not typically appropriate for
web site navigation - it's intended for a web application's menu bar
(think "File...", "Edit...", etc.). A good example of such a menu bar
implementation can be found at
http://hanshillen.github.com/jqtest/#goto_menubar

If a menu bar isn't actually what you're building, then ARIA may not
provide a perfect solution. Adding aria-expanded might provide a cue
to the user to expand/collapse the menu.

Jared

From: Gunderson, Jon R
Date: Wed, Feb 13 2013 9:07AM
Subject: Re: ARIA menubar/menuitem keyboard use
← Previous message | Next message →

You must add the keyboard event handlers to add the keyboard support, some examples:

http://oaa-accessibility.org/examples/role/85/

http://hanshillen.github.com/jqtest/#goto_menubar

ARIA does not add any keyboard behavior, it only provides descriptive information to accessibility APIs when that element has keyboard focus.

You should review:
http://www.w3.org/TR/wai-aria-practices/#kbd_general_within

Jon



-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Chris Rodriguez
Sent: Wednesday, February 13, 2013 9:48 AM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] ARIA menubar/menuitem keyboard use

Hello,

I'm working with a vertical style subnavigation menu that I'd like to make keyboard navigable. It functions like an accordion - clicking/pressing Enter on one level will "expand" it's child pages. Currently, I can Tab through the menu and navigate to each element, but screen readers aren't aware there are nested lists under each top-level section.

It was brought to my attention to try the ARIA role="menubar" and "menuitem". I've implemented this and the screen readers understand the items are part of a menu, but I cannot use the keyboard arrow keys to move around as I'd like.

Does anyone have insight as to why this is the case and suggestions or recommendations for making it work?

Thanks in advance,
Chris

From: Bryan Garaventa
Date: Wed, Feb 13 2013 1:23PM
Subject: Re: ARIA menubar/menuitem keyboard use
← Previous message | No next message

Another example if it's helpful, is at
http://whatsock.com/modules/aria_tabs_menu_modules/demo.htm
It's important to synchronize focus handling with the relevant ARIA markup
correctly, otherwise the right feedback won't be conveyed to screen reader
users.

I'm currently working on a technical style guide for developers regarding
components such as these, which I hope to have completed within the next two
weeks.

----- Original Message -----
From: "Chris Rodriguez" < = EMAIL ADDRESS REMOVED = >
To: < = EMAIL ADDRESS REMOVED = >
Sent: Wednesday, February 13, 2013 7:48 AM
Subject: [WebAIM] ARIA menubar/menuitem keyboard use


> Hello,
>
> I'm working with a vertical style subnavigation menu that I'd like to make
> keyboard navigable. It functions like an accordion - clicking/pressing
> Enter on one level will "expand" it's child pages. Currently, I can Tab
> through the menu and navigate to each element, but screen readers aren't
> aware there are nested lists under each top-level section.
>
> It was brought to my attention to try the ARIA role="menubar" and
> "menuitem". I've implemented this and the screen readers understand the
> items are part of a menu, but I cannot use the keyboard arrow keys to move
> around as I'd like.
>
> Does anyone have insight as to why this is the case and suggestions or
> recommendations for making it work?
>
> Thanks in advance,
> Chris
> > >