Brought  to  you  by  

Development Track – AccessU 2012

WCAG 2.0 Why can’t we all just get along?

John  Sla)n  AccessU  2012  Denis  Boudreau,  AccessibilitéWeb  Aus8n  –  May  15th,  2012  

LOUIS ARMSTRONG “You say WooCAG and I say WayCAG, You say Area and I say AH-ria, WooCAG, WayCAG, Area, AH-ria, Let's call the whole thing off!”

Brought  to  you  by  

 BY  -­‐  AAribu8on   NC  -­‐  NonCommercial   SA  -­‐  ShareAlike  2.5  Canada  

2012. Some Rights Reserved.

/  2  

Brought  to  you  by  

Trainer

Denis  Boudreau     Over  11  years  in  Web  Accessibility  

   President,  AccessibilitéWeb    

   Co-­‐editor,  SGQRI  008  standards     Invited  Expert,  W3C    

/  3  

Brought  to  you  by  

Summary General overview

1.  Implementa8on  challenges  

2.  Deep  within  the  WCAG  2.0  specs  3.  Shedding  light  into  WCAG  2.0  

4.  PuWng  it  all  together  

/  4  

Brought  to  you  by  

What  best  describes  the  work  you  do?  

But before we begin... Come pick the tag(s) that fit you most

/  5  

Brought  to  you  by  

/  6  Implementation challenges

Brought  to  you  by  

Implementation challenges Accessibility becomes a serious business

Accessibility  audi)ng  is  not  a  game  anymore  

• Accessibility  audits  used  to  be  without  consequences  • This  is  all  changing  with  legal  requirements  &  law  suits  

• Compliance  becomes  an  increasingly  sensi8ve  issue  • People  now  expect  measurable  and  objec8ve  results  

• While  compliance  is  objec8ve,  accessibility  is  not  • So  when  has  an  organiza8on  made  “enough”  efforts?  

/  7  

Brought  to  you  by  

Implementation challenges Difficulties of implementing requirements

What  makes  WCAG  2  great  also  makes  it  flawed  

• Being  technology  agnos8c  is  awesome  

• Great  for  sustainability  but  comes  with  drawbacks  

• A  certain  vagueness  in  success  criteria  formula8on  • Leaves  room  for  various  uneducated  interpreta8ons  

• Opens  the  door  to  lots  of  uneven  implementa8ons  •  Indirectly  contributes  to  making  accessibility  hard  

/  8  

Brought  to  you  by  

Implementation challenges Difficulties of implementing requirements

WCAG  2,  a  double-­‐edged  sword?  

• The  vagueness  is  clarified  in  the  techniques  &  failures  • LiAerally,  thousands  of  pages  to  go  through  • But  those  are  only  informa8ve  (therefore,  not  required)  • Not  everyone  reads  them  (most  don’t  take  the  8me)  

• We  are  all  welcomed  to  cherry  pick  what  we  like  • Or  maybe  even  come  up  with  new  techniques  

/  9  

Brought  to  you  by  

Implementation challenges Difficulties of implementing requirements

The  Canadian  government  approach  

•  Turn  W3C  recommenda8ons  into  formal  requirements  • Make  WCAG  2.0  level  AA  a  mandatory  standard  •  Providing  measurable  means  to  achieve  compliance  • Applying  at  least  one  technique  per  success  criteria  • Generally  trying  to  avoid  the  common  failures  •  Indirectly  gran8ng  those  techniques  norma8ve  status  

This  creates  obvious  problems  in  most  organiza)ons  

/  10  

Brought  to  you  by  

Implementation challenges The perfect example...

1.3.1  Info  and  Rela)onships  Informa8on,  structure,  and  rela8onships  conveyed  through  presenta8on  can  be  programma8cally  determined  or  are  

available  in  text.  (Level  A)    

What  the  hell  does  this  mean?  When  is  such  a  success  criteria  “sufficiently  met”?  

/  11  

Brought  to  you  by  

Implementation challenges Let’s take the AccessU website...

/  12  

Brought  to  you  by  

Implementation challenges 1.3.1 Info and Relationships

Some  of  the  things  to  consider...  

/  13  

Categories   Details  

Seman8cs   Use  seman8c  elements  to  markup  structure,  text  and  color  cues  

Headings   Organize  pages  using  h1-­‐h6  headings  

Tables   Use  seman8c  elements  to  markup  data  tables,  use  data  table  elements  and  aAributes  (summary,  cap8on,  th,  thead,  tbody,  id,  headers,  etc.)    

Forms   Associate  labels  and  form  controls,  use  8tle  aAributes,  provide  a  descrip8on  for  groups  using  fieldset  and  legend,  use  optgroup  to  group  op8on  elements  inside  a  select.    

