WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ARIA for main navigation bar

for

From: Birkir R. Gunnarsson
Date: Apr 24, 2015 7:25AM

The ARIA PFWG has already proposed a new property, aria-current, to
address this need:
http://rawgit.com/w3c/aria/master/aria/aria.html#aria-current

We discussed expanding the role of aria-selected but felt that using a
new attribute was a better solution as aria-selected can have a
slightly different meaning e.g. in a tab/tabpanel widget.

The problem with throwing away all things ARIA and going back to
simple html for the header navigation is that we do not improve the
experience for keyboard-only users that way. PayPal approached this by
implementing a combination of more or less plain html markup and
keyboard support in their Accessible megamenu:
http://adobe-accessibility.github.io/Accessible-Mega-Menu/

One can take it a step back and simply use a collection of expandable sections
http://www.3needs.org/en/testing/code/aria-expanded.html
(i.e. accordions):

(for a fully working accordion, refer to many of Bryan's excellent examples).

Recently I helped implement a button menu solution, though the webpage
is all in Icelandic
http://www.hbs.is (the 2nd, 3rd and 5th buttons in the top navigation list).
An English version of this set-up will be available next week, we are
going to implement a simplified version of same widget for demo
purposes (we are using Bootstrap).

Yes, ARIA is very powerful and can do harm when not used correctly. A
large part of teaching the use of ARIA to developers is telling them
not to use it except where it is appropriate.
But when used correctly, it revolutionizes the way we interact with
the web, especially when we keep pushing to make sure that browsers
and vendors interpret and expose the roles correctly to end users.

-B

On 4/24/15, Jonathan Avila < <EMAIL REMOVED> > wrote:
>> My last point would be that when I'm navigating a menu, I want to get
>> where I'm going (and figure that out) as quickly as possible, and I find
>> that over-ARIA-fication can slow me down.
>
> I agree. Menus and navigation structures continue to be a challenge and
> incorrect and overuse of ARIA is a huge issue in the field. I'd also make
> the following statements about the differences between the two types of
> menus.
>
> 1. When you implement a real ARIA application menu you have to implement all
> of the associated keyboard interactions and required roles.
> 2. Navigation flyouts should not use ARIA menu roles and properties.
> 3. Navigation flyouts should be used for navigation. If a navigation
> structure allows for other features such as checking items or performing
> non-navigation aspects perhaps you should use an ARIA application menu.
>
> I also agree that many keyboard based patterns such as those for menus are
> not working right on mobile devices and thus if a site can be used on a
> mobile environment you need to test and implement for that environment --
> perhaps first.
>
> Jonathan
>
> --
> Jonathan Avila
> Chief Accessibility Officer
> SSB BART Group
> <EMAIL REMOVED>
>
> 703-637-8957 (o)
> Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
>
>
>