DQ – Module 9: Form Labels, Instructions, and Validation

Created on December 30, 2022

DQ - Module 9: Form Labels, Instructions, and Validation

1 / 33

Which of the following statements about labels is NOT correct?

Labels must be programmatically associated with their matching elements.

Labels should be close in length to the other labels on the page.

Labels should be visually close to their corresponding form fields.

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

2 / 33

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

title attribute

Explicit <label> association

aria-label attribute

Implicit <label> association

3 / 33

Group labels must be available to all users — sighted and non-sighted alike.

False

True

4 / 33

Which of the following methods does NOT programmatically associate form instructions with their associated fields?

Placing instructions for a group of fields in the legend

Placing instructions in the <label> element

Using aria-describedby on the element

Providing instructions in regular text nearby the element

5 / 33

Instructions that aren't placed visually near their corresponding form fields can negatively impact which of the following user categories?

Users with vestibular disorders

All of the option

Users who are blind

Users who have low vision

6 / 33

Why is the use of placeholder text as a form label bad for accessibility?

The default color for placeholder text does not meet color contrast requirements

Placeholder text is not supported in most browsers

Placeholder text disappears when data is entered in the field

All of the above

7 / 33

Using the Tab key to move through a page will put focus on all of the following elements EXCEPT:

Elements with tabindex="-1"

Elements with tabindex="0"

Form fields

Links

8 / 33

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

<label for="password"> Error - Password: </label>

<label for="password"> Password: </label>

<p id="passwordError">Error: Password must be at least be 8 characters</p> <label for="password"> Password: </label>

<p>Error: Password must be at least be 8 characters</p> <label for="password"> Password: </label>

9 / 33

Icons must not be used as labels.

False

True

10 / 33

To conform to ARIA specification, all of the following methods should be applied when creating a custom checkbox within a form EXCEPT:

Provide a visible and programmatically-associated label for the checkbox

Ensure the checkbox is assigned role="checkbox"

Convey to users the state of the checkbox through toggling aria-expanded values

Make sure the Space bar can be used to change the state of the checkbox

11 / 33

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.

False

True

12 / 33

Custom form elements should be modeled after native HTML form elements.

True

False

13 / 33

Which ARIA attribute should be used to provide more information about an error in a form element?

aria-describedby

aria-readonly

aria-required

aria-invalid

14 / 33

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

False

15 / 33

What might happen if an aria-live announcement is tied to a blur event in a form?

The aria-live announcement might be made before the screen reader reads the next item in focus

None of the above

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

A screen reader might read the announcement after it reads the next item in focus

16 / 33

What should happen to the page title if a form submission causes the same page to reload?

Nothing should happen to the page title

Form submission should not cause the page to reload

The page title should reflect errors in form submission

The page title should reflect the status of the form submission

17 / 33

As long as a group label is programmatically associated with the group of fields it labels, its location in the DOM does not matter.

True

False

18 / 33

Which ARIA attribute should be used to identify which form elements have errors?

aria-readonly

aria-invalid

aria-describedby

aria-required

19 / 33

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

20 / 33

Which is NOT a good technique for preventing errors in forms?

Give additional instructions for inputs if necessary

Allow users to review their choices before and after they submit the form

Provide clear, accurate, and accessible form labels

Provide visual cues that guide users through the form

Use custom form inputs whenever possible

21 / 33

Which one of the following is NOT a screen reader mode?

Forms mode

Document mode

Table mode

Application mode

Caption mode

22 / 33

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

True

23 / 33

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.

False

True

24 / 33

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

Reference the ID of the instructions via aria-describedby

Include the instructions within the <label> text, along with the label/name of the input

Write the text in an aria-instructions attribute

Include the instructions in the title attribute, to create a visible tooltip on mouse hover

25 / 33

The default mode for most screen readers is forms mode.

True

False

26 / 33

Changes in context can inhibit accessibility when those changes happen automatically and users aren't allowed to request the changes in context.

False

True

27 / 33

Color must never be used in labels.

False

True

28 / 33

Which of the following methods can NOT be used to associate a group label with the fields it labels?

role="group" and aria-labelledby

Nested fieldsets to denote groups within groups

29 / 33

Adding the ARIA attribute aria-required="true" tells every user that a form input is required.

False

True

30 / 33

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:

Users who have low vision

Users who are deaf or hard of hearing

Users who are blind

Users who are colorblind

31 / 33

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

32 / 33

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

True

False

33 / 33

Which of the following methods is NOT a best practice for progressive form updates?

Provide a summary of users' choices at the end of the form before submission

Manage keyboard focus as users move forward and backward through the form

Make dynamic changes in the form anywhere in the DOM

Include only one step on the screen at a time

Number the steps in the form

Your score is

The average score is 0%

0%