How to Create Accessible Online Forms

Are your web forms accessible? They should be – everyone benefits from a well-designed form. Failing to make your event registration form, newsletter signup, contact form, job application, or appointment request form accessible to everyone means a lost opportunity for both you and your visitor.

Accessibility means that everyone, including those with disabilities can access and navigate your web form or online survey. Users who are blind, visually or physically impaired, need to be able to determine the purpose of a specific form element and interact with it without the aid of a mouse.

Making your online forms more accessible is not as difficult as it might seem. It simply requires adding some useful tags in the markup and being careful about form layout.

If you are using an advanced online survey tool or form builder that is compliant with Section 508 of the Americans With Disability Act, it will automatically take care of this markup for you.

Good Form Design

The most important factor to consider when designing your form is usability. It is important to make sure your web forms are easy to understand and intuitive to use.

When it comes to navigating your form and labeling your fields, simple is best.
Keep it clean so users understand what information they need to complete. If your web form is long and complex, you will lose users along the way.

Imagine using a screen reader and you come to web page that is loaded with images and quirky messages. You need to cut through all of the noise and distractions to find the input fields. Are you that patient?

Keep your goal in mind; get your users to submit your form with the correct information!

Form Layout

A good form design is one that flows logically.

People tend to interact with forms in a consistent manner. Human-Computer-Interaction (HCI) models have been developed based on these consistent patterns. Adaptive technologies such as a screen and braille readers use these principles to interpret web pages and forms.

Laying out your forms according to HCI principles, will make your forms more accessible and easier to use. Not following expected practices will result in problems such as zip codes in your state field and an increase in abandonment.

So let’s discuss these principles as they relate to web forms.

Form Labels

Improve the layout of your online forms by placing form labels near the associated input field.

Exactly where you place the label varies depending on the format of the input field. The label for textbox fields is different than that of checkboxes or radios buttons.

Text Fields

For text fields, the text should precede the input field, either directly above or to the left. The inputs should be presented to the user like this:

text labels above field

Or, with the text field label positioned to the left:

LeftTextLabel

As screen readers encounter a text input, they expect that the text related to it comes before that input. If a label is displayed after the text input as in the example below, it has difficulty and assumes the next input field is the correct point of entry.

rightLabels

In the example above screen readers would interpret the first name label for the last name input field.

Radio Buttons and Checkboxes

Labels for radio buttons and checkboxes is the exact opposite from textboxes. The label is displayed to the right of the input

This allows for a neat layout with a nice alignment as in the examples below.
Radio Buttons:

radioButtonLabel

Checkboxes:

Checkbox Labels

Guide to Creating Accessible Surveys

Make it easy for anyone to take your surveys.

Get the Free Ebook

 

Group Together Related Fields

Use a logical order for reading and navigating the form. Like fields should be grouped together.

For instance billing information should be grouped together and may be different than shipping information.

Don’t deviate from standard formatting order. People are used to entering their street address before city, state and zip code. Because they expect fields to appear in this order, they tend to skim rather than read the label. You can expect problems if you stray from the norm.

Keyboard Accessibility

One of the top requirements for accessibility is the ability to navigate a form with only the use of a keyboard. This is crucial since a visually impaired user or someone who is lacking fine motor skills, will not be able to use a mouse. Assistive technologies such as screen readers and voice-input systems solely depend upon keyboard navigation.

Activating Drop Down Navigation Menus

Be careful when using JavaScript with drop down navigation menus. Your users may not have the option of using a mouse to scroll through the list. When using a keyboard, the first item in the drop-down-menu can unintentionally be activated when users attempt to tab through the list options.

If you are going to use a drop-down-list for navigation, provide a mechanism that allows the user to activate the selection. The example below uses a Go button, to achieve this:

Activate button

Difficulties With Tables

Tables can give your online form or survey a nice grid layout but use them with caution. If the label and the form element are separated it becomes hard for screen readers to interpret the field.

Screen readers decipher the table content in the order it appears in the source code. If the text and the form element that the text relates to are split, you will cause readability issues.

Provide Instructions and Visual Cues

If some of your fields are required (like name and email address), provide a cue or instruction that the field is required.

Simply making the font red or putting an asterisk next to it will not suffice for those who are visually impaired. By stating that the field is required, screen readers will alert the user.

Below is a good example of how to do this:

Required-Field-Example

Advanced form builders or survey tools that are 508 compliant automatically place the required attribute in the label element when you specify that an answer is required before the form can be submitted. Still, it is good practice to provide a cue so that those who are visually or physically impaired but are not using an assisted device may also be alerted.

Also provide instruction if you have fields that need to be entered in a certain format. For instance if you are collecting the users phone number and do not want any spaces or hyphens, state this. Below is an example:

phone-number-instructions

Problems With Interactive Question Types

While it is tempting to use some of the more interactive questions types that advanced online survey tools and form builders have, these are not keyboard accessible. These include image choice, ranking, and drag and drop question types.

There is certainly a good place for these question types, but your web form is not one of them.

Use Alternative Text for Images