Lists   Use  ol,  ul  and  dl  for  lists  or  groups  of  links.    

Presenta8on   Use  text  to  convey  info  conveyed  by  varia8ons  in  presenta8on  of  text,  use  CSS  to  control  visual  presenta8on,  separate  informa8on  and  structure  from  presenta8on.    

Brought  to  you  by  

Implementation challenges The perfect example...

Experience  has  shown  us  that  for    25  people  in  a  room,  we  will  get    about  25  different  answers...  

/  14  

Brought  to  you  by  

Implementation challenges Difficulties of implementing requirements

The  Quebec  government  approach  

• Refute  WCAG  2.0  because  of  its  vagueness  

• Make  WCAG  2.0  level  AA  a  mandatory  standard  

•  Iden8fy  techniques  and  turn  them  into  requirements  • Breaking  down  each  SC  into  measurable  goals  

• Crea8ng  another  standard  altogether  in  the  process  

This  creates  obvious  problems  for  web  accessibility  

/  15  

Brought  to  you  by  

Implementation challenges Going down the fragmentation path

Many  public  administra)ons  decide    to  rewrite  accessibility  standards.    

Though  perfectly  understandable  and    in  some  cases,  even  produc)ve,    this  is  bad  news  for  the  Web.  

/  16  

Brought  to  you  by  

Implementation challenges The value of standards harmonization

How  standards  fragmenta)on  hurts  the  web  

• Slows  down  poten8al  progress  towards  increasing  a11y  • Govt  must  spend  more  resources  on  alternate  versions  

• Mainstream  authoring  tools  lack  accessibility  support  • Products  developed  locally  can’t  compete  globally  

• Organiza8ons  must  track  &  support  differing  standards  

These  are  all  very  true  in  the  Quebec  province  today  

/  17  

Brought  to  you  by  

Implementation challenges The value of standards harmonization

How  standards  harmoniza)on  actually  helps  

• All  benefit  from  years  of  interna8onal  collabora8on  

• Govts  save  funding  by  using  W3C/WAI  resources  

• Sonware  developers  benefit  from  economies  of  scale  • Web  developers  can  more  easily  produce  content  

• Govts  can  take  advantage  of  collabora8ve  resources  

But  that  doesn’t  mean  things  can’t  be  improved  

/  18  

Brought  to  you  by  

Implementation challenges Education & Outreach Working Group

Standards  harmoniza)on  

• Explains  key  role  of  harmoniza8on  • Promotes  adop8on  of  a  consistent      set  of  interna8onal  standards  • Currently  being  updated  • Available  at  -­‐  hAp://is.gd/szEDLJ  

/  19  

Brought  to  you  by  

Implementation challenges Filling a gap in WCAG 2.0

Improving  on  what’s  already  out  there  

• S8ll,  the  Quebec  accessibility  standards  have  values  • Fixing  success  criteria  general  vagueness  • Providing  the  developers  with  clear  guidance  • Reaching  out  to  already  exis8ng  documents  

• Crea8ng  a  “filter”  to  apply  WCAG  2.0  consistently  • Promo8ng  harmoniza8on  through  fragmenta8on?!  

/  20  

Brought  to  you  by  

Implementation challenges Establishing common grounds

Coming  to  an  agreement  for  accessibility  

• Consistency  is  crucial  for  overall  coherence  • Even  more  so  when  an  organiza8on  has  many  websites  

• Unless  a  lot  of  effort  is  devoted:  • Developers  hardly  have  access  to  detailed  specs  • Sharing  a  common  understanding  is  a  real  challenge  • Results  are  uneven  and  global  coherence  suffers  

/  21  

Brought  to  you  by  

Implementation challenges Establishing common grounds

End  results  are  always  the  same.    Ask  any  website  owner  out  there.  

/  22  

Brought  to  you  by  

WAI-Engage Wiki Role-based accessibility

Thus  came  ARB*  (a11y  responsibility  breakdown)  

•  Looking  at  WCAG  2.0  SC  by  roles  • Get  involved  in  the  community:          comment,  contribute,  use  • Make  this  your  own  and  bring  it      into  your  organiza8on!  • Available  at  -­‐  hAp://is.gd/5CoJd4  

/  23  

Brought  to  you  by  

/  24  Deep within WCAG 2.0

Brought  to  you  by  

Deep within WCAG 2.0 WCAG 2.0 documents overview

Resource  The  WCAG  2.0  Documents  hAp://www.w3.org/WAI/intro/wcag20  

/  25  

Brought  to  you  by  

Deep within WCAG 2.0 The accessibility guidelines

Resource  WCAG  2.0  -­‐  Web  Content  Accessibility  Guidelines  hAp://www.w3.org/TR/WCAG/  

/  26  

Brought  to  you  by  

