Twenty Twelve: Skip link invisible

[toscho]

The skip link is set to a rectangle of 1px and therefore invisible. Tested in Chrome and Opera.

It should be visible on :focus to let the user know there is something useful to click.

While you can see there is a link in Opera, in Chrome the focus seems to get totally lost which is even more confusing.

at least a visible outline in Opera

The skip link is designed to be invisible to visual user agents, it's not meant to be seen or clickable. It's intended to be in the source of the document and available for non-visual user agents like screen readers to be able to jump quickly around the document.

Replying to lancewillett:

The skip link is designed to be invisible to visual user agents

Why? Skip links should be ​accessible for all keyboard users. It is very confusing to lose the focus suddenly without any hint.

Labels might be hidden, but skip links are necessary for many other people too:

• no mouse available
• physical limitations
• keyboard is just the preferred input method

Restoring the milestone until the ticket is properly closed.

We aren't trying to be 100% WCAG compatible. That said, it'd be kind of cool to reveal the skip link text on <code>:focus</code>. Patches welcome. :)

Visible skip link on :focus and :active, tested in 12.02, IE 9, Chrome 22, Firefox 15.01

Screenshot of the result in Opera

Replying to lancewillett:

We aren't trying to be 100% WCAG compatible.

No problem. It was for background information. :)

Patches welcome. :)

Attached. The positioning is not perfect, but I think it should work better than the current state. I could not test it on older IEs though, so that's still open.

Thank you, very helpful. One quick note on your patch, we use clip because of RTL language support. The left: -5000px; rule could be problematic for those localized versions of WP. See notes at ​http://themeshaper.com/2011/02/17/css-tip-hiding-content-with-clip/.

The RTL problems are caused be using text-intend. Off-screen positioning should not raise such problems if the element stays in position: absolute when it is focused. Will test that later if nobody else jumps in.

I tested the patch now in IE 5, 6, 7, 8 and 10 too. No problems.

This ticket reminds me we should do a broader sweep of accessibility with Twenty Twelve, see:

• r18117: Twenty Eleven accessibility improvements
• #17524: Accessibility sweep of Twenty Eleven

Replying to lancewillett:

This ticket reminds me we should do a broader sweep of accessibility with Twenty Twelve, see:

• r18117: Twenty Eleven accessibility improvements
• #17524: Accessibility sweep of Twenty Eleven

Opened #22087 for it.

Replying to lancewillett:

The left: -5000px; rule could be problematic for those localized versions of WP.

FWIW, left: -1000em; is used for .screen-reader-text in the admin:
http://core.trac.wordpress.org/browser/tags/3.4.2/wp-admin/css/wp-admin.dev.css#L191

The corresponding rule from wp-admin-rtl.css was removed in [21465].

New patch removes screen-reader-text selector because it conflicts with core assistive text like "Skip to toolbar". skip-link is redundant, so going with only assistive-text class name, and removes unneeded div wrapper.

Styled to mimic the core display, upper left with black/white text.

In [22186]:

Twenty Twelve: improve skip link visibility, mimicing the core toolbar skiplink. Closes #22025, see #22087.