WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 21 months 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 2 years ago.
21471.2.diff (1.8 KB) - added by lessbloat 22 months ago.
21471.3.diff (4.2 KB) - added by lessbloat 22 months ago.

Download all attachments as: .zip

Change History (15)

azaozz2 years ago

comment:1 azaozz2 years ago

In [21423]:

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

comment:2 azaozz2 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 wonderboymusic2 years ago

  • Keywords has-patch added

comment:4 azaozz2 years ago

In [21465]:

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

comment:5 lessbloat2 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.

comment:6 lessbloat23 months ago

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

comment:7 grahamarmfield23 months 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 nacin22 months ago

  • Type changed from enhancement to task (blessed)

Looks like there are two things left here:

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

lessbloat22 months ago

comment:9 lessbloat22 months 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 22 months ago by lessbloat (previous) (next) (diff)

lessbloat22 months ago

comment:10 lessbloat22 months 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

comment:11 helenyhou21 months ago

  • Keywords commit added

comment:12 azaozz21 months 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.