taking wordpress to aaa accessibility (wordup whitehall 2011)

http://helpfultechnology.com | hello@helpfultechnology.com | 020 3012 1024 | @lestephHelpful Technology

Taking WordPress to AAA

November 2011Steph Gray, Helpful Technology

http://helpfultechnology.com | hello@helpfultechnology.com | 020 3012 1024 | @lestephHelpful Technology

• xxx

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

http://helpfultechnology.com | hello@helpfultechnology.com | 020 3012 1024 | @lestephHelpful Technology

Out of the box:

http://helpfultechnology.com | hello@helpfultechnology.com | 020 3012 1024 | @lestephHelpful Technology

Before:

http://helpfultechnology.com | hello@helpfultechnology.com | 020 3012 1024 | @lestephHelpful Technology

After:

http://helpfultechnology.com | hello@helpfultechnology.com | 020 3012 1024 | @lestephHelpful Technology

Principles of accessibility

ReadableAdaptable

Predictable

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

NavigableCompatible

http://helpfultechnology.com | hello@helpfultechnology.com | 020 3012 1024 | @lestephHelpful Technology

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

http://helpfultechnology.com | hello@helpfultechnology.com | 020 3012 1024 | @lestephHelpful Technology

First audit: The Good

• xxx

All content is keyboard accessible

Skip links

Descriptive page titles

Consistent, labelled navigation

http://helpfultechnology.com | hello@helpfultechnology.com | 020 3012 1024 | @lestephHelpful Technology

• xxx

✘ Text hidden using ‘display: none;’

Hidden text for screenreaders

Solution: use absolute, off-screen positioning

http://helpfultechnology.com | hello@helpfultechnology.com | 020 3012 1024 | @lestephHelpful Technology

• xxx

✘ Layout breaks when text size increased

Solution: relative sizing of structural blocks

http://helpfultechnology.com | hello@helpfultechnology.com | 020 3012 1024 | @lestephHelpful Technology

• xxx

✘ Layout not resizable to shorten line lengths

Solution: relative sizing on wrappers; use max-width

http://helpfultechnology.com | hello@helpfultechnology.com | 020 3012 1024 | @lestephHelpful Technology

• xxx

✘ No supplementary indicators of focus/orientation cues

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

http://helpfultechnology.com | hello@helpfultechnology.com | 020 3012 1024 | @lestephHelpful Technology

• xxx

✘ Insufficient colour contrast

Solution: darker text on white backgrounds

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

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

http://helpfultechnology.com | hello@helpfultechnology.com | 020 3012 1024 | @lestephHelpful Technology

• 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

http://helpfultechnology.com | hello@helpfultechnology.com | 020 3012 1024 | @lestephHelpful Technology

• 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

http://helpfultechnology.com | hello@helpfultechnology.com | 020 3012 1024 | @lestephHelpful Technology

✘ No context for some links

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

http://helpfultechnology.com | hello@helpfultechnology.com | 020 3012 1024 | @lestephHelpful Technology

(Aside: this applies to traditional WordPress listings too)

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

http://helpfultechnology.com | hello@helpfultechnology.com | 020 3012 1024 | @lestephHelpful Technology

✘ 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

http://helpfultechnology.com | hello@helpfultechnology.com | 020 3012 1024 | @lestephHelpful Technology

• 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

http://helpfultechnology.com | hello@helpfultechnology.com | 020 3012 1024 | @lestephHelpful Technology

Adding a stylesheet switcher

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

http://helpfultechnology.com | hello@helpfultechnology.com | 020 3012 1024 | @lestephHelpful Technology

• xxx

w00t!

http://helpfultechnology.com | hello@helpfultechnology.com | 020 3012 1024 | @lestephHelpful Technology

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

http://helpfultechnology.com | hello@helpfultechnology.com | 020 3012 1024 | @lestephHelpful Technology

Strategies for fixing

• xxx1. Fix content

2. Fix CSS

3. Fix templates

4. Fix via hooks & filters

5. Target with jQuery