Taking WordPress to AAA accessibility (WordUp Whitehall 2011)

http://helpfultechnology.com | [email protected] | 020 3012 1024 | @lestephHelpful Technology

Taking WordPress to AAA

November 2011Steph Gray, Helpful Technology


• xxx

I don’t really know what I’m talking about


Out of the box:


Before:


After:


Principles of accessibility

ReadableAdaptable

Predictable

Source: http://www.w3.org/WAI/WCAG20/quickref/Overview.php

NavigableCompatible


What does AAA require?

• xxx1. Multimedia alternatives (descriptions, transcripts)

2. Enhanced contrast (7:1; 4.5:1 for larger text)

3. Support user stylesheet switching (CSS and/or tools)

4. User able to reduce line lengths to max 80 characters

5. No images of text

6. No unexpected interruptions (alert boxes, popups etc)

7. Link purpose identifiable out of context

8. Section headings

9. Sitemap or breadcrumb needed

10. Explain unusual words & abbreviations


First audit: The Good

• xxx

All content is keyboard accessible

Skip links

Descriptive page titles

Consistent, labelled navigation


• xxx

✘ Text hidden using ‘display: none;’

Hidden text for screenreaders

Solution: use absolute, off-screen positioning


• xxx

✘ Layout breaks when text size increased

Solution: relative sizing of structural blocks


• xxx

✘ Layout not resizable to shorten line lengths

Solution: relative sizing on wrappers; use max-width


• xxx

✘ No supplementary indicators of focus/orientation cues

Solution: use :focus pseudoclass to highlight current link, and highlight current section/menu uitem


• xxx

✘ Insufficient colour contrast

Solution: darker text on white backgrounds

#888 (3.5:1) #575757 (7.23:1)

http://juicystudio.com/services/luminositycontrastratio.php


• xxx

✘ Inline styles (preventing user stylesheets from overriding)

<input type="hidden" id="_wp_unfiltered_html_comment" name="_wp_unfiltered_html_comment" value="c3a8343c71" /><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="f39ad65f0f" /></p>

function fixCommentNonceStyle() { var commentparas = $('#respond p'); for(var i = 0; i < commentparas.length; i++) { if ($(commentparas[i]).attr("style") == 'display: none;') { $(commentparas[i]).removeAttr("style"); } } return true;}

(imperfect) solution: nuke Akismet’s inline style with jQuery


• xxx

✘ No error message when empty search strings used

Solution:

•Trap empty searches by filtering on ‘request’ and rewriting search string as [EMPTY]

•Redirect from search.php to 404.php with message if [EMPTY] is the search string


✘ No context for some links

Solution (for custom menus): add hidden text to links explaining context, using jQuery


(Aside: this applies to traditional WordPress listings too)

Solution: hidden text with unique description of where the link takes you


✘ Lack of structure in comments form (it’s a bit of a mess)

Solution:•Add fieldset & legend via comment_form_top() hook•Fix Subscribe to Comments plugin to move checkbox•Say what HTML can be used & nature of comments


• xxx

✘ No sitemap or breadcrumb trail to tell users where they are

(dubious) solution: [shortcode] to render wp_list_pages() – but a plugin might be safer for general purpose WP themes


Adding a stylesheet switcher

Alternate stylesheets are for contrast, not text size (which is resizable using browser features)


• xxx

w00t!


WordPress ‘out of the box’ issues for AAA

• xxx✘ Empty search takes user to home, no message

✘ comment_form() markup lacks fieldset, legend

✘ Common plugins aren’t perfect

✘ Akismet’s hidden comment input

✘ Twenty Ten theme needs some work:

✘ Colour contrast

✘ Font-sizing in absolute units

✘ Layout not resizable


Strategies for fixing

• xxx1. Fix content

2. Fix CSS

3. Fix templates

4. Fix via hooks & filters

5. Target with jQuery