If you are using images in your form or survey, you will need to add alternative text when you upload your image so that screen readers can present users with a text description in place of the image that they cannot see.

Button Messages

Be sure to include text on your buttons that indicates the purpose of the button. When the focus is placed on the button, screen readers will read this text. If you do not include text on your button, your users will be confused about its intent regardless if they are blind or sighted!

Click Here Links

Links that say “click here” are ambiguous for all users, let alone those who are using screen readers. Use descriptive text for your links.

If your link takes them to a feature or pricing page use this content in your text link.

Form Validation

Form validation ensures that the user provided necessary and properly formatted information need for a successful completion.

Some sites use client-side scripting for validation. By using JavaScript, users’ input can be validated as they type. This means a more responsive, visually rich validation.

The problem with client-side validation is that some some assistive devices do not support JavaScript.

Your form should be usable regardless of whether scripting is enabled or not. Server-side scripting solves this problem by validating the fields after the form has been submitted. Errors are then presented to the user for correction. While this method is not as fast, it is reliable.

Advanced survey and web form tools utilize both client-side and server-side scripting so that validation and error correction can be provided in a usable and accessible manner.

User-Accessible Forms

All users should be able to interact with your site. What many businesses fail to recognize is that they are losing an opportunity when they limit the ability for users interact with their product or service by not making their forms accessible.

To make your web forms more accessible remember to:

  • Keep your form simple and remove any unnecessary details and distractions that keep them from completing the form
  • Build forms that are easy to use and intuitive
  • Place form labels near the associated input field. Labels for text fields are placed above or to the right of the input field. Radio button and checkbox labels go to the right of the input field
  • Group related fields together
  • Ensure the forms are keyboard accessible and do not rely on JavaScript
  • Provide all necessary instructions, cues, and prompts

Test your site! The WAVE web accessibility evaluation tool is an easy-to-use tool that gives you feedback about the accessibility of your web page.

Discussion:
Many businesses believe that they don’t need to comply with Section 508 since they are not a government agency. But if you are a contractor or consultant working with a government agency your forms need to be 508 compliant.

How about you? Have you made your web forms user accessible?

Sources:

webaim.org
webstandards.org
devarticles.com
Jimtathcher.com

Written by

Sandy McKee

Sandy McKee is a digital marketer with over 10 years of experience in SEM, SEO, and social media marketing. She is a lover of books, fine food, and a mother of 2.

Join the Conversation
  • Gary Morin

    How
    well does SurveyGizmo work with Dragon NaturallySpeaking – or any speech
    recognition software – for both creating surveys and for taking surveys?
    My question is based on: how accessible to persons with dexterity
    impairments (NOT blindness and use with screen readers)? Thank you,

    • Sandy McKee

      Thanks for bringing this to our attention. We have not tested our application with this tool in the past but now that we are aware, it something we will consider in future developments.

    • Angela Tse

      Hi Gary — We’ve got some information on Voluntary Product Accessibility (VPAT) for surveytakers that we can send you. Just send us an email over at onboarding@sgizmo.com and we’d be happy to help. Our Onboarding Team should be able answer any questions you have about the use case you’re talking about (dexterity impairments for survey takers or creators, etc.) and the types of speech recognition software that might work well; you can give them a call at 1 (800) 609-6480 ext. 1. I hope this helps! And thanks so much for your question!

      • Gary Morin

        Thanks, Angela. I’ve also posted to your Facebook page – not sure who manages that, so let’s try to coordinate information on SG’s accessibility (this afternoon is taken up with Yammer!). My work email is moring@mail.nih.gov; direct is GaryMichaelMorin@gmail.com.

        • Angela Tse

          Hi Gary — Thanks for the info! I sent you over an email with that documentation I mentioned as well as a few other links you might be interested inside of our ticket support system, so let me know if you haven’t received it or if there’s anything else I can help out with!

  • WorcesterMaNative

    How
    well does SurveyGizmo work with Dragon NaturallySpeaking – or any speech
    recognition software – for both creating surveys and for taking surveys?
    My question is based on: how accessible to persons with dexterity
    impairments (NOT blindness and use with screen readers)? Thank you,

    • Angela Tse

      Hi Gary — We’ve got some information on Voluntary Product Accessibility (VPAT) for surveytakers that we can send you. Just send us an email over at onboarding@sgizmo.com and we’d be happy to help. Our Onboarding Team should be able answer any questions you have about the use case you’re talking about (dexterity impairments for survey takers or creators, etc.) and the types of speech recognition software that might work well; you can give them a call at 1 (800) 609-6480 ext. 1. I hope this helps! And thanks so much for your question!

      • WorcesterMaNative

        Thanks, Angela. I’ve also posted to your Facebook page – not sure who manages that, so let’s try to coordinate information on SG’s accessibility (this afternoon is taken up with Yammer!). My work email is moring@mail.nih.gov; direct is GaryMichaelMorin@gmail.com.

        • Angela Tse

          Hi Gary — Thanks for the info! I sent you over an email with that documentation I mentioned as well as a few other links you might be interested inside of our ticket support system, so let me know if you haven’t received it or if there’s anything else I can help out with!