Creating Accessible Forms
Download as PPTX, PDF0 likes473 views
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.
Creating Accessible Forms
- 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