Form Labels, Instructions, and Validation Flashcards
The most recommended method to programmatically associate a label and form field is:
A. aria-label attribute
B. title attribute
C. Explicit association
D. Implicit association
C. Explicit association
True or false: Icons must not be used as labels.
False
Why is the use of placeholder text as a form label bad for accessibility?
A. The default color for placeholder text does not meet color contrast requirements
B. Placeholder text disappears when data is entered in the field
C. Placeholder text is not supported in most browsers
D. A and B
E. All of the above
D. A and B
Which of the following statements about labels is NOT correct?
A. Labels should be visually close to their corresponding form fields.
B. Labels must be programmatically associated with their matching elements.
C. Labels should be close to their corresponding form fields in the DOM.
D. Labels should be close in length to the other labels on the page.
D. Labels should be close in length to the other labels on the page.
True or false: When multiple visible labels are used to label one field, the best attribute to associate each label with the field is aria-label.
False
True or false: When one visible label is used to label multiple fields, such as the three parts of a telephone number, each individual field must have a screen reader accessible label.
True
Which of the following methods can NOT be used to associate a group label with the fields it labels?
A. and
B. and
C. Nested fieldsets to denote groups within groups
D. role=”group” and aria-labelledby
A. and
True or false: Color must never be used in labels.
False
True or false: As long as a group label is programmatically associated with the group of fields it labels, its location in the DOM does not matter.
False
True or false: Group labels must be available to all users — sighted and non-sighted alike.
True
True or false: Adding the ARIA attribute aria-required=”true” tells every user that a form input is required.
False
Which of the following methods does NOT programmatically associate form instructions with their associated fields?
A. Using aria-describedby on the element
B. Providing instructions in regular text nearby the element
C. Placing instructions in the element
D. Placing instructions for a group of fields in the legend
B. Providing instructions in regular text nearby the element
Instructions that aren’t placed visually near their corresponding form fields can negatively impact which of the following user categories?
A. Users who are blind
B. Users who have low vision
C. Users with vestibular disorders
D. All of the above
B. Users who have low vision
Using a different text color for an input’s label to convey that input is required may exclude all of the following user categories EXCEPT:
A. Users who are blind
B. Users who have low vision
C. Users who are deaf or hard of hearing
D. Users who are colorblind
C. Users who are deaf or hard of hearing
Which of the following is the most semantically-appropriate way to associate instructions with an input?
A. Include the instructions within the text, along with the label/name of the input
B. Write the text in an aria-instructions attribute
C. Reference the ID of the instructions via aria-describedby
D. Include the instructions in the title attribute, to create a visible tooltip on mouse hover
C. Reference the ID of the instructions via aria-describedby
Which of the following methods is NOT a best practice for progressive form updates?
A. Provide a summary of users’ choices at the end of the form before submission
B. Include only one step on the screen at a time
C. Number the steps in the form
D. Manage keyboard focus as users move forward and backward through the form
E. Make dynamic changes in the form anywhere in the DOM
E. Make dynamic changes in the form anywhere in the DOM
True or false: From an accessibility perspective, focusing on a form element must not cause a change of context, but context changes may occur when a user hovers over a form element.
False
True or false: Changes in context can inhibit accessibility when those changes happen automatically and users aren’t allowed to request the changes in context.
True
To conform to ARIA specification, all of the following methods should be applied when creating a custom checkbox within a form EXCEPT:
A. Provide a visible and programmatically-associated label for the checkbox
B. Ensure the checkbox is assigned role=”checkbox”
C. Convey to users the state of the checkbox through toggling aria-expanded values
D. Make sure the Space bar can be used to change the state of the checkbox
C. Convey to users the state of the checkbox through toggling aria-expanded values
True or false: Custom form elements should be modeled after native HTML form elements.
True
What might happen if an aria-live announcement is tied to a blur event in a form?
A. A screen reader might read the announcement after it reads the next item in focus
B. A screen reader user might miss the announcement because the announcement competes with the screen reader reading the next item in focus
C. The aria-live announcement might be made before the screen reader reads the next item in focus
D. None of the above
B. A screen reader user might miss the announcement because the announcement competes with the screen reader reading the next item in focus
What should happen to the page title if a form submission causes the same page to reload?
A. Nothing should happen to the page title
B. The page title should reflect errors in form submission
C. The page title should reflect the status of the form submission
D. Form submission should not cause the page to reload
C. The page title should reflect the status of the form submission
Which is NOT a good technique for preventing errors in forms?
A. Provide clear, accurate, and accessible form labels
B. Use custom form inputs whenever possible
C. Give additional instructions for inputs if necessary
D. Provide visual cues that guide users through the form
E. Allow users to review their choices before and after they submit the form
B. Use custom form inputs whenever possible
True or false: In terms of accessibility, if error messages are programmatically associated with their form inputs, then providing visible error messages for form inputs is optional.
False
Which ARIA attribute should be used to identify which form elements have errors?
A. aria-required
B. aria-describedby
C. aria-readonly
D. aria-invalid
D. aria-invalid
Which ARIA attribute should be used to provide more information about an error in a form element?
A. aria-required
B. aria-describedby
C. aria-readonly
D. aria-invalid
B. aria-describedby
Which of the code examples below best adheres to the requirements and best practices for error feedback?
A. Error - Password:
B. Password:
C. <p>Error: Password must be at least be 8 characters</p> Password:
D. <p>Error: Password must be at least be 8 characters</p> Password:
C. <p>Error: Password must be at least be 8 characters</p> Password:
True or false: Regions like aria-live and role=”alert” can be used to convey success messages as long as success messages aren’t hidden from visual users.
True
True or false: The basic keyboard commands for interacting with HTML form controls are common across all screen reader / browser combinations.
True
Which one of the following is NOT a screen reader mode?
A. Document mode B. Forms mode C. Caption mode D. Table mode E. Application mode
C. Caption mode
Using the Tab key to move through a page will put focus on all of the following elements EXCEPT:
A. Form fields
B. Links
C. Elements with tabindex=”0”
D. Elements with tabindex=”-1”
D. Elements with tabindex=”-1”
True or false: The default mode for most screen readers is forms mode.
False
True or false: Since plain text is non-focusable, text such as instructions or formatting hints should not be placed in the middle of a form unless the text is programmatically associated with a focusable element.
True
True or False: Placeholder text MUST NOT be used as the only method of providing a label for a text input
True
May, Should, or Must:
A label X be adjacent in the DOM to its corresponding element.
Should
May, Should, or Must:
Group labels X be visually adjacent to the grouped elements.
Should
May, Should, or Must:
The form validation process X include an error message explaining that a field is required if the field isn’t identified as required both visually and programmatically in the form’s initial state.
Must
The more interactive a form element or process, the more attention needs to be given to accessibility with respect to…
(3 items)
Focus management
Setting and updating ARIA names, roles, and values, where necessary
ARIA live announcements, where necessary
May, Should, or Must:
Icons X be used as visual labels (without visual text) if the meaning of the icon is visually self-evident AND if there is a programmatically-associated semantic label available to assistive technologies.
May
Fill in the Blank:
The purpose for each common input field that collects an individual’s personal data MUST be programmatically defined based on the list of ….
53 Input Purposes for User Interface Components.
May, Should, or Must:
Error feedback X be made available immediately after form submission (or after an equivalent event if there is no form submission event).
Should
May, Should, or Must:
Success confirmation feedback X be meaningful and X be visible
Success confirmation feedback SHOULD be meaningful and MUST be visible
MUST (not), SHOULD (not), or MAY (not)
Hovering over an element with the mouse X automatically trigger a change of context, unless the user has been adequately advised ahead of time.
MUST NOT
Fill in the Blank:
Updates and state changes that cannot be communicated through HTML or ARIA methods SHOULD be communicated via …
ARIA live messages.
Fill in the Blank:
Instructions for an element MUST NOT rely solely on references to …
sensory characteristics.
Fill in the Blank:
Group labels MUST be programmatically-associated with the group if …
the individual labels for each element in the group are insufficient on their own.
