WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 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:

Description

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 4 years ago.
21471.2.diff (1.8 KB) - added by lessbloat 4 years ago.
21471.3.diff (4.2 KB) - added by lessbloat 4 years ago.

Download all attachments as: .zip

Change History (15)

@azaozz
4 years ago

#1 @azaozz
4 years ago

In [21423]:

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

#2 @azaozz
4 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

#3 @wonderboymusic
4 years ago

  • Keywords has-patch added

#4 @azaozz
4 years ago

In [21465]:

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

#5 @lessbloat
4 years ago

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

Actual:

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

Expected:

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

#6 @lessbloat
4 years ago

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

#7 @grahamarmfield
4 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.

#8 @nacin
4 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.

@lessbloat
4 years ago

#9 @lessbloat
4 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 4 years ago by lessbloat (previous) (next) (diff)

@lessbloat
4 years ago

#10 @lessbloat
4 years ago

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

http://f.cl.ly/items/1J3B0u2Z3T0H362E0a34/skip-links-style.jpg

#11 @helenyhou
4 years ago

  • Keywords commit added

#12 @azaozz
4 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.