WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Keyboard navigation using arrows only

for

From: Michael Tangen
Date: Sep 2, 2014 1:40PM

Jordan, I've been working on this whole keyboard navigation thing and been
doing some extensive research on various approaches to this. I managed to
get a working prototype that at least works with JAWS and using both tab
and arrow keys — http://designbymichael.com/test/menu/

It all has to do with the placement of role="menu", role="menuitem" and a
variety of other ARIA attributes. A few basics that I learned:


- Generally speaking sub-menus (<UL> tags) get a role="menu" attribute
- All menu items (<A> tags) get a role="menuitem" attribute
- Menu items with a submenu also get the attribute aria-haspopup="true"
- Use the attribute aria-hidden="VALUE" (true/false) on submenus to
tell the browser and assistive technology if an item is hidden or not
- Also use CSS attributes (display and visibility) to control subnav
visibility
- I also found that for some reason, the *first level* LI tags need an
attribute role="menu" if you want the presence of a sub-menu to be
announced. But generally speaking, all submenu UL tags should have a
role="menu" attribute.

Hope that helps a little.




On Tue, Sep 2, 2014 at 2:22 PM, Jordan Wilson < <EMAIL REMOVED> >
wrote:

> I haven't gotten to the point of getting access to their internal
> development team about the why and how. Its not even just a widget, its
> the whole site. It seemed so intentional I was afraid I had missed
> something.
>
> The arrow keys getting intercepted in screen readers is a great point I
> hadn't thought of yet.
>
> Hopefully I get a chance to talk to them in the near future, thanks for
> your perspectives!
>
>
>
> On 9/2/14 3:31 PM, "Mallory van Achterberg" < <EMAIL REMOVED> >
> wrote:
>
> >On Tue, Sep 02, 2014 at 06:24:18PM +0000, Jordan Wilson wrote:
> >> They clearly spent a lot of time and effort ensuring the arrow
> >>navigation, so I figured I'd ask the community.
> >
> >I gotta wonder... why?? It's like carefully making buttons out of
> >spans with all the manual roles and scripting.
> >
> >Have you asked them what problem they were solving?
> >_mallory
> >> >> >>
> > > >