WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Miriam Fukushima
Date: Oct 1, 2019 4:52AM

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
>>
>> >> >> >> >>
>