$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by WP Australia

Other Decks in Technology

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