This document discusses creating accessible forms and provides best practices. It begins with an introduction of the presenter and context about forms. It then covers basics like associating labels with form controls and using fieldsets and legends for groups. Making dynamic and complex forms accessible is addressed along with error prevention and handling. Relevant WCAG success criteria are summarized and resources for accessible forms are provided. The presentation concludes with time for questions.

1. Creating Accessible Forms
Srinivasu Chakravarthula

2. Agenda
● About Deque & Me
● Setting the context - Forms
● Remembering Basics
○ Associated labels
○ Group level form controls
○ Labels and instructions
● Making dynamic / complex forms accessible
● Error prevention and handling
● WCAG 2.0 Success Criteria related to forms
● Resources
● Q & A + Thank you
© 2015 - All Rights Reserved 1

3. ● Global leader in the area of Accessibility
● Digital Accessibility is both our mission
and vision
● 15+ years serving Government, Corporate
and other organizations
2
● Accessibility SME
● A decade of experience
● Formerly worked at BarrierBreak,
Yahoo, PayPal and HCL
● Accessibility is not just day job but
close to heart
● Loves networking, swimming, chess
and carrom
● Lives with wife and cute little VarshiAbout Deque and Me

4. Setting the Context - Forms
● Forms play a key role through life of a person - School
admission through to avail retiring benefits
● Online forms enable people with disabilities to be less
dependant
● Safe and secure way of storing data
● Easy to retrieve
3

5. Basics - Associated labels
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" />
<input type="checkbox" id="markuplang" name="computerskills" checked="checked">
<label for="markuplang">HTML</label>
Technique H44: Using Label Elements to associate text labels with form controls
Technique G131: Providing Descriptive Labels
4

6. Basics: Group Level Form elements
<fieldset>
<legend>The play <cite>Hamlet</cite> was written by:</legend>
<input type="radio" id="shakesp" name="hamlet" checked="checked" value="a">
<label for="shakesp">William Shakespeare</label><br />
<input type="radio" id="kipling" name="hamlet" value="b">
<label for="kipling">Rudyard Kipling</label><br />
<input type="radio" id="gbshaw" name="hamlet" value="c">
<label for="gbshaw">George Bernard Shaw</label><br />
<input type="radio" id="hem" name="hamlet" value="d">
<label for="hem">Ernest Hemingway</label><br />
<input type="radio" id="dickens" name="hamlet" value="e">
<label for="dickens">Charles Dickens</label>
</fieldset>
Technique H71: Providing description for group of form controls using <fieldset> and <legand>
5

7. Basics: Labels and Instructions
● It’s recommended to provide visible labels; Placeholder is NOT a label and causes
inconvenience to several users including those with cognitive disabilities
● Identify required fields
● Provide instructions, if input fields accepts data in only a specific format
Understanding SC 3.3.2 - Labels and Instructions
6

8. Dynamic and Complex Forms
● Creating Accessible Date Picker
● Example of a Shopping Cart
● Creating Accessible Character Counter
7

9. Error handling and prevention
● Identifying errors in a form submission
● Providing multiple cues
● Providing information to prevent user to
make mistakes during form submission;
Understanding SC 3.3.1 - Error identification
Understanding SC 3.3.6 - Error prevention
8

10. WCAG 2.0 Success Criteria related to forms
● 1.3.1 Info and Relationships: Information, Structure and relationships conveyed through
presentation can be programmatically determined or are available in text (Level A)
○ Associate labels either explicitly or implicitly
○ Ensure that group related form controls are marked up using <fieldset> and
<legend>
● 2.4.6 Headings and Labels: To describe topic / purpose (Level AA)
○ Provide descriptive labels
○ Provide visible labels
● 3.3.2 Labels or instructions: Labels or instructions are provided when content requires user
input (Level A)
○ Identifying required field
○ Error identification
○ Providing instructions
● 4.1.2 Name, Role and Value: For all user interface components (including but not limited
to: form elements, links and components generated by scripts), the name and role can be
programmatically determined; states, properties, and values that can be set by the user
can be programmatically set; and notification of changes to these items is available to user
agents, including assistive technologies. (Level A)
9

11. Resources
● Deque University
○ Code Examples and other resources
● Forms Concepts - Web Accessibility Tutorials from WAI, W3C
● Creating Accessible Forms - Advanced form labelling by WebAIM
● Form elements and accessibility - by Rakesh Paladugula
10

12. Q & A - Thank you!
Srinivasu Chakravarthula
Twitter: @CSrinivasu | http://deque.com
http://srinivasu.org | http://serveominclusion.com
11