49
Joe Ortenzi @wheelyweb typingthevoid.com WordCamp Sydney July 20, 2012

Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

Joe  Ortenzi  @wheelyweb  typingthevoid.com  

WordCamp  Sydney  July  20,  2012  

Page 2: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

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

Page 3: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

NOW,  I’m  a...  

Page 4: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

4  

Page 5: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

5  

DUDE!  

THAT’S  UX!  

Page 6: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

6  

TELL  ME    ABOUT    

INCLUSIVE  

Page 7: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

7  

Page 8: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

8  

Page 9: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

9  

Page 10: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

¡  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!  

Page 11: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

11  

Page 12: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

12  

Page 13: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney
Page 14: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney
Page 15: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney
Page 16: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney
Page 17: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

...as  these  guys  found  out!  

Page 18: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

“!e UN Convention on Rights of Persons with Disabilities (2008) declares that Disability is a human rights issue and not a matter of discretion. !e UN Convention affirms that all persons with all types of disabilities must enjoy all human rights and fundamental freedoms. !e outcomes of the project are designed to uphold and promote the human rights of disabled people as enshrined in national and international law.”

18  

Page 19: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

¡  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  

Page 20: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

OK,    

Page 21: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

¡ Web  Content  Accessibility  Guidelines  §  version  2.0!  

¡  Perceivable    

¡  Operable  

¡  Understandable  

¡  Robust  

Page 22: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

22  

Page 23: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

23  

Visual map of Web Content Accessibility Guidelines 2.0Designed 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 LicenseWCAG 2.0 Map V1.4 © 2012 Stamford Interactive

WCAG 2.0 Map

WCAG 2.0

4.1 Compatible

3.3Input Assistance

3.2Predictable

3.1Readable

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 robustenough that it can be interpretedreliably by a wide variety or useragents, including assistivetechnologies.

Understandable: Information andthe operation of user interfacemust be understandable.

1.4.1 Use of Colour1.4.2 Audio Control

2.1.3 Keyboard (No exception)

2.1.1 Keyboard2.1.2 No Keyboard Trap

2.2.1 Timing Adjustable2.2.2 Pause, Stop, Hide

2.2.3 No Timing2.2.4 Interruptions2.2.5 Re-authenticating

2.3.1 Three Flashes or Below Threshold

2.3.2 Three Flashes

2.4.8 Location2.4.9 Link Purpose (Link Only)2.4.10 Section Headings

2.4.5 Multiple Ways2.4.6 Headings and Labels2.4.7 Focus Visible

2.4.1 Bypass Blocks2.4.2 Page Titled2.4.3 Focus Order2.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 Language1.2.7 Audio Description (Extended)1.2.8 Full text alternative1.2.9 Live Audio-only

1.3.1 Info and relationships1.3.2 Meaningful Sequence1.3.3 Sensory characteristics

1.4.3 Contrast (Minimum)1.4.4 Resize Text1.4.5 Images of Text

1.4.6 Contrast (Enhanced)1.4.7 Low or No Background Audio1.4.8 Visual Presentation1.4.9 Images of text (No exception)

4.1.1 Parsing4.1.2 Name, Role, Value

A A

A

A

A

A

A

AA

AA

AAA

AAA

AAA

AAA

AAA

A

Principle

WCAG 2.0 Map Key

Guideline

Success CriteriaA3.3.5 Help3.3.6 Error Prevention (All)

3.3.3 Error Suggestion3.3.4 Error Prevention(Legal, Financial Data)

3.1.3 Unusual Words3.1.4 Abbreviations3.1.5 Reading Level3.1.6 Pronunciation

3.3.2 Labels or Instruction

3.2.3 Consistent Navigation

3.2.1 On Focus3.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.4Navigable

2.3Seizures

2.2Enough time

2.1KeyboardAccessible

Perceivable

Operable

Page 24: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

OK,    

Page 25: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

¡ 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  

Page 26: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

26  

logo search

Title  

Heading  2  

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.  

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.  

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.    

skip  to  content  

content  starts  here  

Page 27: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

¡  <img  src=”/path/to/image.jpg”  alt=””  />   international  cyclist,  

Cadel  Evans,  dressed  in  cycle  gear,  riding  his  bike  against  a  leafy  background  

Page 28: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

28  

Page 29: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

¡  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>

Page 30: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

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

Page 31: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

31  

alt=“”  never  absent,  sometimes  empty  

Page 32: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

¡  text  is  best  conveyed  as  text,  not  image  §  ..unless  it  is  your  logo  

¡  otherwise,  use  font  substitution  §  cufon  

§ @font-­‐face  

§  Adobe  TtpeKit  

§  SiFR  

Page 33: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

33  

Page 34: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

¡  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  

Page 35: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

35  

Page 36: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

¡  Don’t  rely  on  colour  alone  to  convey  meaning  

Page 37: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

¡  Full  text  version  of  all  dialogue  ¡  Captions  timed  with  the  video  ¡  Audio  descriptions  of  events  not  spoken  

37  

Page 38: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

¡  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  

Page 39: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

39  

Page 40: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

¡  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  !!  

Page 41: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

¡  Completely  Automated  Public  Turing  test  to  tell  Computers  and  Humans  Apart  §  a.k.a.  bol1$@ks!  

41  

Page 42: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

¡  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?  

42  

c/o:  textcaptcha.com/demo  

Page 43: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

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

Page 44: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

44  

Page 45: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

45  

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

Page 46: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

46  

test!  ...then  test  again...  

Page 47: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

¡ 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)  

Page 48: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

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.htm  UN  Convention  on  the  Rights  of  Persons  with  a  Disability:  http://www.un.org/disabilities/default.asp?id=259  Web  Accessibility  National  Transition  Strategy:  http://www.finance.gov.au/publications/wcag-­‐2-­‐implementation/index.html  Webaim.com:  http://webaim.org/resources/designers/  Just  Ask:  Integrating  Accessibility  Throughout  Design  http://uiaccess.com/accessucd/  Dive  into  accessibility:  http://diveintoaccessibility.info/  AChecker:  http://achecker.ca/  Color  contrast  check:    http://www.snook.ca/technical/colour_contrast/colour.html  Colour  Contrast  Analyser  from  Paciello  Group:  http://www.paciellogroup.com/resources/contrast-­‐analyser.html  Chrometric    browser  –  simulates  several  vision  impairments:  http://enably.com/chrometric/            

Page 49: Inclusive Design Principles for WordPress - Joe Ortenzi - WordCamp Sydney

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.    

49  

Joe  Ortenzi  @wheelyweb  typingthevoid.com/inclusive-­‐design  

WordCamp  Sydney  July  20,  2012