WordPress.org

Make WordPress Core

#22025 closed defect (bug) (fixed)

Twenty Twelve: Skip link invisible

Reported by: toscho Owned by: lancewillett
Milestone: 3.5 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: Cc:

Description

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.

Attachments (4)

2012-skip-link-opera.png (7.4 KB) - added by toscho 19 months ago.
at least a visible outline in Opera
style.css.patch (776 bytes) - added by toscho 19 months ago.
Visible skip link on :focus and :active, tested in 12.02, IE 9, Chrome 22, Firefox 15.01
skip-link-focus.png (8.4 KB) - added by toscho 19 months ago.
Screenshot of the result in Opera
22025.diff (1.9 KB) - added by lancewillett 19 months ago.

Download all attachments as: .zip

Change History (17)

toscho19 months ago

at least a visible outline in Opera

comment:1 SergeyBiryukov19 months ago

  • Component changed from Accessibility to Bundled Theme

comment:2 follow-up: lancewillett19 months ago

  • Milestone Awaiting Review deleted

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.

comment:3 in reply to: ↑ 2 toscho19 months ago

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

comment:4 SergeyBiryukov19 months ago

  • Milestone set to Awaiting Review

Restoring the milestone until the ticket is properly closed.

comment:5 follow-up: lancewillett19 months ago

  • Milestone changed from Awaiting Review to 3.5

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

toscho19 months ago

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

toscho19 months ago

Screenshot of the result in Opera

comment:6 in reply to: ↑ 5 toscho19 months ago

  • Keywords has-patch needs-testing added

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.

comment:7 follow-up: lancewillett19 months ago

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

comment:8 toscho19 months ago

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.

comment:9 follow-up: lancewillett19 months ago

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

comment:10 in reply to: ↑ 9 lancewillett19 months ago

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.

comment:11 in reply to: ↑ 7 SergeyBiryukov19 months ago

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

lancewillett19 months ago

comment:12 lancewillett19 months ago

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.

comment:13 lancewillett19 months ago

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

In [22186]:

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

Note: See TracTickets for help on using tickets.