Form Labels, Instructions, and Validation

Question 1

The most recommended method to programmatically associate a label and form field is:

A. aria-label attribute
B. title attribue
C. Explicit association
D. Implicit association

Answer 1

C. Explicit association

Question 2

True or false: Icons must not be used as labels.

Answer 2

False

Question 3

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

Answer 3

D. A and B

Question 4

Which of the following statements about labels are correct: (Select all that apply)

A. Labels should be visually close to their corresponding form fields
B. Labels should be similar in color to their corresponding form fields
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

Answer 4

A. Labels should be visually close to their corresponding form fields
C. Labels should be close to their corresponding form fields in the DOM

Question 5

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.

Answer 5

False

Question 6

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.

Answer 6

True

Question 7

Which of the following methods can be used to associate a group label with the fields it labels? (Select all that apply)

A. [fieldset] and [label]
B. [fieldset] and [legend]
C. Wrap the group of fields with a [label]
D. role=”group” and aria-labelledby

Answer 7

B. [fieldset] and [legend]

D. role=”group” and aria-labelledby

Question 8

True or false: Color must never be used in labels.

Answer 8

False

Question 9

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.

Answer 9

False

Question 10

True or false: Group labels must be available to all users - sighted and non-sighted alike.

Answer 10

True

Question 11

True or false: Adding the ARIA attribute aria-required=”true” tells every user that a form input is required.

Answer 11

False

Question 12

Which of the following methods can be used to provide form instructions for specific fields programmatically? (Select all that apply)

A. Using aria-describedby on the [input] element
B. Providing instructions in regular text nearby the [input] element
C. Placing instructions in the [label] element
D. Providing instructions about form fields before the form itself

Answer 12

A. Using aria-describedby on the [input] element

C. Placing instructions in the [label] element

Question 13

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

Answer 13

B. Users who have low vision

Question 14

Using a different text color for an input’s label to convey that input is required may exclude which of the following user categories? (Select all that apply)

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

Answer 14

A. Users who are blind
B. Users who have low vision
D. Users who are colorblind

Question 15

Which of the following is the most semantically-appropriate way to associate instructions with an input?

A. Include the instructions within the [label] 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

Answer 15

C. Reference the ID of the instructions via aria-describedby

Question 16

Which of the following methods are considered best practices for progressive form updates? (Select all that apply)

A. Provide a summary of users’ choices at the end of the form before submission
B. Include multiple steps on the screen at the same 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

Answer 16

A. Provide a summary of users’ choices at the end of the form before submission
C. Number the steps in the form
D. Manage keyboard focus as users move forward and backward through the form

Question 17

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.

Answer 17

False

Question 18

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.

Answer 18

True

Question 19

To conform to ARIA specification, which of the following methods should be applied when creating a custom checkbox within a form? (Select all that apply)

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

Answer 19

A. Provide a visible and programmatically-associated label for the checkbox
B. Ensure the checkbox is assigned role=”checkbox”
D. Make sure the Space bar can be used to change the state of the checkbox

Question 20

True or false: Custom form elements should be modeled after native HTML form elements.

Answer 20

True

Question 21

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

Answer 21

B. A screen reader user might miss the announcement because the announcement competes with the screen reader reading the next item in focus

Question 22

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

Answer 22

C. The page title should reflect the status of the form submission

Question 23

What are some techniques that can be used to prevent errors in forms? (Select all that apply)

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. Present all options and possibilities to users as they interact with the form
F. Allow users to review their choices before and after they submit the form

Answer 23

A. Provide clear, accurate, and accessible form labels
C. Give additional instructions for inputs if necessary
D. Provide visual cues that guide users through the form
F. Allow users to review their choices before and after they submit the form

Question 24

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 are optional.

Answer 24

False

Question 25

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

Answer 25

D. aria-invalid

Question 26

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

Answer 26

B. aria-describedby.

Question 27

Which of the code examples below best adheres to the requirements and best practices for error feedback?

A. [label for=”password”] Error - Password: [/label] [input type=”password” name=”password” id=”password” aria-invalid=”true”]
B. [label for=”password”] Password: [/label] [input type=”password” name=”password” id=”password” aria-required=”true” aria-invalid=”true”]
C. [p id=”passwordError”]Error: Password must be at least be 8 characters[/p] [label for=”password”] Password: [/label] [input type=”password” name=”password” id=”password” aria-required=”true” aria-invalid=”true” aria-describedby=”passwordError”]
D. [p]Error: Password must be at least be 8 characters[/p] [label for=”password”] Password: [/label] [input type=”password” name=”password” id=”password” aria-required=”true” aria-invalid=”true”]

Answer 27

C. [p id=”passwordError”]Error: Password must be at least be 8 characters[/p] [label for=”password”] Password: [/label] [input type=”password” name=”password” id=”password” aria-required=”true” aria-invalid=”true” aria-describedby=”passwordError”]

Question 28

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.

Answer 28

True

Question 29

True or false: The basic keyboard commands for interacting with HTML form controls are common across all screen reader / browser combinations.

Answer 29

True

Question 30

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

Answer 30

C. Caption mode

Question 31

Using the Tab key to move through a page will put focus on which of the following elements: (Select all that apply)

 A. Plain text
 B. Form fields
 C. Links
 D. Elements with tabindex="0"
 E. Elements with tabindex="-1"

Answer 31

B. Form fields
C. Links
D. Elements with tabindex=”0”

Question 32

True or false: The default mode for most screen readers is forms mode.

Answer 32

False

Question 33

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.

Answer 33

True