Accessible forms


Published on

How to make forms accessible. Tips and Points to remember for creating accessible online forms.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Ask the attendees: what do they think prevents them from successfully completing and submitting any online form.
    Different problem faced:
    Ungrouped form fields
    Illogical tabbing order
    Drop-down list
    Color dependence
    No proper indication of mandatory fields
    Automatic refreshing feature
  • Notes for Trainer
    Problems faced …
    People using screen readers usually go through the whole form before starting to fill in the details
    Avoid validations on OnFocus
    Validations should be on form submission
    Ungrouped form fields
    Grouping related form elements gives a fair idea about the form fields
    If possible use heading elements, such as <h1>, <h2>, <h3> to provide headings to different groups (best prac.)
    Unordered tabbing order
    People who are habituated to use keyboard find it difficult to access the form fields if the tabbing order is set wrong
    Drop-down list
    On clicking every list item, the page should not auto refresh!
    Imagine, entering a birthdate 21st May 2005 in a form with list that refreshes the page when a list time is selected
    Color dependence
    Avoid lines such as, fields marked in red are mandatory
    No proper indication of mandatory fields
    Avoid representing mandatory fields with labels in Bold only….provide some other indicators to the users
    Automatic refreshing feature
    Refreshing the form after a specific time interval should be avoided
    At times, the form fields are not associated with the labels
    Use the “for” and “id” attribute to associate form field with label
    <label for="street">Enter your street address</label>
    <input type="text" name="street_address" id="street" />
  • Color dependence for mandatory fields
  • Example of a label with additional information: "Name (required):" and "State (if in India)".
  • Color dependence to identify mandatory fields
  • Accessible forms

    1. 1. Redefining Disability Accessible Forms By: Mamta Tandel BarrierBreak Technologies
    2. 2. Redefining Disability Objectives • Identify the need for accessible forms • Describe labels & instructions • Describe validations and error messages • Manage security & accessible
    3. 3. 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
    4. 4. 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
    5. 5. Redefining Disability Basic Form Accessibility • What to fill? – Labels – Mandatory fields • How to fill? – Basic instructions on filling form – Any particular format, if required
    6. 6. 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
    7. 7. Redefining Disability Labels - 2
    8. 8. 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
    9. 9. 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
    10. 10. 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
    11. 11. Redefining Disability Validations and Error Messages - 3
    12. 12. Redefining Disability Grouping form fields • Related form fields should be grouped – Radio button options – Checkbox options • Use fieldsets and legends
    13. 13. 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
    14. 14. 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
    15. 15. 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
    16. 16. 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
    17. 17. Redefining Disability Where to Contact Me? email:; office: +91-22-2686 0485/6 Connect with me at: MamtaTandel