E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: navigation menu: aria or HTML?

Number of posts in this thread: 7 (In chronological order)

From:
Date: Sun, Sep 30 2018 10:50PM
Subject: navigation menu: aria or HTML?
No previous message | Next message →

Hi all,

Do you know any preferences (pro&contra) of these markups?

1.

<nav>
<ul>
<li>item1</li>
<li>item2</li>
</ul>
</nav>

2.
<ul role="navigation">
<li>item1</li>
<li>item2</li>
</ul>

--
Best regards,
Zsolt Edelényi

From: Joe Chidzik
Date: Mon, Oct 01 2018 5:26AM
Subject: Re: navigation menu: aria or HTML?
← Previous message | Next message →

Option 1 is preferable; a basic rule of ARIA is not to override default semantics (which is happening with option 2, where the default role of the <ul> grouping container for the list items is being overridden with the navigation landmark role).

Joe

> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On
> Behalf Of Edelényi Zsolt Péter
> Sent: 01 October 2018 05:50
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: [WebAIM] navigation menu: aria or HTML?
>
> Hi all,
>
> Do you know any preferences (pro&contra) of these markups?
>
> 1.
>
> <nav>
> <ul>
> <li>item1</li>
> <li>item2</li>
> </ul>
> </nav>
>
>
> 2.
> <ul role="navigation">
> <li>item1</li>
> <li>item2</li>
> </ul>
>
>
> --
> Best regards,
> Zsolt Edelényi
>
> > > http://webaim.org/discussion/archives
>

From: Brian Lovely
Date: Mon, Oct 01 2018 6:18AM
Subject: Re: [External Sender] navigation menu: aria or HTML?
← Previous message | Next message →

Version 2 orphans the list items by changing the role of the containing
element from list to navigation.

On Mon, Oct 1, 2018 at 12:50 AM Edelényi Zsolt Péter < = EMAIL ADDRESS REMOVED = >
wrote:

> Hi all,
>
> Do you know any preferences (pro&contra) of these markups?
>
>
>
> > > https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=DwIFBA&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=nA3L5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE&m=tGseV3ZJbblsnNKTPj6sWaDJBqVLbI1qIcWPgduILew&s=-o1yIOqKadxlYVzcu8GtJ9yNYVZ-LmuKzt_Kho0OZU0&e> List archives at
> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=DwIFBA&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=nA3L5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE&m=tGseV3ZJbblsnNKTPj6sWaDJBqVLbI1qIcWPgduILew&s=xtv4pob44_4_OhNH4TcaTsJZHaC5A48rjCrB1-BnKLg&e> >

--
*Brian Lovely*
Digital Accessibility
804.389.1064

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Brian Lovely
Date: Mon, Oct 01 2018 6:29AM
Subject: Re: [External Sender] navigation menu: aria or HTML?
← Previous message | Next message →

If the list items are intended to be actionable, then a better solution is:

<nav>
<ul>
<li><a href="#">stuff</a></li>
</ul>
</nav>

You have the semantics of the container, the list, and the actionable
elements intact.

On Mon, Oct 1, 2018 at 8:18 AM Brian Lovely < = EMAIL ADDRESS REMOVED = >
wrote:

> Version 2 orphans the list items by changing the role of the containing
> element from list to navigation.
>
> On Mon, Oct 1, 2018 at 12:50 AM Edelényi Zsolt Péter < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> Hi all,
>>
>> Do you know any preferences (pro&contra) of these markups?
>>
>>
>>
>> >> >> https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=DwIFBA&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=nA3L5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE&m=tGseV3ZJbblsnNKTPj6sWaDJBqVLbI1qIcWPgduILew&s=-o1yIOqKadxlYVzcu8GtJ9yNYVZ-LmuKzt_Kho0OZU0&e>> List archives at
>> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=DwIFBA&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=nA3L5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE&m=tGseV3ZJbblsnNKTPj6sWaDJBqVLbI1qIcWPgduILew&s=xtv4pob44_4_OhNH4TcaTsJZHaC5A48rjCrB1-BnKLg&e>> >>
>
>
> --
> *Brian Lovely*
> Digital Accessibility
> 804.389.1064
>

--
*Brian Lovely*
Digital Accessibility
804.389.1064

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Isabel Holdsworth
Date: Mon, Oct 01 2018 7:34AM
Subject: Re: [External Sender] navigation menu: aria or HTML?
← Previous message | Next message →

