WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

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

From: Angela French
Date: Fri, Jun 30 2017 1:48PM
Subject: screen reader support for <nav> vs role="navigation"
No previous message | Next message →

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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;

From: Andrews, David B (DEED)
Date: Fri, Jun 30 2017 2:04PM
Subject: Re: screen reader support for <nav> vs role="navigation"
← Previous message | Next message →

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 ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: Friday, June 30, 2017 2:48 PM
To: WebAim Forum ( = EMAIL ADDRESS REMOVED = ) < = EMAIL ADDRESS 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;

From: Birkir R. Gunnarsson
Date: Fri, Jun 30 2017 2:10PM
Subject: Re: screen reader support for <nav> vs role="navigation"
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = ] On Behalf
> Of Angela French
> Sent: Friday, June 30, 2017 2:48 PM
> To: WebAim Forum ( = EMAIL ADDRESS REMOVED = )
> < = EMAIL ADDRESS 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.sbctc.edu<;http://www.sbctc.edu/>;
>
> > > http://webaim.org/discussion/archives
> > > > > >


--
Work hard. Have fun. Make history.

From: Angela French
Date: Fri, Jun 30 2017 2:19PM
Subject: Re: screen reader support for <nav> vs role="navigation"
← Previous message | Next message →

That has been my approach until I needed to do some research and came across resources like this:

http://accessibility.psu.edu/arialand/
https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html

This matrix (http://www.html5accessibility.com/) shows partial support for <nav> in IE. Does that then justify <nav role="navigation">
Even the W3.org website shows examples of using both: https://www.w3.org/WAI/GL/wiki/Using_HTML5_nav_element#Example:The_.3Cnav.3E_element

I'm just trying to get a feel for current screen reader support of <nav>

Angela French
SBCTC



-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Andrews, David B (DEED)
Sent: Friday, June 30, 2017 1:04 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] screen reader support for <nav> vs role="navigation"

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 ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: Friday, June 30, 2017 2:48 PM
To: WebAim Forum ( = EMAIL ADDRESS REMOVED = ) < = EMAIL ADDRESS 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;

From:
Date: Fri, Jun 30 2017 2:35PM
Subject: Re: screen reader support for <nav> vs role="navigation"
← Previous message | Next message →

The information on html5accessibility.com is accurate. You only need to
apply the roles explicitly if you need to support IE. If you don't, then
you can just use the relevant HTML elements.

Léonie.
On 30/06/2017 20:48, Angela French wrote:
> 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.sbctc.edu<;http://www.sbctc.edu/>;
>
> > > > >

--
@LeonieWatson @ = EMAIL ADDRESS REMOVED = @ = EMAIL ADDRESS REMOVED = tink.uk
Carpe diem

From: Angela French
Date: Fri, Jun 30 2017 2:54PM
Subject: Re: screen reader support for <nav> vs role="navigation"
← Previous message | Next message →

Hmmm, this site says that even IE 9 supports <nav> . https://html5test.com/compare/browser/ie-10/chrome-45/edge.mobile-13/firefox-45.html
Am I confusing browser support with screen reader support?


-----Original Message-----
From: Léonie Watson [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Friday, June 30, 2017 1:36 PM
To: WebAIM Discussion List; Angela French
Subject: Re: [WebAIM] screen reader support for <nav> vs role="navigation"

The information on html5accessibility.com is accurate. You only need to apply the roles explicitly if you need to support IE. If you don't, then you can just use the relevant HTML elements.

Léonie.
On 30/06/2017 20:48, Angela French wrote:
> 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.sbctc.edu<;http://www.sbctc.edu/>;
>
> > > archives at http://webaim.org/discussion/archives
> >

--
@LeonieWatson @ = EMAIL ADDRESS REMOVED = @ = EMAIL ADDRESS REMOVED = tink.uk Carpe diem

From: Birkir R. Gunnarsson
Date: Fri, Jun 30 2017 3:39PM
Subject: Re: screen reader support for <nav> vs role="navigation"
← Previous message | Next message →

It works on IE11 with Jaws 18 (latest update).


On 6/30/17, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> Hmmm, this site says that even IE 9 supports <nav> .
> https://html5test.com/compare/browser/ie-10/chrome-45/edge.mobile-13/firefox-45.html
>
> Am I confusing browser support with screen reader support?
>
>
> -----Original Message-----
> From: Léonie Watson [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: Friday, June 30, 2017 1:36 PM
> To: WebAIM Discussion List; Angela French
> Subject: Re: [WebAIM] screen reader support for <nav> vs role="navigation"
>
> The information on html5accessibility.com is accurate. You only need to
> apply the roles explicitly if you need to support IE. If you don't, then you
> can just use the relevant HTML elements.
>
> Léonie.
> On 30/06/2017 20:48, Angela French wrote:
>> 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>> www.sbctc.edu<;http://www.sbctc.edu/>;
>>
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
>
> --
> @LeonieWatson @ = EMAIL ADDRESS REMOVED = @ = EMAIL ADDRESS REMOVED = tink.uk Carpe diem
> > > > >


--
Work hard. Have fun. Make history.

From: Angela French
Date: Fri, Jun 30 2017 3:54PM
Subject: Re: screen reader support for <nav> vs role="navigation"
← Previous message | No next message

Thanks all!

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Friday, June 30, 2017 2:40 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] screen reader support for <nav> vs role="navigation"

It works on IE11 with Jaws 18 (latest update).


On 6/30/17, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> Hmmm, this site says that even IE 9 supports <nav> .
> https://html5test.com/compare/browser/ie-10/chrome-45/edge.mobile-13/f
> irefox-45.html
>
> Am I confusing browser support with screen reader support?
>
>
> -----Original Message-----
> From: Léonie Watson [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: Friday, June 30, 2017 1:36 PM
> To: WebAIM Discussion List; Angela French
> Subject: Re: [WebAIM] screen reader support for <nav> vs role="navigation"
>
> The information on html5accessibility.com is accurate. You only need
> to apply the roles explicitly if you need to support IE. If you don't,
> then you can just use the relevant HTML elements.
>
> Léonie.
> On 30/06/2017 20:48, Angela French wrote:
>> 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>> www.sbctc.edu<;http://www.sbctc.edu/>;
>>
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
>
> --
> @LeonieWatson @ = EMAIL ADDRESS REMOVED = @ = EMAIL ADDRESS REMOVED = tink.uk Carpe diem
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.