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
>
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
> Of Angela French
> Sent: Friday, June 30, 2017 2:48 PM
> To: WebAim Forum ( <EMAIL REMOVED> )
> < <EMAIL REMOVED> >
> Subject: [WebAIM] screen reader support for <nav> vs role="navigation"
>
> Hello,
> I have been web searching without luck to find which method has better
> screen reader support for identifying menus on a web page: using the html 5
> <nav> element or using the ARIA attribute role="navigation" on say, a <div>.
> If I combine their use like <nav role="navigation">, Siteimprove tells
> me I'm being redundant. I suppose there are worse accessibility
> "crimes" that being redundant?
>
> Thanks,
>
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
> www.sbctc.edu<;http://www.sbctc.edu/>;
>
> > > http://webaim.org/discussion/archives
> > > > > >


--
Work hard. Have fun. Make history.