Make WordPress Core

Opened 12 years ago

Closed 12 years ago

#22025 closed defect (bug) (fixed)

Twenty Twelve: Skip link invisible

Reported by: toscho's profile toscho Owned by: lancewillett's profile 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 12 years ago.
at least a visible outline in Opera
style.css.patch (776 bytes) - added by toscho 12 years 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 12 years ago.
Screenshot of the result in Opera
22025.diff (1.9 KB) - added by lancewillett 12 years ago.

Download all attachments as: .zip

Change History (17)

@toscho
12 years ago

at least a visible outline in Opera

#1 @SergeyBiryukov
12 years ago

  • Component changed from Accessibility to Bundled Theme

#2 follow-up: @lancewillett
12 years 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.

#3 in reply to: ↑ 2 @toscho
12 years 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

#4 @SergeyBiryukov
12 years ago

  • Milestone set to Awaiting Review

Restoring the milestone until the ticket is properly closed.

#5 follow-up: @lancewillett
12 years 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. :)

@toscho
12 years ago

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

@toscho
12 years ago

Screenshot of the result in Opera

#6 in reply to: ↑ 5 @toscho
12 years 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.

#7 follow-up: @lancewillett
12 years 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/.

#8 @toscho
12 years 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.

#9 follow-up: @lancewillett
12 years 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

#10 in reply to: ↑ 9 @lancewillett
12 years 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.

#11 in reply to: ↑ 7 @SergeyBiryukov
12 years 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].

@lancewillett
12 years ago

#12 @lancewillett
12 years 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.

#13 @lancewillett
12 years 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.