Deep within WCAG 2.0 The WCAG 2.0 mindmap

Resource  The  WCAG  2.0  Map:    A  (totally  awesome)  visual  guide  to  understanding  web  accessibility  hAp://www.stamfordinterac8ve.com.au/the-­‐wcag-­‐2-­‐0-­‐map/  

/  27  

Brought  to  you  by  

Deep within WCAG 2.0 The WCAG 2.0 documents

Resource  How  to  Meet  WCAG  2.0  hAp://www.w3.org/WAI/WCAG20/quickref/  

Resource  Understanding  WCAG  2.0  hAp://www.w3.org/TR/UNDERSTANDING-­‐WCAG20/  

Resource  Techniques  and  Failures  for  WCAG  2.0  hAp://www.w3.org/TR/WCAG-­‐TECHS/  

/  28  

Brought  to  you  by  

/  29  Shedding light into WCAG 2.0

Brought  to  you  by  

Shedding light into WCAG 2 Nuts and bolts of web accessibility

1st  exercise  –  working  with  SC  1.1.1  

• Organize  in  groups  of  two  to  three  people  •  In  10  minutes:  

•  Iden8fy  someone  responsible  for  taking  notes  • Find  as  many  related  best  prac8ces  as  you  can  

• Try  to  find  related  poten8al  accessibility  problems  • We’ll  then  share  findings  with  the  rest  of  the  group  

/  30  

Brought  to  you  by  

Shedding light into WCAG 2 WCAG 2.0 AccessU ShortList

Laying  founda)ons  for  a  WCAG  2.0  Filter  

•  Non-­‐Text  Content  (SC  1.1.1)  •  Info  and  Rela8onships  (SC  1.3.1)  •  Meaningful  Sequence  (SC  1.3.2)  •  Use  of  Color  (SC  1.4.1)  •  Contrast  -­‐  Minimum  (SC  1.4.3)  •  Keyboard  (SC  2.1.1)  •  Focus  Order  (SC  2.4.3)  •  Link  Purpose  -­‐  In  Context  (SC  2.4.4)  •  Available  at  -­‐  hAp://is.gd/gsmr2P  

/  31  

Brought  to  you  by  

Shedding light into WCAG 2 Nuts and bolts of web accessibility

2nd  exercise  –  working  with  other  SC  

• Organize  in  groups  of  four  to  five  people  •  In  10  minutes  (per  assigned  SC):  

•  Iden8fy  someone  responsible  for  taking  notes  • Find  as  many  related  best  prac8ces  as  you  can  

• Try  to  find  related  poten8al  accessibility  problems  • We’ll  then  share  findings  with  the  rest  of  the  group  

/  32  

Brought  to  you  by  

/  33  Putting it all together

Brought  to  you  by  

Putting it all together Adopting an assessment method

Three-­‐step  accessibility  evalua)on  

1.  Tes8ng  the  web  page  with  a  screen  reader  2.  Using  an  automa8c  checker  for  basic  problems  3.  Running  manual  tes8ng  to  complete  the  audit  

And  write  recommenda)ons  people  can  use!!!  

/  34  

Brought  to  you  by  

Putting it all together 1st - Using NVDA to Evaluate Web Accessibility

Resource  Using  NVDA  to  Evaluate  Web  Accessibility  hAp://webaim.org/ar8cles/nvda/  

/  35  

Brought  to  you  by  

Putting it all together 2nd - Web accessibility checker

Resource  Web  Accessibility  Checker  hAp://achecker.ca/checker/  

/  36  

Brought  to  you  by  

Putting it all together 3rd - Roger Hudson’s WCAG 2.0 checklist

Resource  WCAG  2.0  Checklist  hAp://www.usability.com.au/resources/wcag2checklist.cfm  

/  37  

Brought  to  you  by  

Putting it all together Easy to use tools to get the job done

Mozilla  Firefox  

•  Web  Developer  Toolbar  •  Accessibility  Evaluator  •  Juicy  Studio  a11y  Toolbar  •  FireBug  •  HeadingsMap  •  NoSquint  •  WAI-­‐ARIA  Landmarks  •  Fangs    

/  38  

Microso^  Internet  Explorer •  Web  Accessibility  Toolbar  

Other  useful  tools  

•  Color  Contrast  Analyzer  •  FireEyes  Extension  

Brought  to  you  by  

Thank You!

Denis  Boudreau,  President  

Coopéra)ve  AccessibilitéWeb  1751  Richardson  street,  suite  6111  

Montreal  (Quebec),  Canada  H3K  1G6  

Toll  Free:  +1  (877)  315-­‐5550  Email:  db@csaw.ca  

Web:  www.accessibiliteweb.com  

TwiAer  :  @AccessibiliteWb  /  @dboudreau  

/  39