ARIA Techniques for Accessible Web Forms

© 2013 IBM Corporation

ARIA Techniques for

Accessible Web Forms

Aidan Tierney – Senior Accessibility Consultant

IBM Interactive | Toronto

May 28, 2013

http://www.ibminteractive.com/

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


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


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

http://www.w3.org/WAI/intro/


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


• Creating form inputs without HTML form elements


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


• role=“checkbox”, role=“radio”, aria-checked



Introduction


Hide/show content

Modals


Resources and Q&A


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?

http://www.nvaccess.org/


Required Fields

aria-required

<label for="lastName">Last Name*</label>

<input id="lastName" type="text" aria-

required="true">


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: [email protected]</div>


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:[email protected]</div>



Introduction


Hide/show content

Modals


Resources and Q&A


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:


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:


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/


http://blog.paciellogroup.com/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/


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



Introduction


Hide/show content

Modals


Resources and Q&A


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


https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role


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


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

http://juicystudio.com/article/custom-built_dialogs.php


Modals – Example

Accessible jQuery-ui Components Example


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




Introduction


Hide/show content

Modals


Resources and Q&A


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




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>


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/




Introduction


Hide/show content

Modals


Resources and Q&A


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

http://oaa-accessibility.org/examples

http://hanshillen.github.io/jqtest

http://www.w3.org/TR/wai-aria/roles

http://html5.validator.nu/

http://www.w3.org/TR/wai-aria-practices

http://dev.opera.com/articles/view/introduction-to-wai-aria


Questions?

Aidan TierneyIBM Interactive | Toronto

[email protected]

www.ibminteractive.com

IBM Accessibility

Human Ability and Accessibility Center

www.ibm.com/able

http://www.ibminteractive.com/

http://www-03.ibm.com/able/

Technology

ARIA Techniques for Accessible Web Forms