© 2013 IBM Corporation
ARIA Techniques for
Accessible Web Forms
Aidan Tierney – Senior Accessibility Consultant
IBM Intera...
2 © 2013 IBM Corporation
ARIA Techniques for Accessible Web Forms
Introduction
Enhancing basic forms
Hide/show content
Mod...
3 © 2013 IBM Corporation
Session Objectives
Goals of session:
• Understand how ARIA can enhance forms
• See and hear how A...
4 © 2013 IBM Corporation
What is ARIA?
WAI-ARIA
• W3C Web Accessibility Initiative - Accessible Rich Internet Applications...
5 © 2013 IBM Corporation
Session Topics
Enhancing a basic form with ARIA
• Required fields
• Input-level instructions and ...
6 © 2013 IBM Corporation
ARIA Syntax
Enhancing a basic form with ARIA
• aria-required
• aria-describedby
• aria-invalid
• ...
7 © 2013 IBM Corporation
ARIA Techniques for Accessible Web Forms
Introduction
Enhancing basic forms
Hide/show content
Mod...
8 © 2013 IBM Corporation
Basic Form Demo – Before & After ARIA
Before
• As we go through the form with the NVDA screen rea...
9 © 2013 IBM Corporation
Required Fields
aria-required
<label for="lastName">Last Name*</label>
<input id="lastName" type=...
10 © 2013 IBM Corporation
Input-level Instructions and Expected Data Format
aria-describedby
<label for="emailAddress">Ema...
11 © 2013 IBM Corporation
Validation and Error Messaging
aria-invalid and role="alert"
<label for="emailAddress">Email Add...
12 © 2013 IBM Corporation
ARIA Techniques for Accessible Web Forms
Introduction
Enhancing basic forms
Hide/show content
Mo...
13 © 2013 IBM Corporation
Hide/Show – Closed State
aria-controls, aria-expanded
<button aria-controls="more-questions" id=...
14 © 2013 IBM Corporation
Hide/Show – Expanded State
aria-controls, aria-expanded
<button aria-controls="more-questions" i...
15 © 2013 IBM Corporation
Hiding Content from Screen Readers
display:none
• Screen readers do not read content with CSS di...
16 © 2013 IBM Corporation
Disabled and Read-Only Elements
aria-disabled
• Indicates that the element is perceivable but di...
17 © 2013 IBM Corporation
ARIA Techniques for Accessible Web Forms
Introduction
Enhancing basic forms
Hide/show content
Mo...
18 © 2013 IBM Corporation
Modals
Modals often used for forms
 dialog role is used when the user is
expected to provide da...
19 © 2013 IBM Corporation
Modals – ARIA syntax
role="alertdialog" and aria-labelledby
<div role="alertdialog" aria-labelle...
20 © 2013 IBM Corporation
Modals – Focus
Focus Management
• Modal needs to retain focus until the dialog is closed or dism...
21 © 2013 IBM Corporation
Modals – Example
Accessible jQuery-ui Components Example
http://hanshillen.github.io/jqtest/#got...
22 © 2013 IBM Corporation
ARIA Techniques for Accessible Web Forms
Introduction
Enhancing basic forms
Hide/show content
Mo...
23 © 2013 IBM Corporation
Simulating HTML Form Elements
HTML inputs vs. custom-made widgets
• <input>, <select> and other ...
24 © 2013 IBM Corporation
Simulating Checkboxes
role="checkbox" and aria-checked
<h3 id="cond">Sandwich Condiments</h3>
…
...
25 © 2013 IBM Corporation
Simulating Radio Buttons and Fieldset
role="radio", role="radiogroup"
<h3 id="rg2_label">Drink O...
26 © 2013 IBM Corporation
ARIA Techniques for Accessible Web Forms
Introduction
Enhancing basic forms
Hide/show content
Mo...
27 © 2013 IBM Corporation
ARIA Resources
OpenAjax Alliance Accessibility Examples
http://oaa-accessibility.org/examples
Ac...
28 © 2013 IBM Corporation
Questions?
Aidan Tierney
IBM Interactive | Toronto
atierney@ca.ibm.com
www.ibminteractive.com
IB...
Upcoming SlideShare
Loading in …5
×

ARIA Techniques for Accessible Web Forms

736 views
587 views

Published on

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

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
736
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×