Taking WordPress to AAA accessibility (WordUp Whitehall 2011)
-
Upload
helpful-technology -
Category
Technology
-
view
2.591 -
download
0
description
Transcript of 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
http://helpfultechnology.com | [email protected] | 020 3012 1024 | @lestephHelpful Technology
• xxx
I don’t really know what I’m talking about
http://helpfultechnology.com | [email protected] | 020 3012 1024 | @lestephHelpful Technology
Out of the box:
http://helpfultechnology.com | [email protected] | 020 3012 1024 | @lestephHelpful Technology
Before:
http://helpfultechnology.com | [email protected] | 020 3012 1024 | @lestephHelpful Technology
After:
http://helpfultechnology.com | [email protected] | 020 3012 1024 | @lestephHelpful Technology
Principles of accessibility
ReadableAdaptable
Predictable
Source: http://www.w3.org/WAI/WCAG20/quickref/Overview.php
NavigableCompatible
http://helpfultechnology.com | [email protected] | 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 | [email protected] | 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 | [email protected] | 020 3012 1024 | @lestephHelpful Technology
• xxx
✘ Text hidden using ‘display: none;’
Hidden text for screenreaders
Solution: use absolute, off-screen positioning
http://helpfultechnology.com | [email protected] | 020 3012 1024 | @lestephHelpful Technology
• xxx
✘ Layout breaks when text size increased
Solution: relative sizing of structural blocks
http://helpfultechnology.com | [email protected] | 020 3012 1024 | @lestephHelpful Technology
• xxx
✘ Layout not resizable to shorten line lengths
Solution: relative sizing on wrappers; use max-width
http://helpfultechnology.com | [email protected] | 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 | [email protected] | 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 | [email protected] | 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 | [email protected] | 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 | [email protected] | 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 | [email protected] | 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 | [email protected] | 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 | [email protected] | 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 | [email protected] | 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 | [email protected] | 020 3012 1024 | @lestephHelpful Technology
• xxx
w00t!
http://helpfultechnology.com | [email protected] | 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 | [email protected] | 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