VGAR Interaction Requirements

VGAR Overview Requirements Test Procedures PDF Tools
Page
Navigation

Interaction

Content
Visual

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)

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

//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 MAY 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)

If there is more than one distinct group of related form controls on a page, the related controls MUST be grouped programmatically. This may be done using either fieldset/legend or ARIA group role/text container. Text describing the logical grouping MAY be hidden off-screen if it isn't visually necessary.

<fieldset>
	<legend>What is your favorite 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>

<!-- The other grouping technique using ARIA attributes is shown below -->

<div role="group" aria-labelledby="UniqueID">
    <span id="UniqueID">What is your favorite Gatorade flavor?</span>
    <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>
</div>

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.

<!-- Instructions should go at the top of the form -->
<div>* indicates required fields</div>
<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>

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)

1) Ensure that required fields are identified visually with text at the beginning of the form or in-line.

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

  1. Run Accessibility Insights Fast Pass
  2. Review the results of the Accessibility Insights Assessment automated checks under 'autocomplete-valid' and correct any errors detected. 
  3. 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)

  1. Use the ANDI tool and select Buttons/Links from the dropdown menu.
  2. 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.
  3. 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.
  4. 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

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.