Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Joe Ortenzi: Inclusive Design for WordPress

Joe Ortenzi: Inclusive Design for WordPress

Carrying on from my presentation at WordCamp Sydney 2012, where I introduced Inclusive Design to an enthusiastic audience, this presentation aims to be more specific about how to apply accessibility principles across the WP spectrum, for designers, content authors and developers. I will present specific methods for creating accessible content and keeping it accessible, particularly for eCommerce, government and transactional sites.

WP Australia

April 28, 2013

More Decks by WP Australia

Other Decks in Technology


  1. “The UN Convention on Rights of Persons with Disabilities (2008)

    declares that Disability is a human rights issue and not a matter of discretion. The UN Convention affirms that all persons with all types of disabilities must enjoy all human rights and fundamental freedoms. The outcomes of the project are designed to uphold and promote the human rights of disabled people as enshrined in national and international law.”
  2. Perceivable Operable Understandable Robust 4 Guidelines 4 Guidelines 3 Guidelines

    1 Guideline 22 Criteria 20 Criteria 17 Criteria 2 Criteria
  3. Visual map of Web Content Accessibility Guidelines 2.0 Designed by

    Stamford Interactive www.stamfordinteractive.com.au Based on World Wide Web Consortium documentation available at www.w3.org/TR/WCAG20 Licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License WCAG 2.0 Map V1.4 © 2012 Stamford Interactive WCAG 2.0 Map WCAG 2.0 4.1 Compatible 3.3 Input Assistance 3.2 Predictable 3.1 Readable Perceivable: Information and user interface components must be presentable to users in ways they can perceive. Operable: User interface components and navigation must be operable. Robust: Content must be robust enough that it can be interpreted reliably by a wide variety or user agents, including assistive technologies. Understandable: Information and the operation of user interface must be understandable. 1.4.1 Use of Colour 1.4.2 Audio Control 2.1.3 Keyboard (No exception) 2.1.1 Keyboard 2.1.2 No Keyboard Trap 2.2.1 Timing Adjustable 2.2.2 Pause, Stop, Hide 2.2.3 No Timing 2.2.4 Interruptions 2.2.5 Re-authenticating 2.3.1 Three Flashes or Below Threshold 2.3.2 Three Flashes 2.4.8 Location 2.4.9 Link Purpose (Link Only) 2.4.10 Section Headings 2.4.5 Multiple Ways 2.4.6 Headings and Labels 2.4.7 Focus Visible 2.4.1 Bypass Blocks 2.4.2 Page Titled 2.4.3 Focus Order 2.4.4 Link Purpose (In Context) 1.1.1 Non-text Content 1.2.1 Audio-only and Video Only (Pre-recorded) 1.2.2 Captions (Pre-recorded) 1.2.3 Audio Description 1.2.4 Captions (live) 1.2.5 Audio Description 1.2.6 Sign Language 1.2.7 Audio Description (Extended) 1.2.8 Full text alternative 1.2.9 Live Audio-only 1.3.1 Info and relationships 1.3.2 Meaningful Sequence 1.3.3 Sensory characteristics 1.4.3 Contrast (Minimum) 1.4.4 Resize Text 1.4.5 Images of Text 1.4.6 Contrast (Enhanced) 1.4.7 Low or No Background Audio 1.4.8 Visual Presentation 1.4.9 Images of text (No exception) 4.1.1 Parsing 4.1.2 Name, Role, Value A A A A A A A AA AA AAA AAA AAA AAA AA A A Principle WCAG 2.0 Map Key Guideline Success Criteria A 3.3.5 Help 3.3.6 Error Prevention (All) 3.3.3 Error Suggestion 3.3.4 Error Prevention (Legal, Financial Data) 3.1.3 Unusual Words 3.1.4 Abbreviations 3.1.5 Reading Level 3.1.6 Pronunciation 3.3.2 Labels or Instruction 3.2.3 Consistent Navigation 3.2.1 On Focus 3.2.2 On Input 3.2.5 Change on request 3.1.1 Language of Page 3.1.2 Language of Parts AAA AA A A A AAA AAA AA AA AAA AAA 1.2 Time Based Media 1.3 Adaptable 1.4 Distinguishable 1.1 Text Alternatives Understandable Robust 2.4 Navigable 2.3 Seizures 2.2 Enough time 2.1 Keyboard Accessible Perceivable Operable
  4. link context •  A link should still be meaningful out

    of context •  A text link should be unique to the page on which it appears (i.e. don’t use the same link text for different resources) •  Never use “Click here” or “More” for link text •  Do not use a long URL for link text (screen readers will read it all out and annoy the user).
  5. link context Not helpful: •  To read more about awesome

    polar bear disguises, click here. •  To find out the 47 ways I can save you verbosity, click here. •  There’s loads of info at http://typingthevoid.com/inclusive-design/ Better: •  I wrote a post about awesome polar bear disguises. •  I spent a very long time researching the 47 ways you can reduce your verbosity. •  Joe has a long list of Inclusive design resources on his website
  6. don’t f#@k with nature •  preserve browser’s ability to show

    focus •  let links look like links, not hide and seek •  Don’t break browser history •  Preserve the document order in the visual presentation •  format text using em not px
  7. honour HTML •  Use <button> or <input type=”button”> •  Ensure

    all form fields have meaningful labels and instructions before the field. •  Return focus to the first error message onError •  Ensure error messages are available to keyboard-navigating users •  don’t be captured by CAPTCHA !!
  8. ?

  9. There are alternatives! TextCAPTCHA The last letter in “unrolled” is?

    4 plus two is what? Which of 3, twenty-nine, 70, 46 or 65 is the lowest? I have two, you have 2. How many is that?
  10. •  Do not use the double-click handler (onDblClick) because keyboards

    cannot execute this behavior. •  If you use the onMouseOver and onMouseOut JavaScript handlers, also use onFocus and onBlur to accommodate keyboards. •  If you must use JavaScript, then give the link a tabindex value of -1 to insert it in the tab order. A tabindex of 0 makes even divs accessible to the keyboard Keyboard usable
  11. audio or video •  Full text version of all speech

    •  Captions, synchronised to the video •  Audio descriptions of events not spoken •  Text descriptions of sounds containing meaning
  12. test as a user •  use automated tests, but don’t

    rely on them •  navigate by keyboard •  run guerrilla test at a local meetup •  spend a day learning VoiceOver, or NVDA •  send your site out to online test services
  13. test test test test test test test test test test

    test test test test test test test test test test
  14. learn more •  WCAG 2.0: http://www.w3.org/TR/WCAG20/ •  Access-iQ: http://accessiq.org/ • 

    The Paciello Group Blog: http://blog.paciellogroup.com/ •  WordPress Codex Theme review: http://codex.wordpress.org/Theme_Review#Accessibility •  Make WordPress Accessible: http://make.wordpress.org/accessibility/useful-tools/ •  alt text decision tree: http://dev.w3.org/html5/alt-techniques/developer.html#tree •  My inclusive design resources list: http://typingthevoid.com/inclusive-design
  15. credits All images the author’s own, except for: 3, 6,

    16: Failblog.org: http://failblog.org 4, 5: Universal Design Style: http://www.universaldesignstyle.com 7: wikipedia: accessibility 8: Adactio on Flickr: http://www.flickr.com/photos/adactio/89778576 11 http://lawblogone.wordpress.com/tag/politiko/ 14: http://www.flickr.com/photos/inkytwist/4735121790/sizes/o/in/photostream/ 21: Web Standards Project: http://webstandards.org 35: YouTube HTML 5 project: http://youtube.com/html5