Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

ARIA Techniques for Accessible Web Forms

1 067 vues

Publié le

Simple techniques with code samples showing how to add ARIA to web forms to make them more accessible.

Publié dans : Technologie, Design
  • Soyez le premier à commenter

ARIA Techniques for Accessible Web Forms

  1. 1. © 2013 IBM Corporation ARIA Techniques for Accessible Web Forms Aidan Tierney – Senior Accessibility Consultant IBM Interactive | Toronto May 28, 2013
  2. 2. 2 © 2013 IBM Corporation ARIA Techniques for Accessible Web Forms Introduction Enhancing basic forms Hide/show content Modals Simulating form elements Resources and Q&A
  3. 3. 3 © 2013 IBM Corporation Session Objectives Goals of session: • Understand how ARIA can enhance forms • See and hear how ARIA improves the screen reader experience • Become familiar with ARIA syntax • Discussion of your ARIA experiences, and best practices Intended audience: • Familiar with HTML, JavaScript and jQuery • Understand basic HTML form accessibility techniques, e.g. label, fieldset • Front-end web developers, testers, web content managers
  4. 4. 4 © 2013 IBM Corporation What is ARIA? WAI-ARIA • W3C Web Accessibility Initiative - Accessible Rich Internet Applications • A specification that provides a means of describing roles, states, and properties for custom widgets so that they are recognizable and usable by assistive technology users • Dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies • http://www.w3.org/WAI/intro/ ARIA and forms • Although primary use is complex widgets, ARIA can enhance basic and complex forms • Forms are a good place to start when learning ARIA • ARIA usually used in conjunction with JavaScript, jQuery, AJAX
  5. 5. 5 © 2013 IBM Corporation Session Topics Enhancing a basic form with ARIA • Required fields • Input-level instructions and expected data format • Form validation and error messaging Hide/show content • Open/close form sections • Disabled and read-only elements Modals Simulating form elements • Creating form inputs without HTML form elements
  6. 6. 6 © 2013 IBM Corporation ARIA Syntax Enhancing a basic form with ARIA • aria-required • aria-describedby • aria-invalid • role=“alert” Hide/show content • aria-controls, aria-expanded • aria-hidden, aria-disabled, aria-readonly Modals • role=“dialog”, role=“alertdialog” • aria-label, aria-labelledby Simulating form elements • role=“checkbox”, role=“radio”, aria-checked
  7. 7. 7 © 2013 IBM Corporation ARIA Techniques for Accessible Web Forms Introduction Enhancing basic forms Hide/show content Modals Simulating form elements Resources and Q&A
  8. 8. 8 © 2013 IBM Corporation Basic Form Demo – Before & After ARIA Before • As we go through the form with the NVDA screen reader can you notice what could be improved? • What information appears on the screen but is not read by the screen reader? After • In the ARIA-enhanced version what information does the screen reader speak that was missing from the first version?
  9. 9. 9 © 2013 IBM Corporation Required Fields aria-required <label for="lastName">Last Name*</label> <input id="lastName" type="text" aria- required="true">
  10. 10. 10 © 2013 IBM Corporation Input-level Instructions and Expected Data Format aria-describedby <label for="emailAddress">Email Address*</label> <input id="emailAddress" type="email" aria-describedby="emailFormat" aria-required="true"> <div class="instruction" id="emailFormat"> Example: name@domain.com</div>
  11. 11. 11 © 2013 IBM Corporation Validation and Error Messaging aria-invalid and role="alert" <label for="emailAddress">Email Address*</label> <input id="emailAddress" type="email" aria-describedby="emailFormat" aria-required="true" aria-invalid="true"> <div role="alert"><label for="emailAddress" class="error">Please enter a valid email address</label></div> <div class="instruction" id="emailFormat"> Example:name@domain.com</div>
  12. 12. 12 © 2013 IBM Corporation ARIA Techniques for Accessible Web Forms Introduction Enhancing basic forms Hide/show content Modals Simulating form elements Resources and Q&A
  13. 13. 13 © 2013 IBM Corporation Hide/Show – Closed State aria-controls, aria-expanded <button aria-controls="more-questions" id="button1"> <span>Show</span> Additional Questions</button> <div id="more-questions" aria-expanded="false" tabindex="-1" aria-labelledby="more-questions-label" style="display: none;"> ...</div> Code for hidden state:
  14. 14. 14 © 2013 IBM Corporation Hide/Show – Expanded State aria-controls, aria-expanded <button aria-controls="more-questions" id="button1"> <span>Hide</span> Additional Questions</button> <div id="more-questions" aria-expanded=“true" tabindex="-1" aria-labelledby="more-questions-label" style="display: block;"> ...</div> Code for expanded state:
  15. 15. 15 © 2013 IBM Corporation Hiding Content from Screen Readers display:none • Screen readers do not read content with CSS display:none aria-hidden • Only need aria-hidden when hiding content specifically from assistive technology (AT) • Example: off-screen content that temporarily needs to be hidden from AT OpenAjax Alliance Accessibility Example: Hide/Show http://oaa-accessibility.org/example/20/ HTML5 Accessibility Chops: hidden and aria-hidden http://blog.paciellogroup.com/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/
  16. 16. 16 © 2013 IBM Corporation Disabled and Read-Only Elements aria-disabled • Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable • Disabled elements might not receive focus from the tab order • Value is not submitted with the form <input id="firstName" name="firstName" type="text" value="Jane" disabled aria-disabled="true"> aria-readonly • Indicates that the element is not editable, but is otherwise operable • Typically a text element • User can read but not set the value of the widget • Should not restrict navigation to the element or its focusable descendants • Examples include: – A form element which represents a constant. – The result of a calculation such as a shopping cart total. <input id="lastName" name="lastName" type="text" value="Doe" readonly aria-readonly="true">
  17. 17. 17 © 2013 IBM Corporation ARIA Techniques for Accessible Web Forms Introduction Enhancing basic forms Hide/show content Modals Simulating form elements Resources and Q&A
  18. 18. 18 © 2013 IBM Corporation Modals Modals often used for forms  dialog role is used when the user is expected to provide data  alertdialog role is used to announce the contents of a dialog to the user. Accessible jQuery-ui Components Example http://hanshillen.github.io/jqtest/#goto_dialog Mozilla Developer Network: Using the dialog role
  19. 19. 19 © 2013 IBM Corporation Modals – ARIA syntax role="alertdialog" and aria-labelledby <div role="alertdialog" aria-labelledby="dialog1Title“ aria-describedby="dialog1Desc"> <h2 id="dialog1Title">Your personal details were successfully updated</h2> <p id="dialog1Desc">You can change your details at any time in the user account section.</p> <button>Close</button></div> aria-label <div role="dialog" aria-label="Password Confirmation" aria-describedby="dialog1Desc">
  20. 20. 20 © 2013 IBM Corporation Modals – Focus Focus Management • Modal needs to retain focus until the dialog is closed or dismissed • Should not be possible for keyboard-only users to accidentally tab into the background content • User should either explicitly dismiss the dialog (for example, selecting "Cancel" or pressing ESC) or close it by taking a positive action, such as selecting "OK" or "Submit". • When the dialog is displayed, focus should be placed on an active element within the dialog • Focus management handled through JavaScript, not through ARIA WAI-ARIA Dialogs by Gez Lemon http://juicystudio.com/article/custom-built_dialogs.php
  21. 21. 21 © 2013 IBM Corporation Modals – Example Accessible jQuery-ui Components Example http://hanshillen.github.io/jqtest/#goto_dialog <div tabindex="-1" role="dialog" aria-labelledby= "ui-dialog-title-sampleDialog"> <div tabindex="0" role="button" title="Move dialog"> <span id="ui-dialog-title- sampleDialog">Profile Information</span>...
  22. 22. 22 © 2013 IBM Corporation ARIA Techniques for Accessible Web Forms Introduction Enhancing basic forms Hide/show content Modals Simulating form elements Resources and Q&A
  23. 23. 23 © 2013 IBM Corporation Simulating HTML Form Elements HTML inputs vs. custom-made widgets • <input>, <select> and other form elements already communicate info about role, state, and properties • When making form elements out of <div> <li> and/or images information about role, state and properties needs can be added with ARIA OpenAjax Alliance :Checkboxes using IMG elements for visual state http://oaa-accessibility.org/example/5/
  24. 24. 24 © 2013 IBM Corporation Simulating Checkboxes role="checkbox" and aria-checked <h3 id="cond">Sandwich Condiments</h3> … <li aria-describedby="cond desc2" aria-checked="true" tabindex="0" role="checkbox"> <img role="presentation" src="http://www.oaa- accessibility.org/media/examples/images/checkbox-checked- black.png">Tomato</li> … <div class="offscreen" id="desc2">These organically grown beef steak tomatoes are vine ripened.</div>
  25. 25. 25 © 2013 IBM Corporation Simulating Radio Buttons and Fieldset role="radio", role="radiogroup" <h3 id="rg2_label">Drink Options</h3> <ul aria-labelledby="rg2_label" role="radiogroup" class="radiogroup" id="rg2"> <li aria-checked="false" role="radio" tabindex="0" id="r6"> <img src="/images/radio- unchecked.gif" role="presentation">Water</li> <li aria-checked="false" role="radio" tabindex="-1" id="r7"><img src="/images/radio- unchecked.gif" role="presentation">Tea</li> … </ul> OpenAjax Alliance :Radiogroup http://oaa- accessibility.org/example/28/
  26. 26. 26 © 2013 IBM Corporation ARIA Techniques for Accessible Web Forms Introduction Enhancing basic forms Hide/show content Modals Simulating form elements Resources and Q&A
  27. 27. 27 © 2013 IBM Corporation ARIA Resources OpenAjax Alliance Accessibility Examples http://oaa-accessibility.org/examples Accessible jQuery-ui Components Demonstration http://hanshillen.github.io/jqtest WAI-ARIA Reference: roles, states and properties http://www.w3.org/TR/wai-aria/roles HTML5 Validator http://html5.validator.nu/ WAI-ARIA 1.0 Authoring Practices http://www.w3.org/TR/wai-aria-practices Opera: Introduction to WAI ARIA http://dev.opera.com/articles/view/introduction-to-wai-aria
  28. 28. 28 © 2013 IBM Corporation Questions? Aidan Tierney IBM Interactive | Toronto atierney@ca.ibm.com www.ibminteractive.com IBM Accessibility Human Ability and Accessibility Center www.ibm.com/able

×