Make WordPress Core

Opened 3 weeks ago

Last modified 3 weeks ago

#50702 new enhancement

Invalid tabindex in screen-reader-shortcut

Reported by: erikjandelange Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Toolbar Keywords:
Focuses: accessibility Cc:


I'm trying to update a website to be 100% accessible. Till so far the bugs in the theme are solved but now i have (according to Google Chrome - Lighthouse) an bug in the tabindex of the screen reader shortcut.

In line 451 of the file wp-includes/class-wp-admin-bar.php there is a tabindex set to 1. Which isn't allowed.

The confusing part, that the code is valid, but Lighthouse marks it as invalid because users can expirience an abnormal behaviour of the tab walk-through.

The message Lighthouse returns is:

Some elements have a [tabindex] value greater than 0
A value greater than 0 implies an explicit navigation ordering. Although technically valid, this often creates frustrating experiences for users who rely on assistive technologies. Learn more.

Change History (1)

#1 @afercia
3 weeks ago

  • Component changed from General to Toolbar
  • Keywords accessibility tabindex screen-reader removed
  • Type changed from defect (bug) to enhancement
  • Version 5.4.2 deleted

Thanks for your report @erikjandelange and welcome to Trac!

Automated checking tools shouldn't be fully trusted. While they cover a wide range of issues that can be automatically detected, some issues always require evaluation from a human.

In this case, the tabindex 1 is legitimate and intentional. Its goal is to make the "Skip to toolbar" link the first focusable thing in the page.

This was definitely necessary when the WordPress admin bar was visually placed at the top but actually rendered at the bottom of the DOM.

Since WordPress 5.4, the admin bar placement was fixed but only for themes that support the new hook wp_body_open. Old themes still render the admin bar in the footer hook.

For more details, see "Accessibility: the Admin Bar is now loaded with wp_body_open when available" in the miscellaneous dev notes for WordPress 5.4: https://make.wordpress.org/core/2020/02/26/miscellaneous-developer-focused-changes-in-wordpress-5-4/

Related ticket: #47053

Glad to hear you're willing to make a website 100% accessible. In this case, I'd say Lighthouse's take on this rule is a bit too strict. If it's reporting it as an error, that's a wrong take. It should be reported as a warning that needs manual investigation.

On the other hand, it is worth considering to remove the tabindex attribute altogether but only for themes that use the new wp_body_open hook because in that case it's unnecessary. However, the tabindex attribute needs to stay for all the other themes.

Note: See TracTickets for help on using tickets.