Taking WordPress to AAA accessibility (WordUp Whitehall 2011)

Taking WordPress to AAA November 2011 Steph Gray, Helpful Technology

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

Out of the box:

Before:

After:

Principles of accessibility Readable Adaptable Predictable Source: http://www.w3.org/WAI/WCAG20/quickref/Overview.php Navigable Compatible

What does AAA require?
xxx
Multimedia alternatives (descriptions, transcripts)
Enhanced contrast (7:1; 4.5:1 for larger text)
Support user stylesheet switching (CSS and/or tools)
User able to reduce line lengths to max 80 characters
No images of text
No unexpected interruptions (alert boxes, popups etc)
Link purpose identifiable out of context
Section headings
Sitemap or breadcrumb needed
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)

w00t!
xxx

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
xxx
Fix content
Fix CSS
Fix templates
Fix via hooks & filters
Target with jQuery

http://www.helpfultechnology.com	305
http://flavors.me	42
http://www.blogship.net	27
http://govinthelab.com	21
http://flavours.me	19
http://es.flavors.me	15
http://pt.flavors.me	10
http://de.flavors.me	10
http://fr.flavors.me	7
http://jp.flavors.me	2
http://us-w1.rockmelt.com	2
http://staging2.dh.pentri.com	1
http://blog.helpfultechnology.com	1
http://www.twylah.com	1
http://translate.googleusercontent.com	1

Taking WordPress to AAA accessibility (WordUp Whitehall 2011)

by Helpful Technology on Nov 24, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

15 Embeds 464

Statistics

Taking WordPress to AAA accessibility (WordUp Whitehall 2011) — Presentation Transcript