Digital  Accessibility  

The  forgo)en  component  every  developer  should  know  

3/14/2015   @joedevon  -­‐  Midwest  PHP   1  

Accessibility  StaIsIcs  

•  How  many  people  are  disabled?    57M  in  US      1B  Worldwide  

•  What’s  the  breakdown?    Hearing  impaired:  360M    Vision  impaired:  285M    CogniIve:  194M    Physical  impairment:  13M    Other  (Depression,  Alcohol,  DemenIa):  148M  

 3/14/2015   @joedevon  -­‐  Midwest  PHP   2  

Accessibility  StaIsIcs  conInued  

•  Baby  Boomers  geYng  older  •  Myth  of  Minority.  54%  have  some  form  of  disability  (PEW  internet  project)  

•  $200  Billion  in  disposable  income  •  Gartner  says  it’s  in  the  Trillions  •  9  out  of  10  websites  are  inaccessible    

3/14/2015   @joedevon  -­‐  Midwest  PHP   3  

The  Story  of  

From  web  developer  to  co-­‐founder  of  a  global  movement  

3/14/2015   @joedevon  -­‐  Midwest  PHP   4  

One  day,  I  stumbled  upon  a  video  by    Yahoo!  programmer  Victor  Tsaran  

3/14/2015   @joedevon  -­‐  Midwest  PHP   5  

Play  Videos    

•  Victor  Tsaran  Video:  h)ps://www.youtube.com/watch?v=izrC4R7SsH4  

•  ChrisIne  Ha  Video:  h)ps://www.youtube.com/watch?v=_OO9w_oK6dQ  

•  Fullspeed  screen  reader:  h)ps://soundcloud.com/freecodecamp    

3/14/2015   @joedevon  -­‐  Midwest  PHP   6  

Road  to  accessibility  

•  Victor’s  video  percolated  in  the  back  of  my  mind  

•  Freelance  Dev  in  NY  •  Big  tech  scene.  Lots  of  

meetups    

3/14/2015   @joedevon  -­‐  Midwest  PHP   7  

Moved  to  Los  Angeles  

Got  a  gig  @  AmericanIdol.com.  Unfortunately,  no  tech  scene  in  L.A.!  

3/14/2015   @joedevon  -­‐  Midwest  PHP   8  

Dad  @  JPL  Speaker  of  10  languages.  Survivor  of  Auschwitz  &  Dachau.  He  lost  much  of  his  hearing  &  eyesight.  

3/14/2015   @joedevon  -­‐  Midwest  PHP   9  

BLOG  POST  THAT  INSPIRED  GAAD  

3/14/2015   @joedevon  -­‐  Midwest  PHP   10  

3/14/2015   @joedevon  -­‐  Midwest  PHP  11  

Guess  who  winds  up  speaking  at  1st  GAAD  event  in  Los  Angeles?  

Victor  Tsaran  

Success  of  GAAD,  Year  One  

•  GAAD  made  my  hometown  paper  •  Gov’ts  &  Corps  ran  events,  blogged  &  tweeted  •  Appeared  in  podcasts,  magazines    Alas,  next  year  wouldn’t  be  so  easy  

3/14/2015   @joedevon  -­‐  Midwest  PHP   12  

My  Dad  passed  away  February  16,  2013.    

3/14/2015   @joedevon  -­‐  Midwest  PHP   13  

GAAD  Year  2  

•  Mindy  designed  a  new  logo…  which  made  the  front  cover  of  .Net  Magazine  

•  FCC  blogs  &  tweets  #GAAD  for  24  hours  •  #GAAD  had  a  tweet  a  minute!  •  More  engagement  than  we  could  have  ever  imagined  

•  I  guess  we  hit  on  something    

3/14/2015   @joedevon  -­‐  Midwest  PHP   14  

GAAD  Year  2  

 

3/14/2015   @joedevon  -­‐  Midwest  PHP   15  

