-
Notifications
You must be signed in to change notification settings - Fork 37
Open
Labels
Description
Sidebar navigation regions have bad values of the aria-label attribute. For example, as observed on the live Creating Accessible Documents page, there are two sidebar widgets contained within div#sidebar:
- nav#desktop-relative - this contains the navigation menu for the current section of the website (on the example page, "Creating Accessible Documents". It currently has aria-label="mobile menu that is not visible in the desktop version". This is too much information, plus it's incorrect - I'm observing on the desktop version.
- div#nav_menu-2 - this contains the site-wide navigation. It has role="navigation" and aria-label="sidebar_navigation".
In both cases, the navigation menu is preceded by a title. In the first menu the title is tagged as a span; in the second menu it's tagged as an h2. The solution for labeling both navigation regions (or any other like them) involves two steps:
- Add a unique id attribute to the element that contains the widget title.
- For the nav element (or div with role="navigation"), replace aria-label with aria-labelledby. The value of aria-labelledby should match the id of its title.