E-mail List Archives
Thread: Accessibility of Main Navigation Tools
Number of posts in this thread: 2 (In chronological order)
From: James Crone
Date: Tue, Jul 19 2016 1:15PM
Subject: Accessibility of Main Navigation Tools
No previous message | Next message →
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 ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >* ' (309) 677-3844 ' *www.bradley.edu
<http://www.bradley.edu>;*
From: Paul J. Adam
Date: Tue, Jul 19 2016 1:26PM
Subject: Re: Accessibility of Main Navigation Tools
← Previous message | No next message
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 ADDRESS 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 ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >* ' (309) 677-3844 ' *www.bradley.edu
> <http://www.bradley.edu>;*
> > > >