Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Bad aria-label values for sidebar nav #140

@terrill

Description

@terrill

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:

  1. Add a unique id attribute to the element that contains the widget title.
  2. 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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions