WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 2 years ago

Last modified 2 years ago

#21310 closed task (blessed) (fixed)

Need skip link(s) at top of admin pages

Reported by: grahamarmfield Owned by: sabreuse
Milestone: 3.5 Priority: normal
Severity: normal Version: 3.4.1
Component: Accessibility Keywords: has-patch
Focuses: Cc:

Description

When a user arrives at any of the admin screens (except perhaps for Dashboard) they are probably trying to perform some piece of admin on their site - whether it be add a new post, tweak some settings etc.

For users who are unable to use a mouse or other pointing device (eg blind, motor impaired, etc) it is laborious having to tab through all the navigation links to get to the bit where they can do this.

Please could a 'Skip Link' be added to the top of the main left hand navigation column - ie the first link that people come across when tabbing. The destination for the 'skip link' should be the div that contains the main functionality area, or perhaps just before the 'Screen Options' link.

This link will directly help those using screen readers and those sighted individuals who are unable to use a mouse.

I have created a rough plugin that I have used on a couple of client sites that adds the Skip link and I include it with this ticket in case it might be helpful.

The plugin also makes the position of focus within the admin screens much more visible - something that those with poor eyesight, and the motor impaired also find really useful. I'm raising a separate ticket for that though.

Happy to discuss all this if required.

Attachments (8)

cc-admin-menu-accessibility.zip (1.7 KB) - added by grahamarmfield 3 years ago.
Plugin to add skip link to admin menus at top of page, and improve visibility of focus around the admin screens.
21310-contrast.diff (1.2 KB) - added by sabreuse 2 years ago.
21310.contrast.2.diff (2.3 KB) - added by helenyhou 2 years ago.
Screenshot-skiplink.png (7.3 KB) - added by sabreuse 2 years ago.
21310-contrast.3.diff (1.8 KB) - added by sabreuse 2 years ago.
skip-link-2012-currently.png (16.1 KB) - added by obenland 2 years ago.
21310.twenty-twelve.diff (936 bytes) - added by obenland 2 years ago.
skip-link-2012-after.png (14.2 KB) - added by obenland 2 years ago.

Download all attachments as: .zip

Change History (35)

@grahamarmfield3 years ago

Plugin to add skip link to admin menus at top of page, and improve visibility of focus around the admin screens.

comment:1 @scribu3 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 3.5
  • Type changed from defect (bug) to enhancement

comment:2 @azaozz3 years ago

A question: does the "Skip to Main Content" link have to be visible for all users or it can be invisible in the UI and only work when tabbing?

comment:3 follow-up: @PhilippeVay3 years ago

tl;dr People with disabilities can also use a mouse (and an AT)

