Creating Accessible Forms

Srinivasu Chakravarthula

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 2

● Global leader in the area of Accessibility● Digital Accessibility is both our mission

and vision● 15+ years serving Government,

Corporate and other organizations

3

● 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

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

4

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 controlsTechnique G131: Providing Descriptive Labels

5

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>

6

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

7

Dynamic and Complex Forms

● Creating Accessible Date Picker● Example of a Shopping Cart ● Creating Accessible Character Counter

8

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 identificationUnderstanding SC 3.3.6 - Error prevention

9

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)

10

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

11

Q & A - Thank you!

Srinivasu ChakravarthulaTwitter: @CSrinivasu | http://deque.com

http://srinivasu.org | http://serveominclusion.com

12