WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Mega Menu and Safari

for

From: Robert Fentress
Date: Mar 31, 2016 10:59AM

Thanks for checking this, Jonathan. So, you are saying it is a Safari bug,
not a bug with the mega menu itself?

Best,
Rob

On Thu, Mar 31, 2016 at 9:50 AM, Jonathan Avila < <EMAIL REMOVED> >
wrote:

> Regarding support with VoiceOver on the Mac, I ran a test with chrome and
> VoiceOver and the mega menu did not auto collapse. I then went to my event
> testing page (https://labs.ssbbartgroup.com/index.php/Event_Watcher) and
> used the control+option+left arrow keys to move around several different
> types of controls to see what might be causing the issue. I find that with
> VoiceOver in Safari an extra blur event is being fired between focus events
> -- that is when some elements are focused with control+option+left arrow a
> focus event followed by a blur event followed by a focus event all on the
> same element are fired. This is not the case when tab is pressed. This
> seems like a bug.
>
> Jonathan
>
> Jonathan Avila
> Chief Accessibility Officer
> SSB BART Group
> <EMAIL REMOVED>
> 703.637.8957 (Office)
> Visit us online: Website | Twitter | Facebook | Linkedin | Blog
> Check out our Digital Accessibility Webinars!
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Robert Fentress
> Sent: Wednesday, March 30, 2016 12:37 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Accessible Mega Menu and Safari
>
> Thanks, Paul.
>
> The problem with using down arrow with QuickNav off or Tab, in this
> instance, is that this only moves between links and skips over
> non-focusable elements. The purpose of the mega menu pattern, as used
> here, is that you want to make other structured content besides the menu
> links available, for instance, headings or textual cues. That content is
> skipped using these navigation methods, at least, apparently, with how I
> have VoiceOver set up.
>
> 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.
>
> 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 Right
> >> Control+Option+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
> >> > >> > >> archives at http://webaim.org/discussion/archives
> >> > >
> > > > > > archives at http://webaim.org/discussion/archives
> > >
>
>
> --
> 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
> > > at http://webaim.org/discussion/archives
> > > > > >



--
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