WebAIM - Web Accessibility In Mind

E-mail List Archives

ARIA-markup and behavior for website's main navigation

for

From: Miriam Fukushima
Date: Sep 30, 2019 8:52AM

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