WordPress.org

Make WordPress Core

Opened 5 months ago

Last modified 4 days ago

#47053 assigned defect (bug)

Accessibility: Need to set proper 'tabindex' in 'Skip To Toolbar' HTML

Reported by: jankimoradiya Owned by: joedolson
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Toolbar Keywords: has-screenshots has-patch needs-testing needs-refresh
Focuses: ui, accessibility Cc:

Description

I have found that, There is a set tabindex="1" in the "Skip to toolbar" html.

<a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1">Skip to toolbar</a>

I assume that, tabindex need to set "0" or "-1" for the Accessibility standard.

Attachments (2)

skip-to-toolbar.png (227.1 KB) - added by jankimoradiya 5 months ago.
47053.diff (700 bytes) - added by audrasjb 5 days ago.
Workaround: including the admin bar on wp_body_open

Download all attachments as: .zip

Change History (15)

#1 follow-up: @afercia
5 months ago

  • Keywords needs-patch dev-feedback removed
  • Milestone Awaiting Review deleted
  • Resolution set to maybelater
  • Status changed from new to closed

@jankimoradiya thanks for your report. There's a reason for this: on the front end, the Toolbar needs to use one of the hooks that are available in a theme. Traditionally, it has been hooked to wp_footer because this hook is widely used by themes. This way, the Toolbar is rendered in the markup at the end of the page, before the closing </body> tag.

Worth noting on the front end the Toolbar markup includes the "Skip to toolbar" link. There's the need to make this skip link the first tabbable element in the page. The only way to do that is by using a tabindex="1" attribute. I'd agree it's a compromise and, as far as I can tell, is the only case in WordPress where a tabindex attribute has a positive value.

The position of the Toolbar in the markup isn't ideal in the first place. Ideally, it should be at the top of the markup right after the start <body> tag so it would match the visual order and there wouldn't be the need for a Skip link.

WordPress 5.2 is going to introduce a new wp_body_open hook meant to be used after the start <body> tag: this could be used to render the Toolbar at the top. However, there's the need to wait for all the themes out there to use the new hook though. I'm afraid improvements in this area will need to wait a while.

#2 in reply to: ↑ 1 ; follow-up: @SergeyBiryukov
5 months ago

Replying to afercia:

WordPress 5.2 is going to introduce a new wp_body_open hook meant to be used after the start <body> tag: this could be used to render the Toolbar at the top. However, there's the need to wait for all the themes out there to use the new hook though. I'm afraid improvements in this area will need to wait a while.

We could use wp_body_open as the main hook, then check did_action( 'wp_body_open' ) and use wp_footer as a fallback, as suggested in #46743. This doesn't require theme updates and seems feasible for 5.3.

#3 @SergeyBiryukov
5 months ago

  • Component changed from General to Toolbar

#4 in reply to: ↑ 2 @afercia
5 months ago

Replying to SergeyBiryukov:

This doesn't require theme updates and seems feasible for 5.3.

Thanks @SergeyBiryukov yep, good point! The "Skip links" should be then adjusted a bit, as they should be the first focusable element in the page. In the front tend, this could be a bit complicated, as that's a theme responsibility.

#5 @SergeyBiryukov
5 months ago

  • Milestone set to Awaiting Review
  • Resolution maybelater deleted
  • Status changed from closed to reopened

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


4 months ago

#7 @afercia
4 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.3

Discussed during today's accessibility bug scrub. Agreed to try this for the next major release, 5.3.

#8 @joedolson
6 weeks ago

  • Owner set to joedolson
  • Status changed from reopened to assigned

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


5 weeks ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


5 days ago

#11 @afercia
5 days ago

Worth reminding there's some JavaScript in admin-bar.js that moves the admin bar but only when jQuery is not used on the front end. This is the case with Twenty Nineteen, which doesn't use jQuery.

		addEvent(w, 'load', function() {
			aB = d.getElementById('wpadminbar');

			if ( d.body && aB ) {
				d.body.appendChild( aB );

@audrasjb
5 days ago

Workaround: including the admin bar on wp_body_open

#12 @audrasjb
5 days ago

  • Keywords has-patch needs-testing added; needs-patch removed

47053.diff works fine on my side but needs testing.
By the way, I don't really understand why we should check did_action before using wp_body_open hook :)

#13 @audrasjb
4 days ago

  • Keywords needs-refresh added

Ok sorry for the misunderstanding in the comment above. We _do need to check if wp_body_open is available for old themes backward compatibility :)

Note: See TracTickets for help on using tickets.