GAAD  Year  3  

•  The  Paciello  Group  created  #ID24  •  #GAAD  approached  two  tweets  a  minute    •  Gaming  companies  spoke  about  a11y  games  •  ArIcles  in  PHP  Architect,  Sitepoint,  A  List  Apart  &  more  

 

3/14/2015   @joedevon  -­‐  Midwest  PHP   16  

GAAD  Year  3  

3/14/2015   @joedevon  -­‐  Midwest  PHP   17  

GAAD  comes  full  circle  

Remember  the  bank  whose  unusable  interface  inspired  my  post?    

Twist  of  Fate  3/14/2015   @joedevon  -­‐  Midwest  PHP   18  

HOW  TO  MAKE  AN  IMPACT  

3/14/2015   @joedevon  -­‐  Midwest  PHP   19  

Why  should  I  care  about  a11y?  

3/14/2015   @joedevon  -­‐  Midwest  PHP   20  

Which  major  tech  company  is  known  for  being  the  most  accessible?    

A.    

B.    

C.    

D.    

3/14/2015   @joedevon  -­‐  Midwest  PHP   21  

And  the  winner  is…..  

3/14/2015   @joedevon  -­‐  Midwest  PHP   22  

Play  more  videos  

•  iPads  ease  of  use:  h)ps://www.youtube.com/watch?v=la6vK6hI7rM    

3/14/2015   @joedevon  -­‐  Midwest  PHP   23  

Accessibility  &  “The  Law”  

•  SecIon  508  requires  that  all  Federal  website  content  be  accessible  to  people  with  disabiliIes.  

•  ADA  or  Americans  with  DisabiliIes  Act  signed  into  Law  in  1990  

•  More  regulaIons  are  coming…  •  Don’t  do  a11y  for  the  Law…do  it  because  it’s  right…and  it’s  good  for  you  &  your  users  

3/14/2015   @joedevon  -­‐  Midwest  PHP   24  

Companies  that  have  sued  or  se)led  

•  H&R  Block:  JusIce  Department  got  involved,  sending  a  strong  message  to  businesses  

•  Se)lements  with  companies  such  as  Bank  of  America,  State  of  Texas,  American  Cancer  Society,  Northwestern  University,  Target,  Neulix  and  more  

•  Others  were  more  proacIve,  e.g.  eBay,  Monster.com,  Travelocity  &  Ticketmaster  

3/14/2015   @joedevon  -­‐  Midwest  PHP   25  

DisabiliIes  &  Web  Browsing  Part  I  

VISUAL  IMPAIRMENT:  •  Blind  people  don’t  even  have  a  screen  to  look  at  

•  Blind  people  can’t  use  a  mouse  •  Color  contrast  is  important  for  low  vision  and  people  w/  color  blindness  

•  Screen  Magnifiers  •  Screen  Readers  read  out  web  pages  3/14/2015   @joedevon  -­‐  Midwest  PHP   26  

Play  wordpress  Video  

•  Trying  to  get  permission  to  publish.  Will  update  this  deck  if  I  get  a  “yes”.  

3/14/2015   @joedevon  -­‐  Midwest  PHP   27  

Accessibility  in  Wordpress  

•  65%  of  the  top  1M  sites  running  Wordpress  •  4  of  1,747  themes  in  Wordpress  accessible  •  UnIl  @accessiblejoe  started  the  CiIes  project  •  Inaccessible  admin?  Don’t  disabled  people  have  valuable  content  to  share?  

•  WP-­‐Accessibility  plugin  h)ps://wordpress.org/plugins/wp-­‐accessibility/  

3/14/2015   @joedevon  -­‐  Midwest  PHP   28  

Mobile  Accessibility  

•  The  iPhone  changed  the  game  •  Apple’s  focus  on  accessibility  really  opened  the  world  to  a  lot  of  people  

•  Siri,  a  SemanIc  Web  company,  took  things  to  another  level.  Speak  to  your  phone!  

