WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Mallory
Date: Oct 5, 2019 4:04AM

Hi Miriam,

yes, this is my preferred approach too (putting the "main" link as the first of the sub links). The one possible disadvantage is if users for some reason cannot get the submenus to appear (...JavaScript doesn't entirely load or something) then they cannot access it from the top-level items alone. However, having single items do both functionality is worse, in my view. I try to make sure that if I have a menu item who only offers submenus, that there is another way somewhere users can access that page (redundant links in the content or footer perhaps, or a site map).

However additionally, if the top-level items only expand/collapse things, I prefer to mark those up as buttons. Especially if the JavaScript didn't fully load, <a href="#"> would just throw my focus to the top of the page. I might even consider hash (#) URLs to be a code smell. At least buttons would keep my focus right there and act dead.
Or, even better, if you use links, you could have them link to a category page (which lists all the sub links) by default, and let JavaScript, when it loads, override the link functionality and add in the aria-expanded stuff. I would have it add a "button" role though and make sure it worked with spacebar. Progressive enhancement is great, but I get it if your developers/product owners don't want to invest that deeply.

I agree with you that it's confusing to have a menubar (the visible row of top-level menu items) which mixes links and buttons, but you could use <a href> elements for links and <button type="button"> elements for the buttons, and then visually distinguish them by adding a small SVG arrow next to the button texts: now you have both two different roles (available to assistive technologies) which match what they do (the links natively have role=link and tell users they will take them somewhere; the buttons natively have role=button and tell users they will Do Something on the page) and the SVG arrow can visually distinguish buttons from links without any other major stylistic changes (most designers would like all the visible items in a menubar to look similar to each other).

++ to Birkir's answer: the aria-expanded (coupled with something visual for the sighties) should be enough to let people know there's more stuff if they want it, and lets you keep the simple nested-lists markup. I've heard arguments for using the whole application-style ARIA-menus for navigation, but sighted keyboarders have no way of knowing, except through trial and error, that they cannot just tab through the submenu links. Birkir mentions screen reader users would expect application-menu behaviour if you've got aria-haspopup, but they are usually the only people informed of this. We hope that actual application menus are styled to look like them in the cases where you really want to use that, but web site nav menus tend to look like regular navigation menus, visually.

(Why SVG for the little arrow? It's visible even in Windows High Contrast. So are font icons, but these may be overridden by users who need to force their own fonts for readability. Background images may be removed by Windows High Contrast depending on browser, and even if they remain, they may not ensure high enough contrast to be seen.)

cheers,
_mallory

On Tue, Oct 1, 2019, at 12:52 PM, Miriam Fukushima wrote:
> Thank you so much for the reply. It's so easy to over complicate things.
>
>
> If I implement it as suggested and "Special offers" has its own content
> page, would it be best to put it in the sub menu then? Like for example:
>
> <a href="#" id="foo" aria-expanded="false">Special offers</a>
> <div role="group" aria-labelledby="foo" class="hidden">
> <ul>
> <li><a href="#">Special offers overview</a></li>
>
> <ul>
>
> <li><a href="#">Offer 1</a></li>
>
> ...
>
> </uL>
>
> ..
> </ul>
> </div>
>
>
> Kind regards
>
> Miriam
>
> On 30.09.2019 23:55, Birkir R. Gunnarsson wrote:
> > 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
> >>
> >> > >> > >> > >> > >>
> >
> > > > >