People  First  Accessibility  Considera4ons  

for  Theme  Developers    

WordCamp  DFW    October  4,  2014  

Trisha  Salas    WordPress  Developer  

trishasalas  trishacodes  

trishasalas  

Which  Path  Do  you  Choose?  

Jus4n  used  to  be  extremely  ac4ve  kid  

He  used  to  ride  his  bike  all  over  town,  only  stopping  long  enough  to  do  cool  tricks.  

His  vision  loss  occurred  over  a  period  of  6  weeks.    He  lost  most  of  his  central  vision  and  put  his  bike  away.  

Op4c  Neuropathy    of  Unknown  Origin.  Age  15    

A  few  years  later  he  picked  up  his  bike  again  and  he  now  rides  some  with  a  ‘seeing  eye  friend.’    He  spends  a  lot  of  4me  on  the  internet  learning  about  BMX,  photography,  backpacking  and  all  the  adventurous  things  he’s  doing  and  would  love  to  do  more  of.  

Web  Accessibility  makes  a  real  difference  in  the  lives  of  people    

with  disabili4es.  

What  is  Accessibility?  Accessibility  is  all  about  our  ability  to  engage  with,  use,  par4cipate  in,  and  belong  to,  the  world  around  us.  

The  power  of  the  Web  is  in  its  universality.  Access  by  everyone  regardless  of  disability  is  

an  essen:al  aspect.    

Tim  Berners-­‐Lee,  W3C  Director  and  inventor  of  the  World  Wide  Web  

Why  Accessibility  is  Important  •  246,000,000  visually  impaired  •  39,000,000  legally  blind  •  275,000,000  deaf  &  hard  of  hearing    That’s  560  million  total!!    To  put  this  in  perspec4ve,  the  en4re  popula4on  of  the  United  States  is  315,000,000.  

What’s  with  all  the  acronyms?  

WCAG  2.0  A11y  

Sec4on  508  WAI-­‐ARIA  

WCAG  2.0  Web  Content  Accessibility  Guidelines  (WCAG)  is  developed  through  the  W3C  process  in  coopera4on  with  individuals  and  organiza4ons  around  the  world,  with  a  goal  of  proving  a  single  shared  standard  for  web  content  accessibility  that  meets  the  needs  of  individuals,  organiza4ons,  and  governments  interna4onally.    For  a  short  summary  of  the  WCAG  2.0  guidelines,  see  WCAG  2.0  at  a  Glance.  

Sec4on  508  In  1998,  Congress  amended  the  Rehabilita4on  Act  of  1973  to  require  Federal  agencies  to  make  their  electronic  and  informa4on  technology  (EIT)  accessible  to  people  with  disabili4es.      Sec4on  508  was  enacted  to  eliminate  barriers  in  informa4on  technology,  open  new  opportuni4es  for  people  with  disabili4es,  and  encourage  development  of  technologies  that  will  help  achieve  these  goals.    www.sec4on508.gov/Sec4on-­‐508-­‐Of-­‐The-­‐Rehabilita4on-­‐Act  

A11y  Accessibility  is  ogen  abbreviated  as  the  numeronym  a11y,  where  the  number  11  refers  to  the  number  of  lehers  omihed.  This  parallels  the  abbrevia4ons  of  interna4onaliza4on  and  localiza4on  as  i18n  and  l10n  respec4vely.    hhps://en.wikipedia.org/wiki/Computer_accessibility  

WAI-­‐ARIA  The  Web  Accessibility  Ini:a:ve  -­‐  Accessible  Rich  Internet  Applica:ons  Suite,  defines  a  way  to  make  Web  content  and  Web  applica4ons  more  accessible  to  people  with  disabili4es.  It  especially  helps  with  dynamic  content  and  advanced  user  interface  controls  developed  with  Ajax,  HTML,  JavaScript,  and  related  technologies.    hhp://www.w3.org/WAI/intro/aria.php  

Who  Does  Accessibility  Benefit?  

•  Blind  •  Low-­‐vision  •  Deaf  &  hard  of  hearing  

•  Color  blind    

•  Cogni4ve  impairments  •  Mobility  impairments  •  Mobile  devices  •  Brightly  lit  rooms    •  Older  Users  

Accessibility  Benefits  Everyone!  Not  everyone  who  is  disabled  has  been  disabled  forever  or  will  remain  disabled.      A  website  that  is  accessible  for  the  disabled  ogen  gains  the  benefit  of  becoming  easier  to  use  for  everyone  Overview  of  web  accessibility  for  older  users    

 hhp://www.w3.org/WAI/intro/wai-­‐age-­‐literature.php    Web  Content  Accessibility  and  Mobile  Web:  Making  a  Website  Accessible  Both  for  People  with  Disabili4es  and  for  Mobile  Devices    

 hhp://www.w3.org/WAI/mobile/overlap  

Accessibility  Benefits  Everyone!  

