Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WAI-ARIA in 10

WAI-ARIA in 10

From a talk given at She Codes Brighton's Tech in 10 in March, 2015

Laura Kalbag

March 16, 2015

More Decks by Laura Kalbag

Other Decks in Technology


  1. <ul  class="links-­‐list  rooms">      <li>        

     <a  href="#hall">Hall</a>      </li>      <li>          <a  href="#kitchen">Kitchen</a>      </li>      …   </ul> <div  class="links-­‐list  rooms">      <a  href="#hall">Hall</a>      <br>      <a  href="#kitchen">Kitchen</a>   </div>   Meaningful vs not-so meaningful HTML
  2. <ul  class="links-­‐list  rooms">      <li>        

     <a  href="#hall">Hall</a>      </li>      <li>          <a  href="#kitchen">Kitchen</a>      </li>      …   </ul> list 2 items • • internal, link, Hall internal, link, Kitchen end of list How VoiceOver reads it
  3. <div  class="links-­‐list  rooms">      <a  href="#hall">Hall</a>      <br>

         <a  href="#kitchen">Kitchen</a>   </div> internal, link, Hall internal, link, Kitchen How VoiceOver reads it
  4. visited, link, Images link, Fonts link, Ways To Pay link,

    Offers link, Ideas link, Subscriptions
  5. ARIA is a layer on top of markup content structure

    (HTML) additional structure (ARIA)
  6. <div  role="alert">Incorrect  password,  please  try  again</div>   <div  role="dialog">Successfully  saved</div>

    Other roles Full list at http://www.w3.org/TR/wai-aria/roles#abstract_roles_header
  7. tab, Images, selected tab, Fonts tab, Ways To Pay tab,

    Offers tab, Ideas tab, Subscriptions
  8. Expanding/collapsing menu <button  class="menu"        aria-­‐expanded="false"> <button  class="menu"

           aria-­‐expanded="true"> Menu, collapsed, button Menu, expanded, button
  9. <ul  class="site-­‐navigation"  role="navigation"> HTML5 vs Landmarks <nav>      <ul

     class="site-­‐navigation"></ul>   </nav> http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#default-implicit-aria-semantics
  10. ARIA vs HTML <span  role="link">   <div  role="list">   <span

     role="button">   <span  role="checkbox"> <a>   <ul>   <button>   <input  type="checkbox"> http://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/
  11. New tweets available. Press period to review them. <div  id="event-­‐log"

     aria-­‐live="assertive">      <p>New  Tweets  available.  Press  period  to  review  them.</p>   </div>