WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 7 years ago

#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:
PR Number:

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

Download all attachments as: .zip

Change History (17)

@toscho
7 years ago

at least a visible outline in Opera

#1 @SergeyBiryukov
7 years ago

  • Component changed from Accessibility to Bundled Theme

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

  • Milestone set to Awaiting Review

Restoring the milestone until the ticket is properly closed.

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

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

@toscho
7 years ago

Screenshot of the result in Opera

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

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