E-mail List Archives

Search E-mail List Archives 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

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

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

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?

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

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!