Accessibility of the Primary Navigation would be much improved if the role="navigation" was moved from the
element to the surrounding
. There are several problems with the current implementation which uses this HTML:
, this role overrides the
's native role="list", and these navigation links are no longer recognized as a list to assistive technology like a screen reader. Screen readers announce how many items are in a list which is helpful for the user to know how big the navigation menu is. Without knowing there are 5 items in the primary navigation (or that it is even a list) it is harder for the screen reader user to know where the navigation ends. Especially with the "Action Toolbar" that contains the translate and search features immediately after the primary navigation.
2. Overriding the
's native role causes validation errors when I run pages through the W3C Validator https://validator.w3.org/.
Solution: Simply moving the role and aria-labelledby attributes off of the
The problem is that the ARIA role=”navigation” attribute is being used in several places on
elements. (My original bug report only mentioned the primary navigation, but it is also a problem with the 3 skip links.) This causes problems because:
It leads to invalid HTML as you can see when I run the Digital Marin home page through the WC3 Validator (I hid the other 33 warning an error messages so you can see just these errors):
Here is the current HTML code for the skip links and primary menu links:
WAI-ARIA roles, states, and properties are intended to add semantic (https://www.w3.org/TR/wai-aria/#dfn-semantics) information when native host language elements with these semantics are not available, and are generally used on elements that have no native semantics of their own.
But by putting role=”navigation” on a
element which has native semantics, the
now has lost its native meaning as a container for list items.
The screen reader doesn’t announce the skip links nor the primary menu links as being part of a list with X number of items. This makes it harder on these users to figure out the structure of these navigational elements. By putting role=”navigation” on a
element which has native semantics, the
now has lost it’s native meaning as a container for list items. And you can hear the difference when using a screen reader on the website even though there is no difference for a sighted user (just look at the NVDA transcript below and remove the highlighted lines). Since the
no longer is a list container, NVDA doesn’t announce the skip links or the primary menu as being a list containing X items, and doesn’t announce when the screen reader user is out of the list. This makes it that much harder for these users to figure out where the navigation links end.
SOLUTION:
The solution is very simple and improves the screen reader experience without affecting any other users (and also removes those two validation errors): move the role and aria-label/aria-labelledby attributes off of the
elements, and onto a
element that doesn’t have any native semantics. Using Developer Tools in Firefox I added a new
around the skip links, and moved these two attributes to the new
. For the primary navigation I moved the attributes to the existing
:
Now when I listen to this page with NVDA, I’ll hear this (I’ve highlighted the new list information that NVDA gives with my changes):
Skip links navigation landmark
list with 3 items
link Skip to content
link Skip to navigation
link Site map
out of list
banner landmark
list with 1 items
link graphic Home
out of list
navigation landmark Primary menu links
list with 5 items
link About
link Communities
link Collaborations
link News
link Contact
out of list
Action toolbar ...
These might seem like little things, but to a screen reader user they can really help to make the site more usable.
Accessibility of the Primary Navigation would be much improved if the role="navigation" was moved from the
element to the surrounding. There are several problems with the current implementation which uses this HTML:
, this role overrides the
's native role="list", and these navigation links are no longer recognized as a list to assistive technology like a screen reader. Screen readers announce how many items are in a list which is helpful for the user to know how big the navigation menu is. Without knowing there are 5 items in the primary navigation (or that it is even a list) it is harder for the screen reader user to know where the navigation ends. Especially with the "Action Toolbar" that contains the translate and search features immediately after the primary navigation. 2. Overriding the
's native role causes validation errors when I run pages through the W3C Validator https://validator.w3.org/. Solution: Simply moving the role and aria-labelledby attributes off of the
and to surrounding fixes both of these problems:
aschmoe
commented
3 years ago
kevindherman
commented
3 years ago
kevindherman
commented
3 years ago
@kevindherman having trouble reading this a bit
@aschmoe I'll get more information. I think I had a side conversation with more clarity that I'll pull in. I'll post back when I get that organized.
@aschmoe does this help:
The problem is that the ARIA role=”navigation” attribute is being used in several places on
elements. (My original bug report only mentioned the primary navigation, but it is also a problem with the 3 skip links.) This causes problems because:- It leads to invalid HTML as you can see when I run the Digital Marin home page through the WC3 Validator (I hid the other 33 warning an error messages so you can see just these errors):
Here is the current HTML code for the skip links and primary menu links:
You can see that the circled
elements have a role=”navigation” attribute (and also an ARIA labeling attribute). As stated in the WAI-ARIA document (https://www.w3.org/TR/wai-aria/#host_general_conflict) :
WAI-ARIA roles, states, and properties are intended to add semantic (https://www.w3.org/TR/wai-aria/#dfn-semantics) information when native host language elements with these semantics are not available, and are generally used on elements that have no native semantics of their own.
But by putting role=”navigation” on a
element which has native semantics, the
now has lost its native meaning as a container for list items.- The screen reader doesn’t announce the skip links nor the primary menu links as being part of a list with X number of items. This makes it harder on these users to figure out the structure of these navigational elements. By putting role=”navigation” on a
element which has native semantics, the
now has lost it’s native meaning as a container for list items. And you can hear the difference when using a screen reader on the website even though there is no difference for a sighted user (just look at the NVDA transcript below and remove the highlighted lines). Since the
no longer is a list container, NVDA doesn’t announce the skip links or the primary menu as being a list containing X items, and doesn’t announce when the screen reader user is out of the list. This makes it that much harder for these users to figure out where the navigation links end.
SOLUTION:
The solution is very simple and improves the screen reader experience without affecting any other users (and also removes those two validation errors): move the role and aria-label/aria-labelledby attributes off of the
elements, and onto a element that doesn’t have any native semantics. Using Developer Tools in Firefox I added a new around the skip links, and moved these two attributes to the new . For the primary navigation I moved the attributes to the existing :
- © Githubissues.
- Githubissues is a development platform for aggregating issues.
Now when I listen to this page with NVDA, I’ll hear this (I’ve highlighted the new list information that NVDA gives with my changes):
Skip links navigation landmark
list with 3 items
link Skip to content
link Skip to navigation
link Site map
out of list
banner landmark
list with 1 items
link graphic Home
out of list
navigation landmark Primary menu links
list with 5 items
link About
link Communities
link Collaborations
link News
link Contact
out of list
Action toolbar ...
These might seem like little things, but to a screen reader user they can really help to make the site more usable.
