Aria inside track
Upcoming SlideShare
Loading in...5
×
 

Aria inside track

on

  • 72 views

 

Statistics

Views

Total Views
72
Slideshare-icon Views on SlideShare
72
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Aria inside track Aria inside track Presentation Transcript

    • Get  the  benefits  and   avoid  the  hype   ARIA   The  Inside  Track   Aaron  Leventhal   Product  Management   Ai  Squared  /  sitecues  
    • •  Birth  of  ARIA   •  Why  it  exists   •  How  it  relates  to  accessibility  /  universal  design   •  Soul  of  ARIA   •  How  it  fits  together  with  browsers,  screen  readers  &  content   •  Types  of  ARIA   •  Coming  of  age  for  ARIA   •  Should  you  use  it?   •  Examples  and  demos   •  Awesome  example  with  SVG   We’ll  Cover  
    • •  Developed  Braille  publishing  in  the  90s   •  Netscape  accessibility  lead   -­‐  Sat  next  to  the  world’s  2nd  webcam!   •  Accessibility  architect  for  IBM,  Firefox   -­‐  Made  ARIA  a  reality   •  Director  of  Product  Management  at  Ai  Squared   About  Me    
    • Screen  reader  support   Accessibility   Universal  design   What  is  ARIA?  
    • A  set  of  attributes,  peppered  in  HTML,  allowing  screen   readers  to  better  understand  crazy  web  content,  like   <div role=“checkbox” aria-checked=“true”> Are you my friend? </div> A  W3C  recommendation  (an  official  standard).   A  tool  in  your  tool  chest.  Anything  you  do  on  the  web  can   potentially  be  made  accessible  to  blind  users  with  ARIA.   What  is  ARIA?  
    • Well-­‐tested,  polished,  consistent   Well-­‐documented   A  way  to  help  users  without  an  assistive   technology  (yet).   A  tool  to  help  voice  input  users     (it  could,  but  the  software  makers  must  add  this).   What  ARIA  isn’t  
    • Aware  screen  reader  users   Has  screen  reader   Technically  savvy   About  100,000  (U.S.)   Benefits  from  ARIA   Who  is  it  for?  
    • Aware  screen  reader  users  —  now   Other  users  with  difficulties  —  not  yet   Has  screen  reader   Not  a  screen  reader  user   Technically  savvy   Or  not  very  technical   About  100,000  (U.S.)   About  100  million  (U.S.)   Benefits  from  ARIA   Does  not  benefit  from  ARIA  —  yet   Who  is  it  for?  
    • Accessibility  on  the  early  web   •  Screen  reader  fetches  on  page  load   •  Content  stable   •  Developers  code  alt  text,  form  labels,  and  that’s  about  it!   •  To  learn  more,  go  to  webaim.org  and  click  checklist  
    • The  new  web   •  Page  changes  all  the  time   •  “Widgets”  are  nothing  more  than  styled  content  responding  to  input   •  Screen  reader  needs  to  keep  up  with  live  changes   •  ARIA  to  the  rescue!!!  
    • Soul  of  ARIA   W3C  face-­‐to-­‐face,  2008  
    • ARIA  goodness   Land   marks   Live  regions   Forms   Widgets  
    • @role—“what  is  this  thing?”   alert   button   checkbox   dialog   menu        menubar              menuitem   progressbar   radio              radiogroup   tablist          tab                  tabpanel   slider   tooltip   tree          treegrid                treeitem                          grid                                gridecell   toolbar          separator  
    • @aria-­‐foo  —properties   aria-­‐describedby   aria-­‐checked   aria-­‐disabled   aria-­‐expanded   aria-­‐invalid   aria-­‐valuenow   aria-­‐selected   aria-­‐label          aria-­‐labelledby   aria-­‐activedescendant   aria-­‐live          aria-­‐busy   aria-­‐pressed   aria-­‐required   aria-­‐labelledby  
    • Landmarks!   Just  add  role=“main”  etc.  to  your  content  containers  
    • Live  regions!   Use  aria-­‐live=“polite”   Other  values  are  “off”,  “assertive”,  “rude”  
    • Enhanced  forms!   <label for=“uname”>Name</label>
 <input id=”uname” type="text” required
 aria-describedby=“uname_desc”>" <p id=“uname_desc”>" Enter your real name, so people you know can 
 recognize you." </p>"
    • Enhanced  forms   <div role=“alert”>" Your new password must be confirmed correctly." </div>"
    • Widgets!   role=“slider”   tabindex=“0”  (tabbable!)   aria-­‐valuenow   aria-­‐valuemin   aria-­‐valuemax   role=“tree”   role=“treeitem”   tabindex=“0”   aria-­‐activedescendant   lots  of  keyboard  code  
    • AT users (4x or lower) Good to average vision 300M Low vision (2-4x) 500k 11M  22M by 2020   Dyslexia  &  LD  —  30M   Literacy  challenges  —  40M   Non-­‐native  speakers  —  47M   Accessibility  to  universal  design   Difficulty using web Accessibility  =  best  practices  to  help   users  with  the  strongest  needs  and  awareness   Universal  design  =  Helping  everyone   with  features  deeply  integrated   into  the  product  concept  itself  
    • •  None:   You  don’t  have  time  to  learn,  tinker  and  test     (takes  time  to  get  it  right)   •  Like  a  spice:   Your  content  is  basic,  you  are  new  to  ARIA,  you  just  want   to  make  your  web  page  more  usable  for  blind  users   •  Like  a  steak  dinner:     You’re  compelled  to  fix  screen  reader  access  and  your   content  is  complex  and  dynamic.  Become  the  expert.   How  much  ARIA  should  I  use?  
    • •  Does  it  affect  my  ordinary  use  of  my  page?   No  —  only  the  interaction  with  assistive  tech   •  Can  I  detect  ARIA  support?   Nope   •  Does  it  gracefully  degrade?   Yes   •  Should  I  prefer  ARIA  or  HTML5  accessibility  features?   For  similar  things,  prefer  HTML5   ARIA  FAQ  
    • •  w3.org   •  developer.mozilla.org   Resources