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

SXSW 2013 Panel Picker Voting Accessibility Problems

Accessibility Matters to Me

This is the second year I’ve proposed a panel at SXSW Interactive on accessibility. Both years on mobile accessibility which is the area I find most exciting. I recorded a video using the VoiceOver screen reader on my iPad to use as supporting materials in the hope that my panel will be accepted. I also took the extra effort to add closed captions to the YouTube video to make it accessible to the deaf.

iAccessibility – Mobile Freedom for All

My proposed panel is titled iAccessibility – Mobile Freedom for All. You can read all the details, watch the video, and hopefully vote for me here. I also linked to my past presentation, iAccessibility: iPhones & iPads Mobile Freedom for All, given at many accessibility conferences. This is what my panel will be based on but it will be thoroughly updated with new content and tweaked before presenting.

Blind Users Cannot Vote for a Panel

I was very excited to promote my panel on Twitter and Facebook when voting began. Disappointingly, when voting I attempted to use the VoiceOver screen reader on OS X and discovered that voting was impossible. Below I will document the accessibility problems with SXSW’s Panel Picker voting process. I plan to include the code fixes that will make this accessible and contact SXSW to ask that they fix this. I’ll edit this post with new information as it comes in.

What Exactly are the Accessibility Problems?

  • Incorrect reading order places voting buttons at the very bottom of the page.
  • Voting buttons cannot be focused with the keyboard. You cannot TAB to these buttons and activate with the keyboard.
  • Use of non-native HTML links or buttons that are not keyboard accessible by default.
  • The Facebook, Twitter, and LinkedIn share buttons have no alt attribute and cannot be focused with the keyboard.
  • The thumbs up & thumbs down voting buttons have no text alternative. These two glyphs, ☝ & ☟, do not make sense to a screen reader.
  • Voting is not possible when using VoiceOver on a Mac, iPhone, or iPad.
  • Voting with voice control software, Dragon NaturallySpeaking, is also not possible (or easily possible).
  • Voting button hover style does not match focus style. (Focus is not possible anyway.)

Reading Order

Disabling CSS shows incorrect reading order with voting buttons at the very bottom of the page.

Vote Buttons with CSS disabled

Even though visually the voting buttons are in the top-left corner of the page, in the source code order (which matches reading order) the voting buttons are at the very bottom, right before the footer. The developer used CSS positioning to move the vote buttons to the top left.

No Keyboard Focus, TAB Key will Not Reach Buttons

The buttons are not coded semantically. They are glyphs wrapped in spans, wrapped in list items, inside a unordered list. Though you can make this type of code look however you want it is not natively keyboard focusable HTML elements.

Here we see the code inspected with the Chrome developer tools.

List elements code in Chrome developer tools

Here we see VoiceOver on OS X announcing them as “list 2 items”.
VoiceOver output of list 2 items

If I run an accessibility audit in Chrome Canary’s developer tools we see a warning that “Elements with on click handlers must be focusable”.

Chrome Canary's accessibility audit tool

So these buttons work fine with the mouse, onclick, but they do not work with the keyboard because they are not focusable.

No Text Alternative to the Button Glyphs

Here you see that I am able to get VoiceOver to focus on the thumbs-up button and you see that it says clickable but using VoiceOver to activate this button does not work. It is only possible to vote using the mouse. Of course that does not help if you are blind and cannot see the screen.

VoiceOver output says ☝ clickable

What you don’t see in the VoiceOver caption panel where is says ☝ clickable is that VoiceOver actually speaks “Up Pointing Index clickable”. That really makes no sense though and requires a text alternative like “Vote Up” or “Vote Down”.

Share Buttons Have No Alt Attribute or Keyboard Focus

There are the same problems with the sharing buttons, no text alternative & no keyboard access. So in addition to the fact that my blind friends cannot vote for my panel, they also cannot use the sharing buttons to spread the word about promoting accessibility at SXSW Interactive.

VoiceOver’s output of “25 clickable” makes no sense to a blind user.

VoiceOver output of sharing buttons 25 clickable

Button Hover does not Match Focus

Though focus is not possible currently, this should also be documented.

Vote Up button turns black on hover

Moving Forward

I plan to contact SXSW shortly and send them the link to this post. I also plan to update it with actual code fix recommendations. Hopefully SXSW will be happy to receive the feedback and make the needed improvements. I’ll keep this post updated with new details.

I may also upload a video showing how it will not work on the iPad were you can also hear the problems with VoiceOver’s audio output.

Please help me promote accessibility at a mainstream technology conference like SXSW Interactive by voting for my panel and sharing this blog post with your friends.

Please leave a comment here or find me @pauljadam on Twitter. Thanks!