Tabindex greater than zero -WordPress core issue-

[candelatironi]

Hi,
We added a comment in the accessibility forum(​https://wordpress.org/support/topic/tabindex-greater-than-zero-wordpress-core-issue/) and they told us that since it is a problem with WordPress users, we should ask the question here:

We are using the tool that checks the accessibility of our page. The tool is axe DevTools

The tool shows that the Ensures tabindex attribute values are not greater than 0

This is the result of the test:
Element Location: a[href$=”#wp-toolbar”]

Skip to toolbar

To solve this problem, you need to fix the following:
Element has a tabindex grater than 0

The button is used by users that navigates the page via keyboard. On Enter keydown,it takes the user to a specific navigation area, skipping other areas, to save time and effort. In the case of this button, it takes the user to the admin banner on the very top of the page.

The order the elements are hit when tabbing through the page, or tabindex, is generated automatically by the HTML code that creates the page, and is like the reading order, from beginning to end.
Since this button belongs to WordPress core and it’s located at the very end of the HTML document.

The solution for this issue will be to change tabindex value from 1 to 0, but this will locate the button on its position on the HTML, which is almost at the end of the page. And this kind of “Skipping to navigation” buttons are supposed to be at the beginning. Also, this button is the only way to access via keyboard to the admin banner.

The real solution should be changing the order of the elements on the HTML code. But, since this is on the WordPress core, it’s a very complex task, that might not be even possible.

It would be great if you could fix this accessibility issue and check again using the tool to see if everything is right.

Thanks!

[joedolson]

This problem has already been fixed, to the best degree possible in WordPress core.

When the admin toolbar is active, it appears at the top of the screen, and needs to receive focus before the rest of the page. To do this, the first element in the toolbar is given a tabindex of 1 if the code is rendered in the footer - which is where it was rendered for a long time.

When WordPress core added the wp_body_open() theme function in version 5.2.0, the rendering of the admin bar was moved to the top of the page if that function was present in the theme, and tabindex is no longer assigned in that case.

So this is actually a problem in your theme, which needs to add the wp_body_open() function right after the opening body element.

Here's the dev note announcing the new hook: ​https://make.wordpress.org/themes/2019/03/29/addition-of-new-wp_body_open-hook/

See #50702.