Taking WordPress to AAA accessibility (WordUp Whitehall 2011)


Published on

Presentation at WordUp Whitehall 2011 event in November 2011 by Steph Gray. Covers process for developing a AAA-accessible WordPress theme for DCMS eAccessibility forum.

Site now live at: http://discuss.culture.gov.uk/eaccessibility

Published in: Technology, Business
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Taking WordPress to AAA accessibility (WordUp Whitehall 2011)

  1. 1. Taking WordPress to AAA November 2011 Steph Gray, Helpful Technology
  2. 2. <ul><li>xxx </li></ul>I don’t really know what I’m talking about
  3. 3. Out of the box:
  4. 4. Before:
  5. 5. After:
  6. 6. Principles of accessibility Readable Adaptable Predictable Source: http://www.w3.org/WAI/WCAG20/quickref/Overview.php Navigable Compatible
  7. 7. What does AAA require? <ul><li>xxx </li></ul><ul><li>Multimedia alternatives (descriptions, transcripts) </li></ul><ul><li>Enhanced contrast (7:1; 4.5:1 for larger text) </li></ul><ul><li>Support user stylesheet switching (CSS and/or tools) </li></ul><ul><li>User able to reduce line lengths to max 80 characters </li></ul><ul><li>No images of text </li></ul><ul><li>No unexpected interruptions (alert boxes, popups etc) </li></ul><ul><li>Link purpose identifiable out of context </li></ul><ul><li>Section headings </li></ul><ul><li>Sitemap or breadcrumb needed </li></ul><ul><li>Explain unusual words & abbreviations </li></ul>
  8. 8. First audit: The Good <ul><li>xxx </li></ul><ul><li>All content is keyboard accessible </li></ul><ul><li>Skip links </li></ul><ul><li>Descriptive page titles </li></ul><ul><li>Consistent, labelled navigation </li></ul>
  9. 9. <ul><li>xxx </li></ul><ul><li>Text hidden using ‘display: none;’ </li></ul>Hidden text for screenreaders Solution: use absolute, off-screen positioning
  10. 10. <ul><li>xxx </li></ul><ul><li>Layout breaks when text size increased </li></ul>Solution: relative sizing of structural blocks
  11. 11. <ul><li>xxx </li></ul><ul><li>Layout not resizable to shorten line lengths </li></ul>Solution: relative sizing on wrappers; use max-width
  12. 12. <ul><li>xxx </li></ul><ul><li>No supplementary indicators of focus/orientation cues </li></ul>Solution: use :focus pseudoclass to highlight current link, and highlight current section/menu uitem
  13. 13. <ul><li>xxx </li></ul><ul><li>Insufficient colour contrast </li></ul>Solution: darker text on white backgrounds #888 (3.5:1) #575757 (7.23:1) http://juicystudio.com/services/luminositycontrastratio.php
  14. 14. <ul><li>xxx </li></ul><ul><li>Inline styles (preventing user stylesheets from overriding) </li></ul><input type=&quot;hidden&quot; id=&quot;_wp_unfiltered_html_comment&quot; name=&quot;_wp_unfiltered_html_comment&quot; value=&quot;c3a8343c71&quot; /> <p style=&quot;display: none;&quot;><input type=&quot;hidden&quot; id=&quot;akismet_comment_nonce&quot; name=&quot;akismet_comment_nonce&quot; value=&quot;f39ad65f0f&quot; /> </p> function fixCommentNonceStyle() { var commentparas = $('#respond p'); for(var i = 0; i < commentparas.length; i++) { if ($(commentparas[i]).attr(&quot;style&quot;) == 'display: none;') { $(commentparas[i]).removeAttr(&quot;style&quot;); } } return true; } (imperfect) solution: nuke Akismet’s inline style with jQuery
  15. 15. <ul><li>xxx </li></ul><ul><li>No error message when empty search strings used </li></ul><ul><li>Solution: </li></ul><ul><li>Trap empty searches by filtering on ‘request’ and rewriting search string as [EMPTY] </li></ul><ul><li>Redirect from search.php to 404.php with message if [EMPTY] is the search string </li></ul>
  16. 16. <ul><li>No context for some links </li></ul>Solution (for custom menus): add hidden text to links explaining context, using jQuery
  17. 17. (Aside: this applies to traditional WordPress listings too) Solution: hidden text with unique description of where the link takes you
  18. 18. <ul><li>Lack of structure in comments form (it’s a bit of a mess) </li></ul><ul><li>Solution: </li></ul><ul><li>Add fieldset & legend via comment_form_top() hook </li></ul><ul><li>Fix Subscribe to Comments plugin to move checkbox </li></ul><ul><li>Say what HTML can be used & nature of comments </li></ul>
  19. 19. <ul><li>xxx </li></ul><ul><li>No sitemap or breadcrumb trail to tell users where they are </li></ul>(dubious) solution: [shortcode] to render wp_list_pages() – but a plugin might be safer for general purpose WP themes
  20. 20. Adding a stylesheet switcher Alternate stylesheets are for contrast, not text size (which is resizable using browser features)
  21. 21. w00t! <ul><li>xxx </li></ul>
  22. 22. WordPress ‘out of the box’ issues for AAA <ul><li>xxx </li></ul><ul><li>Empty search takes user to home, no message </li></ul><ul><li>comment_form() markup lacks fieldset, legend </li></ul><ul><li>Common plugins aren’t perfect </li></ul><ul><ul><li>Akismet’s hidden comment input </li></ul></ul><ul><li>Twenty Ten theme needs some work: </li></ul><ul><ul><li>Colour contrast </li></ul></ul><ul><ul><li>Font-sizing in absolute units </li></ul></ul><ul><ul><li>Layout not resizable </li></ul></ul>
  23. 23. Strategies for fixing <ul><li>xxx </li></ul><ul><li>Fix content </li></ul><ul><li>Fix CSS </li></ul><ul><li>Fix templates </li></ul><ul><li>Fix via hooks & filters </li></ul><ul><li>Target with jQuery </li></ul>