WordPress.org

Make WordPress Core

#22087 closed defect (bug) (fixed)

Twenty Twelve: accessibility sweep

Reported by: lancewillett Owned by:
Milestone: 3.5 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords:
Focuses: Cc:

Description

See r18117 #17524 and for how we handled this for Twenty Eleven accessibility improvements.

See also #22025 which is related to skip link visibility on focus.

Attachments (2)

22087.diff (2.7 KB) - added by jorbin 18 months ago.
22087.1.diff (1.7 KB) - added by jorbin 18 months ago.

Download all attachments as: .zip

Change History (19)

comment:1 DrewAPicture19 months ago

  • Cc xoodrew@… added

comment:2 toscho19 months ago

  • Cc info@… added

comment:3 lancewillett18 months ago

In [22186]:

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

comment:4 jorbin18 months ago

There seem to be a couple of areas that lack sufficient color contrast. WCAG 2.0 requires a 4.5 - 1 ratio for AA support. http://webaim.org/resources/contrastchecker/ is a good tool for checking the contrast ratio.

.widget_recent_entries .post-date,
.widget_rss .rss-date - aaa on fff

.menu-toggle,
input[type="submit"],
article.post-password-required input[type=submit],
li.bypostauthor cite span - 7c7c7c on e6e6e6

.menu-toggle:active,
.menu-toggle.toggled-on,
input[type="submit"]:active,
article.post-password-required input[type=submit]:active,
input[type="submit"].toggled-on - 777 on e1e1e1

article.format-link header - 848484 on ebebeb

.comments-area article header h4 - fff on 0088d0

comment:5 follow-ups: pauljadam18 months ago

  • Cc pauljadam added
  • Type changed from enhancement to defect (bug)

Skip link broken in webkit.

This jQuery code will fix it.


	// Set tabindex on the main and section divs so IE knows they are focusable, and so Webkit browsers will focus() them.
	$('#main').attr('tabindex', -1);

	var is_webkit = navigator.userAgent.toLowerCase().indexOf('webkit') > -1;
	var is_opera = navigator.userAgent.toLowerCase().indexOf('opera') > -1;
	
	// If Webkit, set focus to it.
	$("a[href^='#']").click(function(event){
		var clickAnchor="#"+this.href.split('#')[1];
		if(is_webkit || is_opera) 
		{
			$(clickAnchor).focus();
		}
	});

comment:6 pauljadam18 months ago

I suggest running the juicy studio color contrast analyzer or FireEyes color contrast checker to find all the color contrast issues. The main problems are silver text on white or silver text on gray.

Thanks!

comment:7 joedolson18 months ago

  • Cc joedolson added

To conform with WCAG 2 guidelines 1.4.1 (Use of Color) and 1.4.3 (Contrast (Minimum) when working with links and hover/focus states, either links must be underlined or must have a contrast difference that meets minimum contrast guidelines with both the body text and the background color. This is *very* limiting when it comes to color choices for links (see http://webaim.org/blog/wcag-2-0-and-link-colors/ for details), and may be considered too restrictive for practical use -- however, a great deal of the problem can be removed simply by transitioning text decoration on links on :hover and :focus -- underlined links should have the underline removed; plain links should have an underline added. This gives a transition indicator that is not dependent on color or contrast for visibility.

jorbin18 months ago

comment:8 jorbin18 months ago

My patch converts all the 777 to 757575 which fixes the bug related to 777 on fff being 1:4.48. New contrast will be 1:4.46

jorbin18 months ago

comment:9 in reply to: ↑ 5 jorbin18 months ago

Replying to pauljadam:

Skip link broken in webkit.

This jQuery code will fix it.

It doesn't make sense to add a dependency on jQuery to the front end of Twenty Twelve, so 22087.1.diff does this in straight JS.

comment:10 in reply to: ↑ 5 ; follow-ups: lancewillett18 months ago

Replying to pauljadam:

Skip link broken in webkit.

Hmm, wouldn't that mean that many other skip links (like the core toolbar one) are broken also? I don't think it's the right solution to patch this in the theme. That seems like overkill and also temporary (future themes, other websites?).

Should either be fixed in core WP maybe, or we should lobby the browser maker to get it working for everyone.

Last edited 18 months ago by lancewillett (previous) (diff)

comment:11 lancewillett18 months ago

Thanks everyone so far for posting notes, recommendations, and patches! Very helpful. Just to note, I don't think we need to be 100% WCAG 2 compliant -- but let's get as close as we can with the low-hanging fruit and then discuss the harder items in terms of the trade-offs.

comment:12 in reply to: ↑ 10 joedolson18 months ago

People have been lobbying Webkit to fix this bug for years -- it hasn't happened yet, so I wouldn't hold out too much hope for that. Here's the bug tracking for that issue: https://bugs.webkit.org/show_bug.cgi?id=17450

@lancewillett I agree that it should be fixed in core on the admin side; but on a theme front, it still requires enqueueing a script, and I'm not sure that core should be automatically enqueuing scripts into a theme.

I definitely agree with committing the skiplink fix in straight JS.

comment:13 in reply to: ↑ 10 ocean9018 months ago

Replying to lancewillett:

Hmm, wouldn't that mean that many other skip links (like the core toolbar one) are broken also?

Should either be fixed in core WP maybe, or we should lobby the browser maker to get it working for everyone.

It's already fixed in core, see [22249].

comment:14 lancewillett17 months ago

In 22573:

Twenty Twelve: fix text color contrast, props jorbin. See #22087.

comment:15 follow-up: lancewillett17 months ago

I'm leaning toward leaving out the skiplink JS since it's only one browser (Safari) and I don't think we should load extra JS for everyone just for that case.

If so, we can close this ticket and open new ones for other issues that come up.

comment:16 in reply to: ↑ 15 DrewAPicture17 months ago

  • Keywords close added

Replying to lancewillett:

I'm leaning toward leaving out the skiplink JS since it's only one browser (Safari) and I don't think we should load extra JS for everyone just for that case.

+1 for not loading extra JS for all.

If so, we can close this ticket and open new ones for other issues that come up.

Let's do that.

comment:17 lancewillett17 months ago

  • Keywords needs-patch close removed
  • Resolution set to fixed
  • Status changed from new to closed
Note: See TracTickets for help on using tickets.