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.

Transcript

1. Inclusive Design

   View Slide

2. WTF is

   View Slide

3. what

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. what is
   inclusive?
   
   

   View Slide

8. View Slide

9. View Slide

10. View Slide

11. accessibility
    a11y
    accessibility
    #a11y
    

    View Slide

12. why is a11y

    View Slide

13. “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.”
    

    View Slide

14. bad for business
    
    

    View Slide

15. WCAG 2.0
    
    

    View Slide

16. Perceivable
    
    Operable
    
    Understandable
    
    Robust
    
    4 Guidelines
    
    4 Guidelines
    
    3 Guidelines
    
    1 Guideline
    
    22 Criteria
    
    20 Criteria
    
    17 Criteria
    
    2 Criteria
    
    

    View Slide

17. Level AAA – 23 criteria
    
    Level AA – 13 criteria
    
    Level A - 25 criteria
    
    

    View Slide

18. 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
    

    View Slide

19. View Slide

20. how inclusive is
    WordPress?
    
    

    View Slide

21. View Slide

22. quick wins
    
    

    View Slide

23. alt=“”
    
    
    

    View Slide

24. alt text to all images
    
    

    View Slide

25. use headings and
    semantic markup
    
    

    View Slide

26. View Slide

27. or ?

    View Slide

28. skip to content
    
    

    View Slide

29. 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).
    
    

    View Slide

30. 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
    
    

    View Slide

31. don’t f#@k with nature
    
    

    View Slide

32. 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
    
    

    View Slide

33. harder stuff
    
    

    View Slide

34. Forms
    
    

    View Slide

35. inform and assist
    
    

    View Slide

36. honour HTML
    
    •  Use or
    •  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 !!
    
    

    View Slide

37. Completely Automated
    Public Turing test to tell
    Computers and Humans
    Apart
    
    

    View Slide

38. ?
    

    View Slide

39. 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?
    
    
    
    

    View Slide

40. not everyone
    uses a mouse
    
    

    View Slide

41. •  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
    
    

    View Slide

42. View Slide

43. 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
    
    

    View Slide

44. 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
    
    

    View Slide

45. test
    
    test
    test
    
    test
    
    test
    
    test
    
    test
    
    test
    
    test
    
    test
    
    test
    
    test
    
    test
    
    test
    
    test
    
    test
    
    test
    
    test
    
    test
    
    test
    
    

    View Slide

46. 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
    
    

    View Slide

47. 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
    
    

    View Slide

48. ?
    Joe Ortenzi
    
    @wheelyweb
    
    typingthevoid.com
    
    

    View Slide