1 / 42

Screen

Accessible  Rich  Internet  Applica1ons  . Screen. der. Rea. ript. aSc A. +. Jav. RI. ithA. w. Glenda  Sims  . @goodwitch   deque.com   knowbility   #a11y  . GeAng  to  Know  ARIA   ARIA:    What  &  Why   Landmarks   Rela1onships  

Download Presentation

Screen

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Accessible  Rich  Internet  Applica1ons   Screen der Rea ript aScA + Jav RI ithA w

  2. Glenda  Sims   @goodwitch   deque.com   knowbility   #a11y  

  3. GeAng  to  Know  ARIA   ARIA:    What  &  Why   Landmarks   Rela1onships   Accessible  JavaScript  Widgets   •  •  •  •  – ARIA  Design  PaKerns   • ARIA  Golden  Rules  

  4. ARIA:    WHAT  &  WHY  

  5. The  First  Web  Page   hKp://info.cern.ch/hypertext/WWW/TheProject.html  

  6. Today’s  Dynamic  Web  Applica1ons  

  7. Screen  Readers  Get  Smart   • Screen  Readers  love  HTML     • Originally  screen  readers  could  not  understand   • Dynamic  Updates  to  Content  -­‐  AJAX   • JavaScript  Custom  Widgets    -­‐  like…   – Collapsible  Content   – Tabs   – Slider   • ARIA  developed  so  screen  readers  can  love  JavaScript  too!  

  8. Is  it  safe  to  use  ARIA  yet?  

  9. Jump  into  ARIA  

  10. Browser/Screen  Reader  Combina1ons  

  11. Can  I  Use…ARIA?   hKp://caniuse.com/#feat=wai-­‐aria  

  12. ARIA  TO  THE  RESCUE  

  13. ARIA  Features   • Roles   – describe  the  structure  of  the  Web  page   • such  as  headings  and  regions   • Roles     – describe  the  type  of  javascript  widget  presented   • "menu,"  "treeitem,"  "slider”   • Proper1es   – describe  the  state  javascript  widgets  are  in   • such  as  "checked"  for  a  check  box   • Focus   – provide  keyboard  naviga1on  for  all  ac1ve  elements  

  14. Get  Your  Feet  Wet  

  15. LANDMARKS  

  16. Document  Landmark  Roles  

  17. Try  Adding  These  Landmark  Roles!   1.Banner  –  header  of  the  page,  for   example  banner  image  and  the  logo.          <div  role=“banner”>   2.Naviga1on  –  links  to  navigate   the  site  and  related  sites   <ul  role=“navigaJon”>   3.Search  –  contains  search  form  for   the  site   <div  role=“search”>   4.Main  –  core  content  of  the  page   <div  role=“main”>   5.Content  Info  –  child  content:     footnotes,  links  to  privacy   statements…   <div  role=“contenJnfo”>  

  18. Deque  Home  Page  is  Designed  with   Landmark  Roles  

  19. Deque  Home  Page  Landmakr  Roles  

  20. See  ARIA  Document  Landmarks   Install  Juice  Studio  Accessibility  Toolbar  (for  Firefox)     addons.mozilla.org/en-­‐us/firefox/addon/juicy-­‐studio-­‐accessibility-­‐too/   From  the  ARIA  menu,  select  “Document  landmarks”   1. 2.

  21. ARIA  Landmarks  in  VoiceOver  

  22. Roll  up  your  pants  and  wade  in  a  liKle   deeper  

  23. Form  Labeling  &  Instruc1ons   RELATIONSHIPS  

  24. Accessible  Form  Labeling  &   Instruc1ons   • Great  ar1cle  by  Karl  Groves  (a11y  viking)   • hKp://www.karlgroves.com/2011/10/10/ accessible-­‐form-­‐labeling-­‐instruc1ons/  

  25. High-­‐Level  Form  Field  Accessibility   • All  form  elements  should  have  explicit  labels   • Labels  are  clear  and  informa1ve   • Format  requirements  are  indicated     hKp://www.karlgroves.com/2011/10/10/ accessible-­‐form-­‐labeling-­‐instruc1ons/  

  26. S1ck  with  the  HTML  Labeling  Basics   <label  for=“datex”>Date:</label>   <input  type=“text”  name=“datex”  id=“datex”  />  

  27. Use  aria-­‐describedby  for  Instruc1ons   <label  for=“datex”>Date:</label>   <input  type=“text”  name=“datex”  id=“datex”     aria-­‐describedby=“instructs1”/>   <span  id=“instructs1”>must  be  mm/dd/yyyy  format</span>  

  28. Time  to  Jump  In!  

  29. Accessible  JavaScript  Widgets   ARIA  DESIGN  PATTERNS  

  30. ARIA  Design  PaKerns  

  31. OPEN  AJAX  ACCESSIBILITY   EXAMPLE  FOR  TAB  PANEL  

  32. ARIA  Tab  Panel  Example   <div  role="applicaJon">   <h2>Happy  Time  Pizza  On-­‐line  Ordering  System</h2>   <form>   <div  id="tabpanel1"  class="tabpanel">      <ul  class="tablist"  role="tablist">          <li  id="tab1"  class="tab  selected"  aria-­‐controls="panel1"  aria-­‐selected="true" role="tab"  tabindex="0">Crust</li>          <li  id="tab2"  class="tab"  aria-­‐controls="panel2"role="tab"  aria-­‐selected="false"   tabindex="-­‐1">Veggies</li>          <li  id="tab3"  class="tab"  aria-­‐controls="panel3"  role="tab"  aria-­‐selected="false"   tabindex="-­‐1">Carnivore</li>          <li  id="tab4"  class="tab"  aria-­‐controls="panel4"  role="tab"  aria-­‐selected="false"   tabindex="-­‐1">Delivery</li>      </ul>   Source:  hKp://www.oaa-­‐accessibility.org/examplep/tabpanel1/  

  33. ARIA  Tab  Panel  Example  -­‐  Roles   <div  role="applicaJon">   <h2>Happy  Time  Pizza  On-­‐line  Ordering  System</h2>   <form>   <div  id="tabpanel1"  class="tabpanel">      <ul  class="tablist"  role="tablist">          <li  id="tab1"  class="tab  selected"  aria-­‐controls="panel1"  aria-­‐selected="true" role="tab"  tabindex="0">Crust</li>          <li  id="tab2"  class="tab"  aria-­‐controls="panel2"role="tab"  aria-­‐selected="false"   tabindex="-­‐1">Veggies</li>          <li  id="tab3"  class="tab"  aria-­‐controls="panel3"  role="tab"  aria-­‐selected="false"   tabindex="-­‐1">Carnivore</li>          <li  id="tab4"  class="tab"  aria-­‐controls="panel4"  role="tab"  aria-­‐selected="false"   tabindex="-­‐1">Delivery</li>      </ul>   Source:  h*p://www.oaa-­‐accessibility.org/examplep/tabpanel1/  

  34. ARIA  Tab  Panel  Example  -­‐  Rela1onship   <div  role="applicaJon">   <h2>Happy  Time  Pizza  On-­‐line  Ordering  System</h2>   <form>   <div  id="tabpanel1"  class="tabpanel">      <ul  class="tablist"  role="tablist">          <li  id="tab1"  class="tab  selected"  aria-­‐controls="panel1"  aria-­‐selected="true" role="tab"  tabindex="0">Crust</li>          <li  id="tab2"  class="tab"  aria-­‐controls="panel2"role="tab"  aria-­‐selected="false"   tabindex="-­‐1">Veggies</li>          <li  id="tab3"  class="tab"  aria-­‐controls="panel3"  role="tab"  aria-­‐selected="false"   tabindex="-­‐1">Carnivore</li>          <li  id="tab4"  class="tab"  aria-­‐controls="panel4"  role="tab"  aria-­‐selected="false"   tabindex="-­‐1">Delivery</li>      </ul>   Source:  h*p://www.oaa-­‐accessibility.org/examplep/tabpanel1/  

  35. ARIA  Tab  Panel  Example  -­‐  State   <div  role="applicaJon">   <h2>Happy  Time  Pizza  On-­‐line  Ordering  System</h2>   <form>   <div  id="tabpanel1"  class="tabpanel">      <ul  class="tablist"  role="tablist">          <li  id="tab1"  class="tab  selected"  aria-­‐controls="panel1"  aria-­‐selected="true" role="tab"  tabindex="0">Crust</li>          <li  id="tab2"  class="tab"  aria-­‐controls="panel2"role="tab"  aria-­‐selected="false"   tabindex="-­‐1">Veggies</li>          <li  id="tab3"  class="tab"  aria-­‐controls="panel3"  role="tab"  aria-­‐selected="false"   tabindex="-­‐1">Carnivore</li>          <li  id="tab4"  class="tab"  aria-­‐controls="panel4"  role="tab"  aria-­‐selected="false"   tabindex="-­‐1">Delivery</li>      </ul>   Source:  h*p://www.oaa-­‐accessibility.org/examplep/tabpanel1/  

  36. ARIA  Widget  Roles   progressbar radio   scrollbar   slider   spinbuKon status   tab   tabpanel   textbox   1mer   tool1p   treeitem alert   alertdialog   buKon   checkbox   dialog   gridcell   link   log   marquee   menuitem menuitemcheckbox menuitemradio op1on   •  •  •  •  •  •  •  •  •  •  •  •  •  •  •  •  •  •  •  •  •  •  •  •  • 

  37. ARIA  Rela1onship  AKributes   aria-­‐ac1vedescendant aria-­‐controls   aria-­‐describedby aria-­‐flowto   aria-­‐labelledby aria-­‐owns   aria-­‐posinset aria-­‐setsize •  •  •  •  •  •  •  • 

  38. ARIA  Widget  AKributes   aria-­‐checked  (state) aria-­‐disabled  (state) aria-­‐expanded  (state) aria-­‐hidden  (state) aria-­‐invalid  (state) aria-­‐pressed  (state) aria-­‐selected  (state •  •  •  •  •  •  •  aria-­‐autocomplete aria-­‐haspopup aria-­‐label   aria-­‐level aria-­‐mul1line aria-­‐mul1selectable aria-­‐orienta1on aria-­‐readonly aria-­‐required aria-­‐sort   aria-­‐valuemax aria-­‐valuemin aria-­‐valuenow aria-­‐valuetext •  •  •  •  •  •  •  •  •  •  •  •  •  • 

  39. ARIA  Design  PaKerns   www.w3.org/TR/   wai-­‐aria-­‐prac1ces  

  40. ARIA  RULES  OF  SAFETY    

  41. Use  ARIA  Wisely!   • Build  custom  controls  responsibly   • Use  naJve  HTML  markup  first   – Safer   – Simpler   – Full  Accessibility  Built-­‐in   • Use  Custom  Controls     – Only  when  there  is  a  func1onal  advantage   – Are  you  sure  you  can’t  do  this  with  na1ve   HTML  mark-­‐up?   – Make  sure  check  for  the  following:   • Did  you  set  the  appropriate  role?   • Did  you  indicated  the  state(s)  and   proper1es?   • Do  states  and  proper1es  change  correctly   when  values  change?   • Can  you  use  it  with  keyboard  alone?   • Can  you  use  it  with  a  screen  reader?  

  42. Deque  Digital  Equality  

More Related