Bypass or quick access links to Content, Navigation and Search will only work for blind people and/or some users of screen readers if these links are .visually-hidden (out of the viewport).
Users of other Assistive Technologies (ATs) may not even know there were bypass links; for example these links are also useful if you use ZoomText and a mouse to jump 3 screens length straight to content (that's how it could appear if you zoom at 4 or 500%!)

For the record display: none; and visually: hidden; in CSS will completely hide these links to ATs so one could as well remove them from HTML code as they'd then be useless.

Relevant WCAG 2.0 Techniques:

comment:4 in reply to: ↑ 3 @grahamarmfield3 years ago

Replying to PhilippeVay:
I agree with PhilipeVay, the link(s) should ideally be permanently visible.

comment:5 @esmi3 years ago

Not sure I agree. Why not make position these links off the screen and then move them back into the viewport on focus/active? It reduces screen clutter/noise (also an accessibility issue) yet allows for basic sighted and non-sighted access to these links. The only group left would be the VR users but they already have other methods of page navigation available to them via their software - so are unlikely to make much use of skip links.

comment:6 @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:7 @sabreuse3 years ago

Also related: #9321

comment:8 @nacin3 years ago

  • Type changed from enhancement to task (blessed)

What is left here?

comment:9 follow-up: @helenyhou2 years ago

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

As per UI chat today, seems fixed.

comment:10 in reply to: ↑ 9 @grahamarmfield2 years ago

Replying to helenyhou:

As per UI chat today, seems fixed.

I'm liking the clarity of those links.

comment:11 @grahamarmfield2 years ago

Been having a look at the admin screens using the Colour Contrast Analyzer available from Paciello Group (http://www.paciellogroup.com/resources/contrastAnalyser) and unfortunately the colour contrast for these links between the white text and the blue button background is not high enough to satisfy the threshold specified in WCAG2.0 success criteria 1.4.3 (http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html).

comment:12 @nacin2 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Not good, we should fix this.

@sabreuse2 years ago

comment:13 @sabreuse2 years ago

21310-contrast.diff uses the same gradients as button-primary for the skip links. Contrast ratio of 5.1:1 passes WCAG AA per webaim.org's tester.

@helenyhou2 years ago

comment:14 @helenyhou2 years ago

  • Keywords has-patch added; needs-patch removed

21310.contrast.2.diff adds the treatment to the admin bar. Kind of lame that we have to duplicate like this, but so it goes with something that loads on the front.

Side note: I think Twenty Twelve's skip links were styled to match those from the admin, but before they actually got styled. Worth mentioning to the bundled theme folks?

comment:15 follow-up: @sabreuse2 years ago

Good catch on the admin bar - I always forget to double up.

Twenty twelve's skip link is #fff/#333, so passes easily.

comment:16 in reply to: ↑ 15 @helenyhou2 years ago

Replying to sabreuse:

Twenty twelve's skip link is #fff/#333, so passes easily.

It does, but I don't know if they purposefully wanted it to match the admin or not. :)

comment:17 @nacin2 years ago

This *looks* great, but it kind of conflates button versus not a button. (I'm not sure why we went blue to begin with.) These aren't primary actions, they are links. And, if a user accidentally hits tab and comes across once of these (which I do from time to time), it is suddenly startling to see a giant blue box. More so when it matches the primary color styling.

It might be better using dark-on-light. At first I was thinking we could get away with the secondary button style (black on light gray, almost white) but perhaps we can mimik the "Add New" links at the top of the list tables: #f1f1f1 background, standard link color (as it is a link), just bigger font and more padding?

Before we changed it to what is in trunk now, I made a few comments about how the original black text on a white rectangle could look much better. But we don't need to go all out. We can keep these simple. Just nibble the corners and avoid #000 and #fff together and we should be fine. :-)

comment:18 @nacin2 years ago

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

comment:19 @sabreuse2 years ago

Simplified skip link, more distinct from the button look:


@sabreuse2 years ago

comment:20 @sabreuse2 years ago

21310-contrast.3.diff applies the style in the simplified screenshot to both the content & toolbar skip links.

comment:21 @helenyhou2 years ago

+1 to 21310-contrast.3.diff.

comment:22 follow-up: @azaozz2 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 22726:

Skip links: simplified look with more contrast, props sabreuse, fixes #21310

comment:23 in reply to: ↑ 22 @grahamarmfield2 years ago

Replying to azaozz:

In 22726:

Skip links: simplified look with more contrast, props sabreuse, fixes #21310

Look forward to seeing that in the next nightly.

comment:24 @nacin2 years ago

In 22727:

Use standard link colors with the skip links. see #21310.

comment:25 follow-up: @obenland2 years ago

  • Cc lancewillett added

Skip links in Twenty Twelve look like this right now:

http://core.trac.wordpress.org/attachment/ticket/21310/skip-link-2012-currently.png

I'm not sure whether it was a goal for Twenty Twelve to have its skip links look like core's (@lancewillett: ?). If it was, 21310.twenty-twelve.diff​ will do that, sans the font-family:

http://core.trac.wordpress.org/attachment/ticket/21310/skip-link-2012-after.png

Edit: Does fancy trac markup not work on closed tickets?

Last edited 2 years ago by obenland (previous) (diff)

comment:26 in reply to: ↑ 25 ; follow-up: @lancewillett2 years ago

Replying to obenland:

I'm not sure whether it was a goal for Twenty Twelve to have its skip links look like core's (@lancewillett: ?). If it was, 21310.twenty-twelve.diff​ will do that, sans the font-family:

Yes, it'd be nice for them to look like core -- but it's not a blocker for 3.5.

comment:27 in reply to: ↑ 26 @nacin2 years ago

Replying to lancewillett:

Yes, it'd be nice for them to look like core -- but it's not a blocker for 3.5.

I don't think having them look like core is necessarily a requirement. There's an inherit difference between a public theme and a web application/dashboard that I think is fine to be carried into skip links. :-)

Note: See TracTickets for help on using tickets.