Redefining Disability

Accessible Forms

By:Mamta TandelBarrierBreak Technologies

Redefining Disability

Objectives

• Identify the need for accessible forms

• Describe labels & instructions

• Describe validations and error messages

• Manage security & accessible

Redefining Disability

Forms• Increase in use of Online forms• Used anywhere and everywhere

– Admission forms– Passport application– Ticket booking– Payment of phone bills

• Accessible forms:– Anyone and everyone can fill and submit it– Irrespective of the type of:

• User group • Technology• Browser

Redefining Disability

General Problems with Forms• Missing labels• Missing form instructions• Placement of error messages• Inaccurate error messages• Ungrouped form fields• Affected user groups:

– Senior citizens– People using assistive technologies – People with learning disabilities

Redefining Disability

Basic Form Accessibility

• What to fill?– Labels– Mandatory fields

• How to fill?– Basic instructions on filling form– Any particular format, if required

Redefining Disability

Labels - 1• Describe the purpose and function of form

elements• Tells the user what information to provide in the

form element• Not mere ‘text’, but use of <label> tag• Labels should be:

– Provided to all form fields– Clear, Unique and Descriptive– Indicative of whether field is mandatory– Placement of label text– With appropriate punctuations

Redefining Disability

Labels - 2

Redefining Disability

Instructions• Information about how details need to be

provided in the form• Identify mandatory fields• Identify any important field that requires

input in specific format– Telephone– Date format

• Instructions should be:– Complete and descriptive– Placed before the form starts**

**Between/besides form fields, with ARIA implemented

Redefining Disability

Validations and Error Messages - 1• Indicates error occurred while entering form

details• Should be clear and descriptive • May indicate the correct format of entering

data• Can be displayed:

– As the user enters incorrect data – ARIA– On form submission

• Avoid displaying besides form fields on form submission

• Can be through:– Client-side scripts– Server-side scripts

Redefining Disability

Validations and Error Messages - 2• Techniques:

– Highlight form fields with error messages along with textual description as it helps:

• Learning impaired

• Senior citizens

• Users with Low vision

– List the numbers of errors– Ideally present in the form of list– Can link the error to the form field with inaccurate data– Avoid displaying alert messages one by one– Retain correct values so that users don’t have to re-enter fields

with accurate data– Upon successive form submission, provide a message to

indicate that the form is submitted successfully and next step if any

Redefining Disability

Validations and Error Messages - 3

Redefining Disability

Grouping form fields

• Related form fields should be grouped – Radio button options– Checkbox options

• Use fieldsets and legends

Redefining Disability

Form Security • CAPTCHA

– Completely Automated Public Turing-test to tell Computers and Humans Apart

– Used for securing forms against SPAMS

• CAPTCHA is:– Distorted Image with numbers and

characters– User has to enter image contents for

successful form submission – Alternative is usually provided in audio

format

Redefining Disability

Form Security and Accessibility

• CAPTCHA creates access issues for:– Visually impaired– Learning impaired– Senior citizens

• Alternatives for CAPTCHA:– Audio CAPTCHA: Sound clarity issue– Text CAPTCHA: Set of questions that

different users groups can answer

Redefining Disability

Points to remember…

• Important to plan and design form– Descriptive Labels– Grouping form elements– Appropriate form instructions– Placement of instructions– Appropriate error messages– Placement error messages– Form security

Redefining Disability

Let Technology be Inclusive!• Assistive Technology

Products

– Visual Impairment

– Hearing Impairment

– Mobility Impairment

– Learning Impairment

– Elderly

• Accessibility Services– Accessible Web Development

– POUR Accessibility Testing

• Design Review• Template Review• Component Test• Product Accessibility

Testing• Task Oriented Testing

– Accessible Conversion• Digital Talking Book• PDF Conversion

• Events and Initiatives

Redefining Disability

Where to Contact Me?

email: mamta.tandel@barrierbreak.com;

mamta.tandel@n-syst.com

office: +91-22-2686 0485/6

Connect with me at:

MamtaTandel