html5-img
1 / 45

Accessible Web Apps: New Standards & Technology

Accessible Web Apps: New Standards & Technology. Accessible Modal Windows http:// go.ncsu.edu/a11y-modal Greg Kraus NC State University. Why do we need ARIA?. Accessibility on the Desktop. push button name is "Cancel" focusable default action unpressed. Application. Operating System.

patsy
Télécharger la présentation

Accessible Web Apps: New Standards & Technology

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 Web Apps: New Standards & Technology Accessible Modal Windows http://go.ncsu.edu/a11y-modal Greg Kraus NC State University

  2. Why do we need ARIA?

  3. Accessibility on the Desktop push button name is "Cancel" focusable default action unpressed Application Operating System

  4. Accessibility on the Web push button name is "Cancel" focusable default action unpressed Web Page Application (Browser) Operating System

  5. The Browser Translates The Object into Something the Operating System Understands Image Drop Down List Checkbox Text Input Radio Button Text Button Loremipsum dolor sit amet, consecteturadipiscingelit.

  6. ARIA Fills in the Gaps for Items Lost in Translation

  7. What is ARIA? • Roles, States, and Properties • Roles = defining what an object is • Widgets • Document Structure • Landmark • Attributes = describing an object • States • Properties

  8. Putting our toes in the water… <label for="first-name">First Name</label> <input id="first-name" name="first-name" type="text" /> <span class="required"> * </span>

  9. aria-required <label for="first-name">First Name</label> <input id="first-name" name="first-name" type="text" aria-required="true" /> <span class="required"> * </span>

  10. ARIA Gone Wild What you can do, but shouldn't do ...and don't let anyone catch you doing it

  11. A Simple Checkbox <input id="signup" type="checkbox" /> <label for="signup">Sign me up!</label>

  12. The Starting Point <div>Sign me up!</div>

  13. Introducing the "role" <div role="checkbox">Sign me up!</div>

  14. <dog role="at-at"></dog> AT-AT = All Terrain Armored Transport, first introduced in The Empire Strikes Back

  15. Adding the checkbox <div role="checkbox" style="background-image:url('checkbox-unchecked.gif'); background-repeat: no-repeat; padding-left:25px;padding-top:10px;">Sign me up!</div>

  16. Responding to clicks <div role="checkbox" style="background-image:url('checkbox-unchecked.gif'); background-repeat: no-repeat; padding-left:25px;padding-top:10px;" onclick="toggleCheckBox(this);">Sign me up!</div>

  17. Make it so you can tab to it <div role="checkbox" style="background-image:url('checkbox-unchecked.gif'); background-repeat: no-repeat; padding-left:25px;padding-top:10px;" onclick="toggleCheckBox(this);" tabindex="0">Sign me up!</div>

  18. Make it so you can use the keyboard to activate it <div role="checkbox" style="background-image:url('checkbox-unchecked.gif'); background-repeat: no-repeat; padding-left:25px;padding-top:10px;" onclick="toggleCheckBox(this);" tabindex="0" onKeyPress="trapSpaceKey(this,event);">Sign me up!</div>

  19. Make it so screen readers can know its current state <div role="checkbox" style="background-image:url('checkbox-unchecked.gif'); background-repeat: no-repeat; padding-left:25px;padding-top:10px;" onclick="toggleCheckBox(this);" tabindex="0" onKeyPress="trapSpaceKey(this,event);" aria-checked="true">Sign me up!</div>

  20. ...and all of this code function trapSpaceKey(t,e){ if ( e.which == 32 ) { toggleCheckBox(t); } } function toggleCheckBox(t) { if($(t).attr("aria-checked")=="false") { $(t).css("background-image","url('checkbox-checked.gif')"); $(t).attr("aria-checked","true"); } else { $(t).css("background-image","url('checkbox-unchecked.gif')"); $(t).attr("aria-checked","false"); } $(t).focus(); }

  21. When all you needed was this <input id="signup" type="checkbox" /> <label for="signup">Sign me up!</label>

  22. Don't be tempted to do this <input id="signup" type="checkbox" role="checkbox" /> <label for="signup">Sign me up!</label>

  23. Superfluous Labelling is Not Needed

  24. Step 1: Basic Page Structure <body> <div id="mainContent">...</div> <div id="modalWindow">...</div> </body>

  25. Step 2: Adding role="dialog" <body> <div id="mainContent">...</div> <div id="modalWindow" role="dialog">...</div> </body>

  26. Step 3: Adding the Overlay <body> <div id="mainContent">...</div> <div id="modalWindow" role="dialog">...</div> <div id="modalOverlay" tabindex="-1"></div> </body>

  27. Step 3: Adding the Description and Heading <div id="modalWindow" role="dialog" aria-labelledby="modalTitle modalDescription"> <div id="modalDescription" class="screen-reader-offscreen">Beginning of dialog window. It begins with a heading 1 called &quot;Registration Form&quot.</div> <h1 id="modalTitle">Registration Form</h1> </div> <div id="modalOverlay" tabindex="-1"></div>

  28. Step 4: Trapping the focus jQuery('#modalWindow').keydown(function(event){ trapTabKey($(this),event);}) function trapTabKey(obj,evt) { if tab pressed cycle through the tabbable elements, looping from first to last, or last to first when needed else do nothing }

  29. Step 4: Setting and restoring the focus var focusedElementBeforeModal; function showModal() { ... focusedElementBeforeModal = jQuery(':focus'); …} function hideModal() { ... focusedElementBeforeModal.focus(); …}

  30. Step 5: Adding aria-hidden <body> <div id="mainContent" aria-hidden="false">...</div> <div id="modalWindow" role="dialog" aria-labelledby="modalTitle modalDescription" aria-hidden="true">...</div> <div id="modalOverlay" tabindex="-1"></div> </body>

  31. Step 6: Trapping the escape key jQuery('#modalWindow').keydown( function(event){trapEscapeKey($(this),event);}) function trapEscapeKey(obj,evt){ if escape key is pressed $('#cancelButton').click(); else do nothing }

  32. Step 6: Trapping the enter key jQuery('#modalWindow').keydown( function(event){trapEnterKey($(this),event);}) function trapEnterKey(obj,evt){ if enter key is pressed $('#enter').click(); else do nothing } FAIL

  33. Step 6: Trapping the enter key jQuery('#modalInputForm').keydown( function(event){trapEnterKey($(this),event);}) function trapEnterKey(obj,evt){ if enter key is pressed $('#enter').click(); else do nothing }

  34. Step 7: Adding the shims <div id="modalWindow" role="dialog" aria-labelledby="modalTitle modalDescription" aria-hidden="true" tabindex="-1">...</div> if(usingWebKit()){ focus on the modal window itself } else { focus on the first object }

  35. aria-required +1 <span class="required” aria-hidden=“true”> Required </span> <label for="first-name">First Name</label> <input id="first-name" name="first-name" type="text" aria-required="true" />

  36. Resources ARIA Authoring Practices http://www.w3.org/WAI/PF/aria-practices/ ARIA Roles http://www.w3.org/TR/wai-aria/roles Web Accessibility Initiaitve http://www.w3.org/WAI/

More Related