Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#21471 closed task (blessed) (fixed)

Add "Skip to toolbar" accessibility shortcut

Reported by: azaozz Owned by: azaozz
Milestone: 3.5 Priority: normal
Severity: normal Version:
Component: Accessibility Keywords: has-patch commit
Focuses: Cc:


The toolbar HTML is outputted in different places for different screens. It's at the bottom on the front-end and on some admin screens, or after the admin menu on other.

To improve accessibility it would need a "skip to" link similar to the "Skip to content" link. Some more info.

Attachments (3)

21471.patch (2.5 KB) - added by azaozz 3 years ago.
21471.2.diff (1.8 KB) - added by lessbloat 3 years ago.
21471.3.diff (4.2 KB) - added by lessbloat 3 years ago.

Download all attachments as: .zip

Change History (15)

@azaozz3 years ago

comment:1 @azaozz3 years ago

In [21423]:

Add "Skip to toolbar" accessibility shortcut, see #21471

comment:2 @azaozz3 years ago

In [21435]:

Accessibility: fix the Skip to content link, show it on :focus, improve the styling of the skip links when shown, see #21310, see #21471

comment:3 @wonderboymusic3 years ago

  • Keywords has-patch added

comment:4 @azaozz3 years ago

In [21465]:

Fix .screen-reader-text in RTL, see #21471

comment:5 @lessbloat3 years ago

Worked great in FF. When I test the "Skip to toolbar" link in Chrome, I get:


1) Tab to "Skip to toolbar"
2) Click enter on keyboard
3) Tabbing order resets, and next tab shows "Skip to main content"


1) Tab to "Skip to toolbar"
2) Click enter on keyboard
3) Tabbing jumps to toolbar, and next tab focuses on WordPress logo.

comment:6 @lessbloat3 years ago

In the UI chat, @azaozz mentioned this is a bug in Chrome... :-)

comment:7 @grahamarmfield3 years ago

Yes @azaozz is correct - this is a bug in Chrome (and all webkit browsers I believe) and should have been fixed a long time ago. To ensure it works in Chrome it is necessary to force focus to move using javascript.

comment:8 @nacin3 years ago

  • Type changed from enhancement to task (blessed)

Looks like there are two things left here:

  • Fix bug in Chrome.
  • Review the design here.

@lessbloat3 years ago

comment:9 @lessbloat3 years ago

Design looks good to me. Fixed Chrome and Safari bug (for 'Skip to toolbar' and 'Skip to main content') in 21471.2.diff.

Note: Looks like webkit browsers need tabindex='0' added to div's in order to focus on them. In addition, I found it necessary to add a slight delay before setting the focus.

Version 1, edited 3 years ago by lessbloat (previous) (next) (diff)

@lessbloat3 years ago

comment:10 @lessbloat3 years ago

Took a crack at adding some style to the skip button in 21471.3.diff:


comment:11 @helenyhou3 years ago

  • Keywords commit added

comment:12 @azaozz3 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In [22249]:

Accessibility shortcuts: new looks and fix for the WebKit focus bug, props lessbloat, fixes #21471

Note: See TracTickets for help on using tickets.