Form Elements and Accessibility

Hyperlinks and forms are the most commonly found interactive elements on the web page. Providing accessibility features for forms is the most easiest but commonly ignored part while developing a website. Commonly observe forms on website are contact form, purchase form, sign up form etc. In this article let us understand the step by step. procedure to develop an accessible form. In the next article we will discuss how to make the validation and error handling accessible.

Step 1: Using native HTML form elements.

To develop a web form one should know the native HTML tags and attributes used to create that particular element. Eg: use of input tag, the attributes used to define the text field, checkbox, radio button, combo box etc. In certain cases instead of a native element a custom control is used. We will understand what a custom control and how to identify in a while.

The following element is a native HTML text field.


<br /> <input type=”text” /><br />

The following is a native HTML radio button.


<br /> <input type="radio" /><br />

The following is a native HTML checkbox.


<br /> <input type=”checkbox” /><br />

All the above elements can be made available using an image as shown below.

Custom UI Text_box
Custom UI Radio button
Custom UI Checkbox

For the native elements when the user navigates the assistive technology accurately announces the type and state of the form elements. Eg: A radio button announces radio button not checked and check box announces checkbox not checked. In case of custom control it will neither announce the type nor the state unless the author makes the required coding.

WCAG 2.0 Check-point

4.1.2 Name, Role, Value (Future link)

Step 2: Providing accessible label

In step one we have just defined the form element. For the user to identify the action associated with it or to enter some information, select an option a label or accessible name is required. The label should be provided for form element using the label tag. Except for a button all other form elements support label tag.

The following text field has a label First Name.



<br /> <label>First Name</label><br /> <input type="text" /><br />

The following check box has a label “I accept the terms & conditions”.



<br /> <input type="checkbox" /><br /> <label>I accept the terms &#038; Conditions</label><br />

Note: All the form elements have the label before the form element accept for radio buttons and checkboxes.

Providing label for a form button

When a native form button is developed provide a value attribute that describes the action associated with it.

The following form element is a login button.


<br /> <input type="button" value="login" /><br />

When a visible label cannot be provided for a form element a “”title” attribute or aria-label can serve the purpose of label.

WCAG 2.0 Check-point

3.3.2 Labels or instructions (Future Link)

Step 3: Associating the labels with form elements

Once the label is provided it should be associated with it’s form field. The association can be made using the “for”and “id ”attributes.

For the following text field the first name label is associated.


<label for="fname">First Name</label> <input type="text" id="fname" />

The following check box has a label “I accept the terms & conditions” and is properly associated with for and id attributes.


<input type="checkbox" id="accept" /> <label for="accept">I accept the terms and Conditions</label>

In case of title and aria-label they will be associated by default.

WCAG 2.0 Check-point

1.3.1 Info and relationship (Future link)

Step 4: Providing descriptive labels

The labels provided for the form fields should be descriptive. Users should be able to clearly identify the text that has to be input in the text field, should be able to identify the purpose of a dropdown, should be able to identify the action associated with a button etc. If the same label should be provided in two different places of the page ensure that the user is able to clearly differentiate them.

For example on a page if Father’s name and Mother’s name should be provided, mention them as “Father’s name”and “Mother’s Name separately instead of mentioning the label as Name twice in the same page.

WCAG 2.0 Check-point

2.4.6 Headings and Labels

Step 5: Grouping related form elements

When a set of elements form a group user should be intimated that these elements belong to a group. For example Parrot, peacock, dove, crow belong to a group called birds. Tiger, lion, elephant, dog belong to a group called animals. To group similar elements like this a fieldset and legend tags are used. A fieldset will group the elements and the legend provides a label for the group. Below is an example to explain the same.

My favorate birds









</p> <fieldset> <legend>My favorate birds</legend> <p><input type="checkbox" id="b1" /><br /> <label for="b1">Parrot</label><br /> <input type="checkbox" id="b2" /><br /> <label for="b2">Peacock</label><br /> <input type="checkbox" id="b3" /><br /> <label for="b3">Dove</label><br /> <input type="checkbox" id="b4" /><br /> <label for="b4">Crow</label><br /> </fieldset> <p>
Which is the national animal of India









</p> <fieldset> <legend>Which is the national animal of India</legend> <p><input type="radio" id="a1" /><br /> <label for="a1">Tiger</label><br /> <input type="radio" id="a2" /><br /> <label for="a2">Lion</label><br /> <input type="radio" id="a3" /><br /> <label for="a3">Elephant</label><br /> <input type="radio" id="a4" /><br /> <label for="a4">Dog</label><br /> </fieldset> <p>

WCAG 2.0 Check-point

1.3.1 Info and Relationship (Future link)

Step 6: Providing additional instructions for form elements

Certain form elements need additional instructions to fill the element. For example the format of the date to be entered, password criteria, user id criteria etc. Providing instructions should allow the user to minimize making mistakes. The instructions should be placed before the field, incase if the instruction is after the field content authors should programmatically relate the instruction with the field allowing the assistive technologies to announce when user focus on the field. The programmatic relation can be provided using techniques like aria-describedby. Below is a simple date field example.


MM/DD/YYYYformat

<br /> <label for="dob">Date of Birth</label><br /> <span>MM/DD/YYYYformat</span><br /> <input type="text" maxlength="10" id="dob" /><br />

Below is an example using aria-describedby



MM/DD/YYYYformat
<br /> <label for="dob">Date of Birth</label><br /> <input type="text" aria-describedby="inst" maxlength="10" id="dob" /><br /> <span id="inst">MM/DD/YYYYformat</span><br />

