Improve accessibility of landmark regions in toolbar

Created on 28 February 2025, 2 months ago

Problem/Motivation

This is a spinoff of https://www.drupal.org/project/drupal/issues/3084529 🌱 [META] improve accessibility of toolbar Active for these three items.

I think they can all be fixed together and are all Moderate priority in Axe.

  1. Too many ARIA group/landmark roles. The toolbar uses lots of ARIA navigation landmarks. In general, it's a good idea to avoid using to many landmark regions because it reduces their usefulness. They are used to quickly navigate between major regions of the page, and too many of them can make it tedious to cycle among them.
    • Consider just using a single navigation landmark for the entire toolbar, and eliminate the nested ones. Possibly use another non-landmark grouping role inside the toolbar. The nested menus already have
    • The toolbar is wrapped by an ARIA group (not a landmark) and a navigation role, each with their own label. This double wrapper doesn't serve much purpose, it merely increases verbosity.
  2. Navigation landmark regions without accessible names. When a page has multiple landmark regions of the same kind, they should be distinguishable by name.
    • Toolbar has some navigation landmarks with accessible names. For example, in the second-level toolbar "trays" with menus: manage, shortcuts, and user.
    • However is also has unlabelled navigation landmarks too. For example there the home, "back to site", tour, and edit items.
  3. Empty navigation regions. Some navigation landmark regions are present, but are empty. This is pointless, and may be confusing because they appear in a screen reader's list of landmarks. They are associated with top-level toolbar items which don't have a second-level tray.

Item #1 (Too many ARIA group/landmark roles) is also throwing this Axe error (Axe class = "best practice"):

All page content should be contained by landmarks
Ensure all page content is contained by landmarks

Item #3 (Empty navigation regions) is also throwing this Axe error (Axe class = "best practice"):

Landmarks should have a unique role or role/label/title (i.e. accessible name) combination
Ensure landmarks are unique

Steps to reproduce

On a standard installation:

  1. Log in
  2. Go to a node view page
  3. Run an Axe test

Proposed resolution

Some proposed resolutions are included with the items under Problem/Motivation.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

πŸ› Bug report
Status

Active

Version

11.0 πŸ”₯

Component

toolbar.module

Created by

πŸ‡ΊπŸ‡ΈUnited States kentr Durango, CO

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024