WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Inaccessible mega menu and WCAG2

for

From: Lynn Holdsworth
Date: Jan 19, 2015 11:04AM

Aha! OK Andrew, that makes perfect sense. Thanks for clarifying.

On 19/01/2015, Andrew Kirkpatrick < <EMAIL REMOVED> > wrote:
> Sorry, I may not have been clear. Left/right move the focus left and right
> within the megamenu, which contains multiple columns of items.
> AWK
>
> -----Original Message-----
> From: <EMAIL REMOVED>
> [mailto: <EMAIL REMOVED> ] On Behalf Of Lynn Holdsworth
> Sent: Monday, January 19, 2015 11:26 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Inaccessible mega menu and WCAG2
>
> Hi Andrew,
>
>> 7) when a menu is open the user can move between menu items with tab
>> or arrows, including left/right arrows
>
> Just curious about the thinking behind using the left/right arrows to move
> up and down the items in a submenu. In native implementations the left/right
> arrow keys move the focus across the items in the menubar at the top.
>
> Cheers, Lynn
>
> On 19/01/2015, Andrew Kirkpatrick < <EMAIL REMOVED> > wrote:
>> So, the way that the mega menu
>> (http://adobe-accessibility.github.io/Accessible-Mega-Menu/) was
>> designed:
>>
>> 1) tabbing to the menu does not open the submenu, but focuses the
>> first menu heading.
>> 2) tabbing when the menu is closed moves the focus to the next menu
>> heading (this was a heavily debated topic - the other option is to
>> have one tab stop for the entire menu system when closed).
>> 3) when focus is on a menu heading, hitting down arrow or enter will
>> open the menu.
>> 4) when focus is on a menu heading left and right arrows will move the
>> focus between menu headings
>> 5) when a menu is open, escape will always close the submenu
>> 6) when the submenu is open and focus is on the menu heading, the
>> example implementation takes the user to a page containing links to
>> the submenu items when you click on that link. This can be easily
>> modified.
>> 7) when a menu is open the user can move between menu items with tab
>> or arrows, including left/right arrows
>> 8) to tab past the menu system the user either needs to tab through
>> the menu options until they reach the end, or close the submenu that
>> is open and tab past the smaller number of menu headings into the
>> content).
>>
>> I do agree that even if the menus are in view that users don't need to
>> be able to tab through all of the submenu links, but there does need
>> to be a keyboard accessible way to access all of the submenu items.
>> If a menu system is set up to enable arrow keys to access the items,
>> then that should be fine.
>>
>> Our example is surely not the only way, nor is it perfect, and
>> depending on the specific menu system needed for the content it may or
>> may not meet the needs of the site. However, we put it on GitHub as
>> an example for people to look at, discuss, learn from, and if they
>> choose, to fork and use for their own purposes (in keeping with the terms
>> of the license, etc, etc).
>>
>> AWK
>>
>> -----Original Message-----
>> From: <EMAIL REMOVED>
>> [mailto: <EMAIL REMOVED> ] On Behalf Of _mallory
>> Sent: Monday, January 19, 2015 2:40 AM
>> To: WebAIM Discussion List
>> Subject: Re: [WebAIM] Inaccessible mega menu and WCAG2
>>
>> On Sun, Jan 18, 2015 at 04:02:59PM +0000, Andrew Kirkpatrick wrote:
>>> The decision to not make the submenu appear on focus is deliberate
>>> and is designed to same keyboard users the trouble of needing to tab
>>> through many additional links.
>>
>> Showing submenus visibly on focus does *not* require the keyboarder to
>> tab through all the submenu links, if the menu is built properly.
>>
>> The advantage of showing submenus on focus is, as the other reply has
>> said, the user knows they exist. Having another separate functionality
>> like a separate "activate" button as proposed earlier has the
>> disadvantage that users never discover it, or get confused.
>>
>> _m
>> >> >> list messages to <EMAIL REMOVED>
>> >> >> list messages to <EMAIL REMOVED>
>>
> > > messages to <EMAIL REMOVED>
> > > >