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

1. © 2013 IBM Corporation
ARIA Techniques for
Accessible Web Forms
Aidan Tierney – Senior Accessibility Consultant
IBM Interactive | Toronto
May 28, 2013

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 © 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 © 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 © 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 © 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 © 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 © 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 © 2013 IBM Corporation
Required Fields
aria-required
<label for="lastName">Last Name*</label>
<input id="lastName" type="text" aria-
required="true">

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 © 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 © 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 © 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 © 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 © 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 © 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 © 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 © 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 © 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 © 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 © 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 © 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 © 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 © 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 © 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 © 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 © 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 © 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