Take care that the instructions are not based on sensory characteristics such as shape, size, visual location, orientation, sound or color.

WCAG 2.0 Check-point

3.3.2 labels or instructions (Future link)

>Step 7: Informing the state of form elements.

The native HTML elements have the capability of announcing the state of radio buttons or checkboxes without any additional effort from authors. However in certain cases where the form element is in disabled state or in readonly state etc content authors should ensure that the state of the field is properly conveyed to the users of assistive technology. Using attributes such as disabled=”disabled”, readonly=”readonly” screen readers will identify the state. Aria-disabled=”true” and aria-readonly=”true” can also serve the same purpose .

The below text field is readonly.



<br /> <label for="total">Grand Total</label><br /> <input type="text" readonly="readonly" id="total" /></p> <p>

WCAG 2.0 Check-point

4.1.2 Name, Role, Value (Future link)

Step 8: Keyboard accessibility for form elements.

All the form elements should be navigable and actionable using a keyboard. If a radio button cannot be selected by a keyboard or a selection cannot be made from a dropdown or a form cannot be submitted using a keyboard alone certain user groups will not be able to use the form. If a login button can only be activated by a mouse, screen reader and keyboard only users never can log into the portal.

The following is a login button which cannot be activated with a keyboard.

Login
<br /> <img src="https://i1.wp.com/www.maxability.co.in/wp-content/uploads/2015/03/login_button.jpg?resize=225%2C120" alt="Login" width="225" height="120" class="alignnone size-full wp-image-1077" onclick="somefunction" srcset="https://i1.wp.com/www.maxability.co.in/wp-content/uploads/2015/03/login_button.jpg?w=225 225w, https://i1.wp.com/www.maxability.co.in/wp-content/uploads/2015/03/login_button.jpg?resize=150%2C80 150w" sizes="(max-width: 225px) 100vw, 225px" data-recalc-dims="1" /><br />

WCAG 2.0 Check-point

2.1.1 Keyboard

Step 9: Providing the logical order for form elements.

The tabbing order of form elements should be logical and intuit. A sequential order should be maintained wile the user tabs through the form. In the below example while tabbing user will be navigated from First name to Gender before navigating to last name and then to the age fields.

</p> <table role="presentation"> <tr> <td> <input type="text" aria-label="First Name" /> </td> <td> <input type="text" aria-label="Gender" /> </td> </tr> <tr> <td> <input type="text" aria-label="Last Name" /> </td> <td> <input type="text" aria-label="Age" /> </td> </tr> </table> <p>

WCAG 2.0 Check-point

2.4.3 Focus Order

Step 10: Keyboard focus visibility.

Take care that the keyboard indicator is visible on the form fields when they are focused. This wil enable the low vision users to keep track of the elements they are navigating. In some cases the default focus indicator is not sufficient to allow the users to identify the focus of form fields. In such scenarios authors should be able to provide author defined CSS with more contrasting colors. Below is one such example style.

</p> <style> input.text:focus { background-color: #7FFF00; color: #000; } input[type=checkbox]:focus + label, input[type=radio]:focus + label { background-color: #FF6; color: #000; } </style> <p>

WCAG 2.0 Check-point

2.4.7 Focus visible

Step 11: Change on input

Making a selection from the user interphase element will some time cause the change of context without the intimation to the user prior to the change. For example, When the user selects a language from the language dropdown automatically the language of the page changes without allowing the user to confirm the change. Ensure that the change occurs to the page only when the user selects or input something and confirms the change. Providing a confirm button or a go button allowing the user to confirm the change is vital.

WCAG 2.0 Check-point

3.2.2 On input (Future Link)

Step 12: Use of ARIA.

ARIA can be extensively used to Make a form accessible. In the below example the login button shown above will be made accessible using ARIA.

Login
<br /> <img src="https://i1.wp.com/www.maxability.co.in/wp-content/uploads/2015/03/login_button.jpg?resize=225%2C120" alt="Login" width="225" role="button" tabindex="0" height="120" class="alignnone size-full wp-image-1077" onclick="somefunction" srcset="https://i1.wp.com/www.maxability.co.in/wp-content/uploads/2015/03/login_button.jpg?w=225 225w, https://i1.wp.com/www.maxability.co.in/wp-content/uploads/2015/03/login_button.jpg?resize=150%2C80 150w" sizes="(max-width: 225px) 100vw, 225px" data-recalc-dims="1" /><br />

In the above example, alt provides the accessible label, aria-role allows the user to identify it as a button, and tabindex will allow the keyboard to navigate to it.

Following are few aria roles, states and properties used to develop an accessible form.

6 Comments to "Form Elements and Accessibility"

  1. Surya jyothi's Gravatar Surya jyothi
    March 8, 2015 - 8:38 pm | Permalink

    Very very knowledgable and useful.

  2. March 10, 2015 - 1:25 am | Permalink

    Thanks for the great article, forms are obviously extremely important when supporting accessibility.
    Some feedback:
    a) For your forms article, please add name attr to radio example.
    b) use unique ID in second example under 1.3.1
    c) for 3.2.2, alternatives that are better to use are: with image inside or input type=image

  3. Iza Bartosiewicz's Gravatar Iza Bartosiewicz
    March 10, 2015 - 10:46 am | Permalink

    Hi Rakesh,
    Is there a reason why you’ve added line breaks to separate radiobuttons and checkboxes from their labels? (examples in 2.4.6 Headings and Labels). Keeping them on the same line makes it clearer which button belongs to which label.

Comments are closed.