creating accessible forms
TRANSCRIPT
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