WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: screen reader support for <nav> vs role="navigation"

for

From: Birkir R. Gunnarsson
Date: Jun 30, 2017 2:10PM

First of, the<nav> elment (or an element with role="navigation") is
not a menu but a container for a list of related links.
If you want a full menu (I generally recommend you avoid those) you
need to go all in with role="menubar"/"menu" and use either a megamenu
or menu button pattern with all the JavaScript that comes with it.
Now, if you jus have a list of related links, you can use the <nav>
element (or <div with role="navigation"). Give it a descriptive
accessible name if one is readily available.
<nav aria-label="account services"
<a href="#">link 1</a>
<a href="#">Link 2</a>
...
</nav>

And to your question:
<nav> element alone has pretty good user agent/a.t. support (maps to
the navigation landmark role).
If you want to back it up with role="navigation" I see absolutely no
harm in doing so. Though we generally avoid redundant ARIA sometimes
it is needed for maximum assistive technology compatibility.
When we do this on static elements I fail to see the potential damage.
When used on interactive elements it has a chance of getting complicated.



On 6/30/17, Andrews, David B (DEED) < <EMAIL REMOVED> > wrote:
> You are only supposed to use ARIA when nothing else will make it work. If
> you can do it in html5 then that is the preferred approach!
>
> Dave
>
>
>
> David Andrews | Chief Technology Officer
> Minnesota Department of Employment and Economic Development
> State Services for the Blind
> 2200 University Ave West, Suite 240, St. Paul MN 55114
> Direct: 651-539-2294
> Web | Twitter | Facebook
>
>
>
>