WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Mega Menu and Safari

for

From: _mallory
Date: Mar 30, 2016 11:08AM

On Wed, Mar 30, 2016 at 12:36:55PM -0400, Robert Fentress wrote:
> As to the ARIA Authoring Practices, while those are valuable, if your
> are doing something application-like, if you are using menus in the
> way commonly found on web pages, you would likely violate many users
> expectations by following the spec. As others have noted, web
> applications--not to mention regular web sites that make sporadic use
> of custom controls--are not the same as desktop applications. That
> being said, mapping to system APIs does provide value. It is a
> difficult nut to crack.

I avoided the whole menu thing from aria practices when making my
megas because I'm convinced menu/menuitem roles should only be used
for application menus-- where instead of links, you have controls.
Clicking them should Do Stuff (open a file, save, edit, whatever).

However what I used wasn't 100% in my book either: tab keys (on
desktop) went from top-level item to top-level item. Enter selected
that link to take you to that category page. When an item was focussed,
the submenu appears. Arrows could cycle around there (and anything else
in there could be normally navigated at least by desktop SRs, I didn't
and still really don't have any mobiles to test anything on). The submenu
remained onscreen so long as we didn't either move focus to the next/prev
main item or out of the menu entirely.

This may be considered breaking the rule that focus doesn't make changes
to a page, however these pages were already doing so with hover and
that was completely what the users expected (nobody expected a submenu
to appear by clicking-- they expected to navigate elsewhere with
clicking). I also could have maybe improved with something like active
descendent or has popup or whatever, but at the time I was building
these, haspopup was in the middle of a spec change and I had left it.

It's quite likely these didn't work well on VO anyway.

cheers,
_mallory
>
> On Wed, Mar 30, 2016 at 11:47 AM, Paul J. Adam < <EMAIL REMOVED> > wrote:
> > Looks like it only works if you press the down arrow key with VoiceOver quick navigation turned off. Or Tab into the menu.
> >
> > It would be smart for JavaScript widgets that have various keyboard navigation methods to display a visible tooltip or show some instructions on how to actually operate the menu. Those instructions being accessible to screen reader users also.
> >
> > This menu works as you're expecting with VO+Right Arrow key. http://www.washington.edu/accesscomputing/AU/after.html <http://www.washington.edu/accesscomputing/AU/after.html>;
> >
> > Here's the ARIA Authoring Practices with keyboard interaction instructions, https://www.w3.org/TR/wai-aria-practices/#menu <https://www.w3.org/TR/wai-aria-practices/#menu>
> >
> > Paul J. Adam
> > Accessibility Evangelist
> > www.deque.com
> >
> >> On Mar 30, 2016, at 10:18 AM, Robert Fentress < <EMAIL REMOVED> > wrote:
> >>
> >> Hi, all.
> >>
> >> I've just noticed a problem with the way Adobe's Accessible Mega Menu (
> >> https://adobe-accessibility.github.io/Accessible-Mega-Menu/) works with
> >> Safari and VoiceOver. Basically, when you activate a menu with
> >> Control+Option+Space the menu appears, but when you then press
> >> Control+Option+Right Arrow to have VO voice the text in the menu, the menu
> >> collapses. It only stays open if you tab into the revealed contents.
> >> This, of course, kinda defeats one of the points of this pattern, in that
> >> it means that you really only have access to the menu options, not the
> >> other structured content. In that case, you might as well just make it a
> >> more standard menu.
> >>
> >> I could have sworn I'd tested this before and it had worked. Do you know
> >> if anything has changed in recent updates to Safari or VoiceOver that would
> >> have affected this, or did I just miss it previously?
> >>
> >> On a related note, if you are stuck with this basic turducken mega menu
> >> pattern, is there an implementation that works better than Adobe's? If I
> >> could convince the people I'm making recommendations to to deviate slightly
> >> from the strict mega menu pattern, would a mega modal be better and, if so,
> >> do you know of some particularly good implementations?
> >>
> >> Best,
> >> Rob
> >>
> >> --
> >> Robert Fentress
> >> Senior Accessibility Solutions Designer
> >> 540.231.1255
> >>
> >> Technology-enhanced Learning & Online Strategies
> >> Assistive Technologies
> >> 1180 Torgersen Hall
> >> 620 Drillfield Drive (0434)
> >> Blacksburg, Virginia 24061
> >> > >> > >> > >> > >
> > > > > > > > >
>
>
> --
> Robert Fentress
> Senior Accessibility Solutions Designer
> 540.231.1255
>
> Technology-enhanced Learning & Online Strategies
> Assistive Technologies
> 1180 Torgersen Hall
> 620 Drillfield Drive (0434)
> Blacksburg, Virginia 24061
> > > >