Need skip link(s) at top of admin pages

[grahamarmfield]

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.

[grahamarmfield]

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

[azaozz]

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?

[PhilippeVay]

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:

• ​G1: Adding a link at the top of each page that goes directly to the main content area
• ​G124: Adding links at the top of the page to each area of the content
• and when tabindex is used ​F44: Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that does not preserve meaning and operability

[grahamarmfield]

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

[esmi]

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.

[azaozz]

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

[sabreuse]

Also related: #9321

[nacin]

What is left here?

[helenyhou]

As per UI chat today, seems fixed.

[grahamarmfield]

Replying to helenyhou:

As per UI chat today, seems fixed.

I'm liking the clarity of those links.

[grahamarmfield]

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).

[nacin]

Not good, we should fix this.

[sabreuse]

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.

[helenyhou]

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?

[sabreuse]

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

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

[helenyhou]

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. :)

[nacin]

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. :-)

[sabreuse]

Simplified skip link, more distinct from the button look:

[sabreuse]

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

[helenyhou]

+1 to 21310-contrast.3.diff.

[azaozz]

In 22726:

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

[grahamarmfield]

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.

[nacin]

In 22727:

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

[obenland]

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?

[lancewillett]

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.

[nacin]

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. :-)