Twenty Twelve: accessibility sweep

[lancewillett]

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.

[lancewillett]

In [22186]:

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

[jorbin]

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

[pauljadam]

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();
		}
	});

[pauljadam]

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!

[joedolson]

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.

[jorbin]

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

[jorbin]

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.

[lancewillett]

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.

[lancewillett]

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.

[joedolson]

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.

[ocean90]

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

[lancewillett]

In 22573:

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

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

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

[DrewAPicture]

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.