•  Other  smartphones  have  been  following  suit  •  Apps  suffer  from  a11y  issues  too  though  

3/14/2015   @joedevon  -­‐  Midwest  PHP   29  

Play  Tommy  Videos  

•  Tommy  Edison  uses  Facebook:  h)ps://www.youtube.com/watch?v=MtE2NfFZK2g  

•  Tommy  Edison  uses  Instagram:  h)ps://www.youtube.com/watch?v=P1e7ZCKQfMA  ,  h)ps://www.youtube.com/watch?v=0i1k3srHKAA    

3/14/2015   @joedevon  -­‐  Midwest  PHP   30  

DisabiliIes  &  Web  Browsing  Part  II  

DEAF  USERS:  •  Audio  w/  no  wri)en  component  locks  deaf  users  out  

•  Videos  can  become  useless  •  Unless  you  capIon  your  videos!  •  Don’t  rely  on  Audio  Captchas!  

3/14/2015   @joedevon  -­‐  Midwest  PHP   31  

Another  Tommy  Video  

•  Tommy  interviews  Yahoo  Accessibility:  h)ps://www.youtube.com/watch?v=1C9Cbu2bPBA    

3/14/2015   @joedevon  -­‐  Midwest  PHP   32  

DisabiliIes  &  Web  Browsing  Part  III  

COGNITIVE  ISSUES,  MOTOR  IMPAIRMENT:  •  Organizing  your  content  in  a  well  laid  out  manner  can  be  helpful  to  those  with  cogniIve  impairment  

•  There  are  other  disabiliIes  like  Quadriplegics  who  use  other  assisIve  technology  like  Puff  &  Sip  controllers.    

•  Motor  DisabiliIes  

3/14/2015   @joedevon  -­‐  Midwest  PHP   33  

Play  Sip  and  Puff  Videos  

•  Jared:  h)ps://www.youtube.com/watch?v=Bhj5vs9P5cw  

•  Big  Launcher  and  Tecla  Shield:  h)ps://www.youtube.com/watch?v=SJDICSMy7z0    

3/14/2015   @joedevon  -­‐  Midwest  PHP   34  

A  word  about  WAI-­‐ARIA  

•  ARIA  is  a  W3C  spec  for  Accessible  Rich  Internet  ApplicaIons  

•  Framework  of  a)ributes  to  help  w/  user  interacIon,  define  current  state,  

•  Make  custom  widgets  available  to  AT  (AssisIve  Technology)  

•  Makes  problemaIc  controls  accessible  •  Meant  to  provide  AT  w/  addiIonal  informaIon  

3/14/2015   @joedevon  -­‐  Midwest  PHP   35  

Takeaways  

•  Standards  are  good  •  Learn  about  WCAG,  a  W3C  IniIaIve  •  Making  things  semanIc  under  the  hood  lets  computers  “understand”  the  content  

•  Good  for  Screen  Readers  &  Search  Engines  •  Perform  user  tesIng  for  accessibility  

3/14/2015   @joedevon  -­‐  Midwest  PHP   36  

Play  a  Cat  Video  

•  Obligatory  Cat  Video:  h)ps://www.youtube.com/watch?v=PU7hPOY8n_Y    

3/14/2015   @joedevon  -­‐  Midwest  PHP   37  

Links  

•  h)p://globalaccessibilityawarenessday.org  •  h)p://www.secIon508.gov/  •  h)p://www.ada.gov/  •  h)p://www.w3.org/WAI/intro/wcag  •  h)p://webaim.org/standards/wcag/checklist  •  h)p://w3c.github.io/aria-­‐in-­‐html/        3/14/2015   @joedevon  -­‐  Midwest  PHP   39  

THANK  YOU!  

       Twi)er:  @joedevon,  @gbla11yday  Email:  joe.devon@dws.la  3/14/2015   @joedevon  -­‐  Midwest  PHP   40