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.

Inclusive design principles for WordPress

3,596 views

Published on

Incorporating inclusive design principles into a WordPress site is not as difficult as it sounds not does it require much technical wizardry.

A good first step would be to understand what Inclusive Design means, ad a few easy actions into your everyday activities, and expand on that solid grounding by continuing your education with some of the resources and links supplied.

if you're interested, there is also a video of the presentation on WordPress.TV: http://wordpress.tv/2013/03/07/inclusive-design-principles-for-wordpress/ .

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

  • Be the first to like this

Inclusive design principles for WordPress

  1. 1. Joe Ortenzi@wheelywebtypingthevoid.com WordCamp Sydney July 21, 2012
  2. 2.  First website was in 1996  which was c#%p Learned PHP /MySQL & built bespoke CMSs  which was hard! So I started hacking WordPress Developer, Interactive Developer, Tech Director, Technologist, PM, Producer Auditor, Interaction Designer... and now ...
  3. 3. NOW, I’m a...
  4. 4. 4
  5. 5. DUDE!THAT’S UX! 5
  6. 6. TELL ME ABOUTINCLUSIVE 6
  7. 7. 7
  8. 8. 8
  9. 9. 9
  10. 10.  For them  Includes people with a disability in your plans  Includes seniors in your audience  Accepts temporary conditions among your visitors– sprains, lighting, crowds, noise For you  Improves SEO and usability  Happier users, easier to comment and share  More visitors!
  11. 11. 11
  12. 12. 12
  13. 13. ...as these guys found out!
  14. 14. 18
  15. 15.  1 in 5 Australians have a disability (ABS) Vision  Colour blindness, low vision, acute blindness Hearing  Clarity, frequency, volume Physical  Limited fine control, slow reaction time, grip/hold Literacy, Cognition  Reading or unfamiliar language  Distractibility, memorability, dyslexia
  16. 16. OK,
  17. 17.  Web Content Accessibility Guidelines  version 2.0! Perceivable Operable Understandable Robust
  18. 18. 22
  19. 19. 23
  20. 20. OK,
  21. 21.  What does it look like with CSS styles off? Is the reading order logical? <body>  <h1>  <p><strong></strong><em></em></p> ▪ <h2> ▪ <h3> Include a “Skip to Content” link above all content
  22. 22. logo skip to content searchcontent starts here Title Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada a non . Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heading 2 Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Heading 3 Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 26
  23. 23.  <img src=”/path/to/image.jpg” alt=”” /> international cyclist, Cadel Evans, dressed in cycle gear, riding his bike against a leafy background
  24. 24. 28
  25. 25.  Go, search, comment, next, previous, buy, et c. - avoid using images for these. <input type="submit" name="publish" id="publish" value="publish" /> <button type="button">Buy Me!</button>
  26. 26.  Logo spacer images  shame on you! does not convey additional meaning ie:“satisfaction guaranteedor your money back”  double shame on you!  may the ghost of clippy have mercy on you....
  27. 27. alt=“”never absent, sometimes empty 31
  28. 28.  text is best conveyed as text, not image  ..unless it is your logo otherwise, use font substitution  cufon  @font-face  Adobe TtpeKit  SiFR
  29. 29. 33
  30. 30.  Avoid ALL CAPS watch font size choose font sizes that can scale  use em, en, %, not pt or px Scale your containers with their content
  31. 31. 35
  32. 32.  Don’t rely on colour alone to convey meaning
  33. 33.  Full text version of all dialogue Captions timed with the video Audio descriptions of events not spoken 37
  34. 34.  Accurate text equivalents of the audio or video, linked to next to the vid/audio Captions (text of the audio superimposed on the video) Audio descriptions of actions not conveyed in dialogue or wordPeople with low vision or hearing deserve easyaccess to you content
  35. 35. 39
  36. 36.  Use the <button> or <input type=”button”> Ensure all form fields have meaningful labels before the field. Return focus to the first message on error Ensure error messages are available to keyboard-navigating users don’t be captured by CAPTCHA !!
  37. 37.  Completely Automated Public Turing test to tell Computers and Humans Apart  a.k.a. bol1$@ks! 41
  38. 38.  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? c/o: textcaptcha.com/demo 42
  39. 39.  Confusing:  To read more about awesome polar bear disguises, click here.  To find out the 47 ways I can save you verbosity, click here. 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.
  40. 40. 44
  41. 41.  check your HTML is well formed make sure your page is well structured always correctly use an alt tag for each image avoid text displayed as images watch your font: size, case, format, weight. check your colours don’t impede readability Ensure your forms are usable by keyboard Make sure your link text is meaningful ...and... 45
  42. 42. test!...then test again... 46
  43. 43.  Web Accessibility Checker for IE Web Developer Tool (FF, GC) Firebug (FF, GC) Fangs (FF) Zoom Text (FF, S) WAVE Juicy Colour Checker (FF) Headings map (FF) Inspect Element (FF, GC, S)
  44. 44. WCAG 2.0: http://www.w3.org/TR/WCAG20/NVDA (Non Visual Desk Access): http://www.nvda-project.org/Guide to the Disability Discrimination Act: http://www.hreoc.gov.au/disability_rights/dda_guide/dda_guide.htmUN Convention on the Rights of Persons with a Disability: http://www.un.org/disabilities/default.asp?id=259Web Accessibility National Transition Strategy: http://www.finance.gov.au/publications/wcag-2-implementation/index.htmlWebaim.com: http://webaim.org/resources/designers/Just Ask: Integrating Accessibility Throughout Designhttp://uiaccess.com/accessucd/Dive into accessibility: http://diveintoaccessibility.info/AChecker: http://achecker.ca/Color contrast check:http://www.snook.ca/technical/colour_contrast/colour.htmlColour Contrast Analyser from Paciello Group: http://www.paciellogroup.com/resources/contrast-analyser.htmlChrometric browser – simulates several vision impairments: http://enably.com/chrometric/The full set of links are at: typingthevoid.com/inclusive-design
  45. 45. All images are mine, except for the following:3 -T-shirt design courtesy of Stamford Interactive: http://stamfordinteractive.com.au5, 6 -copyright Polygram Entertainment: http://www.imdb.com/company/co0030612/7, 9 -Failblog.org: http://failblog.org8 -RollRamp.co.uk: http://rollramp.co.uk13 -Adactio on Flickr: http://www.flickr.com/photos/adactio/8977857623 –wcag2.0 map from Stamford Interactive:http://www.stamfordinteractive.com.au/resources/wcag-2-0-map/27, 33 -The Guardian: http://guardian.co.uk37 -BSI/British Standards : http://www.youtube.com/watch?v=-1xgTs28vXw39 -example of Gravity Forms: http://www.gravityforms.com/41 -Google reCAPTCHA: http://www.google.com/recaptcha/captcha44 -accessIQ: http://www.accessiq.org/ 49
  46. 46. I’m building a list of accessible, inclusive themes and plugins forWordPress, as well as tools, almost all free, to help assess accessibility. Seeme afterwards if you’d like to be updated once that list is ready.Joe Ortenzi@wheelywebtypingthevoid.com/inclusive-design WordCamp Sydney July 21, 201250

×