Hi Edelényi,

And even better if the <nav> can have an aria-label that provides info
about what sort of navigation it is:-
<nav aria-label="Section navigation">
Sighted users can often work this out by the position, colour and
sstile of the navigation options, but users with sight problems would
likely appreciate this extra info.

Cheers, Isabel

On 01/10/2018, Brian Lovely via WebAIM-Forum
< = EMAIL ADDRESS REMOVED = > wrote:
> If the list items are intended to be actionable, then a better solution is:
>
> <nav>
> <ul>
> <li><a href="#">stuff</a></li>
> </ul>
> </nav>
>
> You have the semantics of the container, the list, and the actionable
> elements intact.
>
> On Mon, Oct 1, 2018 at 8:18 AM Brian Lovely < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> Version 2 orphans the list items by changing the role of the containing
>> element from list to navigation.
>>
>> On Mon, Oct 1, 2018 at 12:50 AM Edelényi Zsolt Péter < = EMAIL ADDRESS REMOVED = >
>> wrote:
>>
>>> Hi all,
>>>
>>> Do you know any preferences (pro&contra) of these markups?
>>>
>>>
>>>
>>> >>> >>> https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=DwIFBA&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=nA3L5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE&m=tGseV3ZJbblsnNKTPj6sWaDJBqVLbI1qIcWPgduILew&s=-o1yIOqKadxlYVzcu8GtJ9yNYVZ-LmuKzt_Kho0OZU0&e>>> List archives at
>>> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=DwIFBA&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=nA3L5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE&m=tGseV3ZJbblsnNKTPj6sWaDJBqVLbI1qIcWPgduILew&s=xtv4pob44_4_OhNH4TcaTsJZHaC5A48rjCrB1-BnKLg&e>>> >>>
>>
>>
>> --
>> *Brian Lovely*
>> Digital Accessibility
>> 804.389.1064
>>
>
>
> --
> *Brian Lovely*
> Digital Accessibility
> 804.389.1064
> >
> The information contained in this e-mail is confidential and/or proprietary
> to Capital One and/or its affiliates and may only be used solely in
> performance of work or services for Capital One. The information transmitted
> herewith is intended only for use by the individual or entity to which it is
> addressed. If the reader of this message is not the intended recipient, you
> are hereby notified that any review, retransmission, dissemination,
> distribution, copying or other use of, or taking of any action in reliance
> upon this information is strictly prohibited. If you have received this
> communication in error, please contact the sender and delete the material
> from your computer.
> > > > >

From: Graham Armfield
Date: Mon, Oct 01 2018 10:12AM
Subject: Re: [External Sender] navigation menu: aria or HTML?
← Previous message | Next message →

Re having aria-label="Section navigation"...

Since screen reader would announce the "navigation" anyway when coming
across a <nav> element (or role="navigation"), would it not be better to
avoid over-announcing by just having aria-label="Section"?

Regards
Graham Armfield

coolfields.co.uk <http://www.coolfields.co.uk/>;
M:07905 590026
T: 01483 856613
@coolfields <https://twitter.com/coolfields>

From: Andre Polykanine
Date: Mon, Oct 01 2018 4:22PM
Subject: Re: navigation menu: aria or HTML?
← Previous message | No next message

Hi Zsolt,
If you choose the <ul> solution, some screen readers (at least JAWS)
won't report the list as such, so: the L quick nav key reports "no
lists", you won't be able to navigate through items, and yes, you'll
break the main rule about not using items for other semantic roles if
possible. So go for the <nav> option.

--
With best regards from Ukraine,
Andre
Skype: menelion_elensule
Twitter (English only): @AndrePolykanine

------------ Original message ------------
From: Edelényi Zsolt Péter < = EMAIL ADDRESS REMOVED = >
To: WebAIM Discussion List
Date created: , 7:50:09 AM
Subject: [WebAIM] navigation menu: aria or HTML?

Hi all,

Do you know any preferences (pro&contra) of these markups?

1.

<nav>
<ul>
<li>item1</li>
<li>item2</li>
</ul>
</nav>

2.
<ul role="navigation">
<li>item1</li>
<li>item2</li>
</ul>

--
Best regards,
Zsolt Edelényi