Provide an example for a complex navigation structure

[jensgro]

In the article about the menu-structure (https://www.w3.org/WAI/tutorials/menus/structure/) the sketched example is relatively easy. But what about a navigation with multiple sections (not with the section-element)?

• Should those sections (e.g. books, CDs, kitchen, electronics ...) be introduced by headlines?
• Should they all be h2-headlines?
• Mostly the navigation will be placed at the top of the page's structure. So any headline will preceed the page's h1. Will this be corret?
• Would it be sufficient, even for screenreaders, to create multiple lists, where the "headlines" are list elements of the first level and the corresponding links are list-items of the second level?
• Would it be okay/sufficient to work with aria just for the screenreaders and to omit any "real" heading inside the navigation?
• Wouldn't it be sufficient for screenreader-users to wrap aeverything inside a nav-element, so they get notified about a navigation?

[yatil]

Hi Jens,

Unfortunately there seems to nobody from W3C/WAI tasked with developing the tutorials further, or even merging pull requests/reviewing issues. I think this would be a great addition to them.

Here are some articles that can give you some pointers in the meantime:

• https://www.nomensa.com/blog/accessible-and-user-friendly-mega-menus
• https://www.levelaccess.com/challenges-mega-menus-standard-menus-make-accessible/
• https://adobe-accessibility.github.io/Accessible-Mega-Menu/

As for your questions:

• Should those sections (e.g. books, CDs, kitchen, electronics ...) be introduced by headlines?
• Should they all be h2-headlines?

If you mean headings (h1-h6), probably not – I like to reserve them for the content of the page. You can however use groups (role="group") with labels (aria-labelledby) to make the structure clear.

• Mostly the navigation will be placed at the top of the page's structure. So any headline will preceed the page's h1. Will this be corret?

Consistency is most important. If there are headings before the <h1> that can be fine if it is consistent across pages. Note that a typical shortcut screen reader users take is to go to the first heading to get to the main content, so a lot of headings before the main content can be an obstacle. That said, depending on the layout of your menu, these headings might be hidden anyway, in which case they would be skipped.

• Would it be sufficient, even for screenreaders, to create multiple lists, where the "headlines" are list elements of the first level and the corresponding links are list-items of the second level?

That’s certainly a way to structure this, however nested lists are not super useful, and if you only have one item with sub-items, grouping through ARIA or with labelled <section>s is probably easier to understand. Also some browsers/screen readers might remove the list announcement depending on the style.

• Would it be okay/sufficient to work with aria just for the screenreaders and to omit any "real" heading inside the navigation?

Sure.

• Wouldn't it be sufficient for screenreader-users to wrap aeverything inside a nav-element, so they get notified about a navigation?

Yes, using landmarks is a best practice, and the <nav> element/navigation landmark is great! I would not use nested navigation landmarks. If you use multiple <nav> elements on the page, make sure to label them.

Hope that helps!

[jensgro]

Thanks a lot, Eric, for this very informative answer. This could be a tutorial :-)