WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ARIA-markup and behavior for website's main navigation

for

From: Birkir R. Gunnarsson
Date: Sep 30, 2019 3:55PM

Keep it simple, use aria-expanded on triggers that open/close menus,
use role="group" and aria-labelledby="the id of the trigger " on the
containers for the submenus.
<a href="#" id="foo" aria-expanded="false">Special offers</a>
<div role="group" aria-labelledby="foo" class="hidden">
<ul>
<li><a href="#">Offer 1</a></li>
..
</ul>
</div>
Assuming that the menu items are only links to other pages this is the
most descriptive setup and the least amount of extra Javascript.
If you use aria-haspopup/menu roles, you are telling the user that
they can use arrow keys to open and navigate through the menus but not
the tab key.
It takes a lot more work to implement this and it is not better for
describing navigation menus.



On 9/30/19, Miriam Fukushima < <EMAIL REMOVED> > wrote:
> Dear all,
>
>
> I am kind of stuck with a main navigation design of a website and how to
> apply the correct ARIA.
>
> I have read a lot and I am now more confused than I was before. I am
> thankful for any clarifications.
>
>
> The basic structure is an HTML unordered list of links with up to five
> levels of nesting (I cannot change the amount of levels).
>
> The main navigation points are styled like a tab list and the sub menus
> open beneath them as a list that spans over the full width and is styled
> as three columns so it basically looks like a tab.
>
>
> At the moment the behavior has three cases:
>
> 1) the main menu point has its own content page but no sub menu, so it
> is just a link.
>
> 2) the main menu point does not have its own content page but has a sub
> menu, so when clicked it toggles the opening and closing of the sub menu.
>
> 3) the main menu point has its own content page and also a sub menu, so
> when clicked it toggles the opening and closing of the sub menu and the
> link to its own content page is the first in the list.
>
>
> I personally find it quite confusing to have the main menu point
> sometimes as a link and sometimes the link as the first list item and
> sometimes no link to the main menu point but maybe that's just me.
>
>
> I have found designs that simply use aria-haspopup on the main menu
> point and aria-hidden and aria-expanded on the sub menu list.
>
> But I have also found designs with aria-controls, buttons, role menu and
> menuitem and so on.
>
> I am a bit confused what best fits the above described three cases and
> the navigation of the sub menus is a whole other story.
>
>
>
> Thank you so much in advance for the help!
>
>
> Miriam
>
> > > > >


--
Work hard. Have fun. Make history.