Not  everyone  who  is  disabled  has  been  disabled  forever  or  will  remain  disabled.    

Overview  of  web  accessibility  for  older  users    Web  Content  Accessibility  and  Mobile  Web:  Making  a  Website  Accessible  Both  for  People  with  Disabili4es  and  for  Mobile  Devices    

Keyboard  Naviga4on  

A  simple  test  you  can  do  is  this:  Unplug  your  mouse  and/  or  turn  off  your  trackpad  

1.   Can  you  interact  with  all  controls,  links,  and  menus  using  only  the  keyboard?  

2.  Can  you  see  what  item  has  focus  at  all  4mes?  3.  Does  the  visual  focus  order  match  the  intended  interac4on  order?  

The  6  Simplest  Web  Accessibility  Tests  Anyone  Can  Do  

Is  your  theme  accessible-­‐ready?  

13  Of  the  2,764  themes  in  the  WordPress.org  theme  

repository  only  13  are  accessbile-­‐ready.  (10-­‐4-­‐2014)  

Theme  Review  Handbook  •  Headings  •  Link  Text  •  Controls  •  Keyboard  •  Naviga4on  

•  Contrasts  •  Skip  Links  •  Forms  •  Images  •  Media  

hhps://make.wordpress.org/themes/handbook/guidelines/accessibility/  

Headings  •  Use  a  reasonable  heading  structure  -­‐  including  the  use  

of  heading  elements  for  page  sub-­‐sec4ons.  •  Do  not  use  text  formanng,  such  as  font  size  or  bold  to  

give  the  visual  appearance  of  headings  -­‐  use  actual  heading  -­‐  You  can  use  css  to  change  the  appearance  of  your  text  

•  Heading  elements  for  structure  MAY  be  posi4oned  off-­‐screen  as  long  as  this  is  not  at  the  expense  of  providing  good,  visual,  structure.  

Link  Text  •  Avoid  repe44ve  non-­‐contextual  text  strings  such  as  ‘read  

more…’  •  The  core-­‐defined  ‘read  more’  links  fall  under  this  guideline  

Use  Filters  

Keyboard  Naviga4on  •  Provide  visual  keyboard  focus  highligh4ng  in  naviga4on  

menus,  for  form  fields,  submit  buhons  &  text  links.  •  Naviga4on  by  keyboard  should  also  be  intui4ve  and  

effec4ve.  

POTENTIAL  PROBLEMS  •  Something  other  than  a  link  or  form  control  (such  as  a  <div>  or  

<span>)  is  programmed  with  scrip4ng  to  perform  an  ac4on.    •  Scripted  elements  •  Lengthy  naviga4on  (use  skip  links)  

Using  These:  

<buhon>      <input>      <a>  

Controls  

will  ensure  na4ve  keyboard  accessibility  and  interac4on  with  screen  reader  accessibility  APIs.  

Contrasts  Color  contrasts  for  plain  text  should  be  within  the  level  AA  contrast  ra4o  

 (4.5:1)  

Skip  Links  

Include  a  mechanism  that  enables  users  to  navigate  directly  to  content  or  naviga4on  on  entering  any  given  page.    

Forms  Comment  Forms  Must:  •  Have  appropriate  field  labels  •  All  content  within  form  tags  MUST  be  explicitly  

associated  to  a  form  control  •  Errors  or  confirma4ons  MUST  be  perceivable  

If  you  are  using  the  default  WordPress  comment  or  search  forms,  these  pass  the  accessibility-­‐ready  criteria.  

Images  •  Decora4ve  images  must  be  included  using  CSS  •   Incorporate  an  appropriate  alt  ahribute  or  the  

means  for  an  end  user  to  provide  one.  

SEE  webaim.org/techniques/alhext/  

 

Media  •  Media  resources  must  NOT  auto  start  or  change  without  user  ac4on  as  a  default  configura4on  

•  This  includes  resources  such  as  audio,  video,  or  image/content  sliders  and  carousels.  

In  general,  media  resources  of  this  nature  are  likely  to  fall  under  the  plugin  territory  guidelines,  and  will  not  be  allowed  in  your  theme.  If  you  have  a  conforming  usage,  however,  these  rules  will  apply.    

At  Google  Pihsburgh  for  an    accessibility  meetup.  Extremely  eye-­‐opening.  

Not  Allowed  

•  Any  posi4ve  tabindex  ahribute.  •  The  inclusion  of  the  accesskey  ahribute.  •  Spawning  new  windows  or  tabs  without  

warning  the  user.  

Low  Vision  –  Don’t  Do  This  •  hhp://youtu.be/HoHnqruA5bg  •  hhp://youtu.be/bIW3POa9D-­‐o  •  hhp://youtu.be/oklmoixpjI0      The  video  clips  from  the  presenta4on  are  on  Youtube  at  the  links  above.  

Books  A  Web  for  Everyone   Accessibility  Handbook  

Thank  You!  Ques4ons?