WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessibility of Main Navigation Tools

for

From: Paul J. Adam
Date: Jul 19, 2016 1:26PM

I think the focus order is confusing since the menu items expand above the triggering element rather than after in the tab order.

There's a missing expanded state on the buttons. I'd recommend using role=button rather than link and adding aria-expanded=true/false to indicate state.

I would also put the expanded top menu items into the focus order after their triggering element.

Also the font awesome icons should be hidden as decorative images, <i class="fa fa-beer" aria-hidden=true></i>

Hope this helps!

Paul J. Adam
Accessibility Evangelist
www.deque.com

> On Jul 19, 2016, at 2:15 PM, James Crone < <EMAIL REMOVED> > wrote:
>
> We are in the process of building a new website for our institution and
> have been charged with also meeting WCAG 2.0 AA guidelines. We have a
> sample page template that has been mocked-up. It does have accessibility
> issues which we are working to resolve (so please don't run it through WAVE
> and freak out yet! :) ). The main concern I have as of now is the
> accessibility of three main navigation elements. The page mock-up is
> available for your reference at: http://wwwtest.bradley.edu/home/about.dot.
> At the top right you will see three icons that when clicked on have a
> flyout/dropdown menu appear from the top. I'm curious about your thoughts
> as to screen reader issues or keyboard navigation issues as these menus
> appear before the current focus point when they are launched. Any input or
> thoughts on this or similar type navigation?
>
> Thanks,
> Jim
>
> *Jim Crone*
> * Director of Web Marketing/Communications*
>
>
>
> Comstock Hall 201 ' 1501 W Bradley Ave ' Peoria, IL 61625
> * <EMAIL REMOVED> < <EMAIL REMOVED> >* ' (309) 677-3844 ' *www.bradley.edu
> <http://www.bradley.edu>;*
> > > >