Accessible Forms (INT-001)

Code keyboard and assistive technology (AT) accessible forms

Form controls must follow these guidelines so that users are able to input information and understand each field when using a keyboard for navigation and a screen reader. Forms should each have unique labels that describe the required input.

Group related fields with fieldsets or headings. Include proper labels on all fields with the for="control_ID" attribute attached

If a label is only necessary for screen reader users then it may be hidden with CSS provided the visual presentation implies the same information.

Required fields must be noted by adding aria-required=”true”. If helper text is used it must be programmatically associated with its respective field using aria-describedby.

As a general rule for form interaction, use native controls. If custom controls are used in place of native controls their interaction must mimic that of native controls.

Requirements

Fully Descriptive Control Labels (INT-WEB-001-01)

Form controls MUST have one unique label attribute that fully describes the control’s purpose, including any supplementary information that the visual presentation may also provide (e.g., related controls grouped together visually). The only exception to uniqueness is if fieldsets are used to make non-unique labels unique as described in INT-WEB-001-05.

Label Controls (or title) (INT-WEB-001-02)

Form controls MUST use a label unless it is not possible given the visual layout, at which point aria-labelledby MUST be used unless it is not possible, at which point aria-label MUST be used.

//You might have a hidden label for an expiration date because the labels are long but the controls are short.

<div id="monthLabel" class="screen-reader-only">Expiration Month</div>
<select aria-labelledby="monthLabel">
	<option>Jan</option>
	<option>Feb</option>
</select>
		

Hide Part of Labels (INT-WEB-001-03)

Some or all of a label can be hidden with CSS if the visual presentation provides the necessary context.

<label for="expMo">
	<span class="screen-reader-only">Expiration</span> Month
</label>
<select id="expMo">
	<option>Jan</option>
	<option>Feb</option>
</select>
		

Use Label for= (INT-WEB-001-04)

Form controls using a label to identify them MUST have only one label that is programmatically associated with the control using: label for=””.

<label for="cardNumber">Card Number</label>
<input id="cardNumber" type="number" />
		

Group Controls Using Fieldsets (INT-WEB-001-05)

When there is more than one distinct group of related form controls on a page, the related controls SHOULD be grouped programmatically using fieldsets with legends that describe the logical grouping if possible. Fieldset legends can be hidden off screen if they aren’t visually necessary.

<span>What is your favorite Gatorade Flavor?</span>
<fieldset>
	<legend class="screen-reader-only">Gatorade Flavor</legend>
	<input type="radio" id="Flavor1" /><label for="Flavor1">Cool Blue</label>
	<input type="radio" id="Flavor2" /><label for="Flavor2">Rain Berry</label>
	<input type="radio" id="Flavor3" /><label for="Flavor3">Glacier Freeze</label>
</fieldset>
		

Group Controls Using Headings (INT-WEB-001-06)

When there is more than one distinct group of related form controls on a page and the related controls are not grouped using fieldsets, they MUST be grouped programmatically using headings.

Use aria-required (INT-WEB-001-07)

Required controls MUST use the aria-required=”true” attribute.

<label for="fname">First Name</label>
<input id="fname" aria-required="true" type="text" />
		

Use aria-describedby (INT-WEB-001-08)

Helper text MUST be programmatically associated with a form control using aria-describedby=”ID of helper texts container”

<label for="password">Password</label>
<input id="password" aria-describedby="passwordHint" aria-required="true" type="password" />
<span id="passwordHint">Passwords must be at least 8 characters</span>
		


Test Procedures

Screen reader (INT-WEB-001-01-T)

Tab through each control on the page and confirm that each form control has a unique label attribute that fully describes the control's purpose, including any supplementary information that the visual presentation may also provide.

Screen reader (INT-WEB-001-02-T)

Tab through each control on the page and confirm that each form control label reads out properly.

Screen reader (INT-WEB-001-03-T)

Confirm that when visual presentation provides context not provided in a label, that the necessary context is read aloud by the screen reader along with the visible label.

Jim Thatcher > Form Labels (INT-WEB-001-04-T)

Run the Jim Thatcher Form Label favelet and confirm that there are no errors. Common errors are "No For", "No Match", and "2 Labels". 

Screen reader (INT-WEB-001-05-T)

If fieldsets are used on the page to group more than one distinct group of related form controls, confirm that the legends read properly, i.e., before each label for the controls in the given fieldset.

Headings Map (INT-WEB-001-06-T)

If more than one distinct group of related form controls is present and fieldsets are not used to group the controls, confirm that the controls are grouped using headings.

Screen reader (INT-WEB-001-07-T)

Tab through each control on the page and confirm that each required form control is announced as such by each supported screen reader.

Screen reader (INT-WEB-001-08-T)

Tab through each control on the page and confirm that helper text is read after the label for each form control that has helper text.


Related Content

WCAG Success Criteria

W3C Techniques

Common Failures

These materials and steps outlined on this website are provided “AS IS” and are intended for illustrative purposes only. They should not be relied upon for marketing, legal, tax, financial, regulatory or other advice. You are responsible for the legal aspects of any implementation of the concepts illustrated herein. Further, Visa neither makes any warranty or representation as to the completeness or accuracy of this information, nor assumes any liability or responsibility that may result from reliance on such information.  You should not act or rely on such content without seeking the advice of a professional.  All brand names, logos and/or trademarks are the property of their respective owners, are used for identification purposes only, and do not necessarily imply product endorsement or affiliation with Visa.