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