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.
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>
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.
WCAG Success Criteria
- ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls
- ARIA2: Identifying a required field with the aria-required property
- ARIA16: Using aria-labelledby to name regions and landmarks
- ARIA17: Using grouping roles to identify related form controls
- G140: Separating information and structure from presentation to enable different presentations
- H44: Using label elements to associate text labels with form controls
- H65: Using the title attribute to identify form controls when the label element cannot be used
- H71: Providing a description for groups of form controls using fieldset and legend elements
- H85: Using OPTGROUP to group OPTION elements inside a SELECT
- SCR21: Using functions of the Document Object Model (DOM) to add content to a page
- G162: Positioning labels to maximize predictability of relationships
- H91: Using HTML form controls and links
- G89: Providing expected data format and example
- G184: Providing text instructions at the beginning of a form or set of fields that describes the necessary input
- G90: Providing keyboard-triggered event handlers
- G131: Providing descriptive labels
- F54: Failure of Success Criterion 2.1.1 due to using only pointing-device-specific event handlers (including gesture) for a function
- F55: Failure of Success Criteria 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus when focus is received
- F86: Failure of Success Criteria 2.4.4, 2.4.9, and 4.1.2 due to not providing an accessible name for an image which is the only content in a link