[META] improve accessibility of toolbar

Open on Drupal.org →

Created on 29 September 2019, over 5 years ago

Updated 9 January 2024, about 1 year ago

Toolbar module has a number of accessibility issues. Some of these may be addressed individually in child issues, but it will be a good idea to consider them holistically.

Known problems

Visual design

🐛 Active toolbar tray has weak affordance and fails WCAG color criteria Needs work
#3097905: Add visual indicator to show which toolbar buttons have trays associated with them →
Confusing visual focus order. MAJOR. Visually, the top level toolbar has some buttons which appear on the right hand side (e.g. edit, tour). The DOM order differs from the visual presentation, so focus order jumps around in a way that's confusing for sighted users. Effectively a failure of WCAG success criterion 2.4.3 Focus Order (level A). Aim to find an order which is usable by screen reader users and sighted users. #3167438: Presentation of some toolbar buttons differs from DOM order →
Missing icons in Windows high-contrast mode. 🐛 Toolbar icons may not meet contrast when in forced colors mode Active The icons are CSS background images, which don't work when a Windows' high-contrast theme is enabled. Internet Explorer and Firefox both strip CSS background images out, but Edge displays them. (Other browsers don't respect Windows high-contrast mode at all, which is something beyond our control). This issue can be addressed by using an alternative technique such as inline <img>/ <svg>, or the CSS content property.
However some buttons are badly broken, because visually they are just an icon. When the icon is missing users can't perceive or understand the button:
- Many cases are OK, because the icon is accompanied by a visible text label. When the icon is missing, the link or button is still perceivable because the text label remains. It would be better if the icons weren't missing.
- Switch toolbar orientation. Visually this is just an icon. In high-contrast mode, when the icon is missing, users may be completely unaware that the toolbar orientation can be changed, or can't find how to do it. MAJOR, fails WCAG SC 1.1.1 Non-text Content (level A) for the high-contrast scenario.
- Sub-menu buttons in vertically-orientated trays. Visually this is just an icon. In high-contrast mode, when the icon is missing, users may not understand the hierarchy of an open menu, and may be completely unaware that more links can be disclosed. MAJOR, fails WCAG SC 1.1.1 Non-text Content (level A) for the high-contrast scenario.

Assisitive technology and Semantics

#3066954: Admin toolbar not usable with latest versions of JAWS due to mis-use of aria-owns → . CRITICAL. Fixed in 8.7.9.
🐛 aria-pressed attribute isn't updated correctly. Needs work . MAJOR.
🐛 Toolbar buttons should respond to spacebar key Needs work . These are <a href="" role="button"> which only responds to the return key. It needs an extra keyboard handler. Spotted in #3066954: Admin toolbar not usable with latest versions of JAWS due to mis-use of aria-owns → .
#3090120: Use ARIA disclosure pattern for Toolbar buttons with trays →
📌 Use ARIA disclosure pattern for submenu buttons in vertical toolbar orientation Needs work
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.
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.
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.

🌱 Plan

Status

Active

Version

11.0 🔥

Component

Last updated about 11 hours ago

Maintained by
🇫🇷France @nod_

Created by

🇬🇧United Kingdom andrewmacpherson

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.

high contrast

Incomplete comments

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Comment about 1 year ago →
🇨🇦Canada mgifford Ottawa, Ontario
Adding reference to Windows High Contrast Mode.
Comment 28 days ago →
🇺🇸United States kentr Durango, CO
These don't have their own issues yet, correct?

Too many ARIA group/landmark roles

Navigation landmark regions without accessible names

Empty navigation regions

#3 is a quick fix.

From looking at the template, removing the nested navs as suggested for #1 might also fix #2.

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.

It's also throwing this Axe error, which resolves when I change the div to nav and remove the role="group".

All page content should be contained by landmarks Ensure all page content is contained by landmarks Element Location: #toolbar-administration <div id="toolbar-administration" role="group" aria-label="Site administration toolbar" data-drupal-claro-processed-toolbar="" class="toolbar claro-toolbar toolbar-oriented" data-once="toolbar toolbarAntiFlicker">

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024