WordPress Default Theme, Twenty Eleven, Accessibility Plugin

Download Plugin

Injects a few basic accessibility enhancements like fixing outline:0 so keyboard users can see what links are focused and adds a skip link that works in webkit browsers (Chrome, Safari, Mobile Safari). It also bumps up the color contrast to pass WCAG 2.0 AAA and underlines the links to improve usability.

This plugin is very basic. It injects this CSS:

:focus {outline: 2px solid #369;}
#content, #secondary {outline:0 none;}
a {text-decoration:underline; color: #0A5A95;}
#site-description {color: #000000;}

And this JavaScript to fix the Webkit skip link bug:

$(document).ready(function(){
// Set tabindex on the main and section divs so IE knows they are focusable, and so Webkit browsers will focus() them.
$(‘#content’).attr(‘tabindex’, -1);
$(‘#secondary’).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();
}
});
});

One Reply to “WordPress Default Theme, Twenty Eleven, Accessibility Plugin”

  1. Thanks Paul for posting this plugin. I noticed it’s not listed in the repository (something we spoke about before). Do you plan to upload it to the WordPress plugin repository?

Leave a Reply

Your email address will not be published. Required fields are marked *