Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Taking WordPress to AAA accessibility (WordUp Whitehall 2011)

2,873 views

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

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>

×