Make WordPress Core

Opened 12 years ago

Closed 11 years ago

#21471 closed task (blessed) (fixed)

Add "Skip to toolbar" accessibility shortcut

Reported by: azaozz's profile azaozz Owned by: azaozz's profile 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 12 years ago.
21471.2.diff (1.8 KB) - added by lessbloat 12 years ago.
21471.3.diff (4.2 KB) - added by lessbloat 12 years ago.

Download all attachments as: .zip

Change History (15)

@azaozz
12 years ago

#1 @azaozz
12 years ago

In [21423]:

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

#2 @azaozz
12 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
12 years ago

  • Keywords has-patch added

#4 @azaozz
12 years ago

In [21465]:

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

#5 @lessbloat
12 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
12 years ago

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

#7 @grahamarmfield
12 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
12 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
12 years ago

#9 @lessbloat
12 years ago

Design looks good to me. Fixed Chrome/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.

Last edited 12 years ago by lessbloat (previous) (diff)

@lessbloat
12 years ago

#10 @lessbloat
12 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
11 years ago

  • Keywords commit added

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