Visa Accessibility - Accessible Forms (INT-001)

VGAR Interaction Requirements

Interaction

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).

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

Controls and form elements MUST include a label AND the label must include formatting if a specific format is required.

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

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

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="".

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

If there is more than one distinct group of related form controls on a page, the related controls MUST be grouped programmatically.

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

If 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. They MUST also be communicated in text either at the beginning of the form or in-line.

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".

Specify Input Purpose Programmatically (INT-WEB-001-09)

If an input field is used to collect information about the user and the field supports autocomplete then the input field's purpose is identified programmatically.

Visible and Programmatic Label Consistency (INT-WEB-001-10)

When a control's visual label differs from the programmatic/accessible name value then the programmatic/accessible name value includes the visual label text at the beginning of the text string.

Redundant Entry (INT-WEB-001-11)

If a page is contained within a process then information provided on the first step of the process is auto-filled in the next steps unless the information is required for security.

Multiple Authentication Methods (INT-WEB-001-12)

User authentication must avoid relying on a cognitive function test by providing multiple means of filling in authentication information.

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 field formatting is included in the label if necessary, AND 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.

Accessibility Insights (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 or ARIA groups are used on the page to group more than one distinct group of related form controls, confirm that the legends/ARIA legends read properly, i.e., before each label for the controls in the given group.

ANDI (INT-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)

Ensure that required fields are identified visually with text at the beginning of the form or in-line.
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.

Accessibility Insights (INT-WEB-001-09-T)

Run Accessibility Insights Fast Pass
Review the results of the Accessibility Insights Assessment automated checks under 'autocomplete-valid' and correct any errors detected.
Next, inspect the rendered DOM and confirm that any fields which have the HTML autocomplete or auto fill attribute have the correct, valid value for the specified input type.

ANDI (INT-WEB-001-10-T)

Use the ANDI tool and select Buttons/Links from the dropdown menu.
Use the ANDI Output section to determine whether or not any controls have a programmatic/accessible name value that is different from the visual label.
For any control that has a different visual label and ANDI output, confirm that the programmatic/accessible name value includes the visual label text at the beginning of the text string.
Repeat these steps using the ANDI Focusable Elements dropdown to review form fields.

Visual Inspection (INT-WEB-001-11-T)

Review the page to determine if it is a step in a process. Ensure that if information is provided in an earlier step in this process, that information is auto-filled in later steps.

Visual Inspection (INT-001-12-T)

Ensure that authentication form fields allow any of the following:

The fields allow autofill of information provided by the browser.
Information may be pasted into the form fields.
Biometrics can be used to sign into accounts.