Your SlideShare is downloading. ×
Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney


Published on

Joe Ortenzi @wheelyweb takes us through basic inclusive design principles to make our WordPress sites a better experience for those with disabilities but which will also make the web a better …

Joe Ortenzi @wheelyweb takes us through basic inclusive design principles to make our WordPress sites a better experience for those with disabilities but which will also make the web a better experience for all. #wcsyd

Published in: Technology, Design

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Joe  Ortenzi  @wheelyweb   WordCamp  Sydney  July  20,  2012  
  • 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. NOW,  I’m  a...  
  • 4. 4  
  • 5. DUDE!  THAT’S  UX!   5  
  • 6. TELL  ME     ABOUT    INCLUSIVE 6  
  • 7. 7  
  • 8. 8  
  • 9. 9  
  • 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  
  • 12. 12  
  • 13.  these  guys  found  out!  
  • 14. “The UN Convention on Rights of Persons withDisabilities (2008) declares that Disability is ahuman rights issue and not a matter of discretion.The UN Convention affirms that all persons withall types of disabilities must enjoy all human rightsand fundamental freedoms. The outcomes of theproject are designed to uphold and promote thehuman rights of disabled people as enshrined innational and international law.” 18  
  • 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. OK,    
  • 17. ¡  Web  Content  Accessibility  Guidelines   §  version  2.0!  ¡  Perceivable    ¡  Operable  ¡  Understandable  ¡  Robust  
  • 18. 22  
  • 19. WCAG 2.0 Map 1.3.1 Info and relationships 1.3.2 Meaningful Sequence 1.3.3 Sensory characteristics 2.1.3 Keyboard A 1.4.1 Use of Colour 2.1.1 Keyboard (No exception) AAA 1.4.2 Audio Control A 2.1.2 No Keyboard Trap A 1.2.1 Audio-only and Video Only 2.2.1 Timing Adjustable (Pre-recorded) 2.2.2 Pause, Stop, Hide 1.3 1.4.3 Contrast (Minimum) A 1.2.2 Captions (Pre-recorded) Adaptable 1.4.4 Resize Text 1.2.3 Audio Description A 1.4.5 Images of Text 2.1 AA Keyboard 2.2.3 No Timing Accessible 2.2.4 Interruptions 1.2.4 Captions (live) 2.2 1.2 1.4 2.2.5 Re-authenticating 1.4.6 Contrast (Enhanced) Enough time 1.2.5 Audio Description AA Time Based Distinguishable 1.4.7 Low or No Background Audio AAA Media 1.4.8 Visual Presentation 1.4.9 Images of text (No exception) 1.2.6 Sign Language Perceivable AAA 2.3.1 Three Flashes or 1.2.7 Audio Description (Extended) Below Threshold 1.2.8 Full text alternative Operable A Operable: User interface 2.3 1.2.9 Live Audio-only AAA components and navigation Seizures must be operable. 2.3.2 Three Flashes 1.1 AAA Text Alternatives Perceivable: Information and user interface components 2.4.8 Location 2.4 must be presentable to users 2.4.9 Link Purpose (Link Only) Navigable 1.1.1 Non-text Content in ways they can perceive. 2.4.10 Section Headings A AAA 2.4.5 Multiple Ways 3.1.1 Language of Page WCAG 2.0 2.4.1 Bypass Blocks 2.4.2 Page Titled 2.4.6 Headings and Labels 2.4.7 Focus Visible A 2.4.3 Focus Order AA 2.4.4 Link Purpose (In Context) A 3.1.2 Language of Parts AA Understandable: Information and 3.1 the operation of user interface Readable must be understandable. Robust: Content must be robust 3.1.3 Unusual Words enough that it can be interpreted 3.1.4 Abbreviations reliably by a wide variety or user 3.1.5 Reading Level agents, including assistive 3.1.6 Pronunciation AAA technologies. Understandable 3.3.2 Labels or Instruction A Robust 3.2.1 On Focus WCAG 2.0 Map Key 3.2.2 On Input 3.2 4.1 A Predictable Compatible 3.3 Principle 3.3.3 Error Suggestion Input Assistance 3.3.4 Error Prevention 3.2.3 Consistent Navigation (Legal, Financial Data) AA AA Guideline 4.1.1 Parsing 4.1.2 Name, Role, Value 3.2.5 Change on request 3.3.5 Help A A Success Criteria 3.3.6 Error Prevention (All) AAA AAAVisual map of Web Content Accessibility Guidelines 2.0Designed by Stamford Interactive Licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported LicenseBased on World Wide Web Consortium documentation available at WCAG 2.0 Map V1.4 © 2012 Stamford Interactive 23  
  • 20. OK,    
  • 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. 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. ¡  <img  src=”/path/to/image.jpg”   alt=””  />   international  cyclist,   Cadel  Evans,  dressed   in  cycle  gear,  riding   his  bike  against  a   leafy  background  
  • 24. 28  
  • 25. ¡  Go,  search,  comment,  next,  previous,  buy,   etc.  -­‐  avoid  using  images  for  these.  ¡  <input type="submit" name="publish" id="publish" value="publish" /> ¡  <button type="button">Buy Me!</button>
  • 26. ¡  Logo    ¡  spacer  images   §  shame  on  you!  ¡  does  not  convey  additional  meaning  ie:  “satisfaction  guaranteed    or  your  money  back”   §  double  shame  on  you!   §  may  the  ghost  of  clippy  have  mercy  on  you....  
  • 27. alt=“”  never  absent,  sometimes  empty   31  
  • 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. 33  
  • 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. 35  
  • 32. ¡  Don’t  rely  on  colour  alone  to  convey  meaning  
  • 33. ¡  Full  text  version  of  all  dialogue  ¡  Captions  timed  with  the  video  ¡  Audio  descriptions  of  events  not  spoken   37  
  • 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  word  People  with  low  vision  or  hearing  deserve  easy  access  to  you  content  
  • 35. 39  
  • 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. ¡  Completely  Automated  Public  Turing  test  to   tell  Computers  and  Humans  Apart   §  a.k.a.  bol1$@ks!   41  
  • 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:   42  
  • 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. 44  
  • 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. test!  ...then  test  again...   46  
  • 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. WCAG  2.0:  NVDA  (Non  Visual  Desk  Access):  http://www.nvda-­‐  Guide  to  the  Disability  Discrimination  Act:  UN  Convention  on  the  Rights  of  Persons  with  a  Disability:  Web  Accessibility  National  Transition  Strategy:­‐2-­‐implementation/index.html  Just  Ask:  Integrating  Accessibility  Throughout  Design  Dive  into  accessibility:  AChecker:  Color  contrast  check:  Colour  Contrast  Analyser  from  Paciello  Group:­‐analyser.html  Chrometric    browser  –  simulates  several  vision  impairments:      
  • 45. I’m  building  a  list  of  accessible,  inclusive  themes  and  plugins  for  WordPress,  as  well  as  tools,  almost  all  free,  to  help  assess  accessibility.  See  me  afterwards  if  you’d  like  to  be  updated  once  that  list  is  ready.    Joe  Ortenzi  @wheelyweb­‐design   WordCamp  Sydney  July  20,  2012   49