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 <label> association
D. Implicit <label> association</label></label>
C. Explicit <label> association</label>
True or false: Icons must not be used as labels.
False
Icons MAY 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.
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
A. The default color for placeholder text does not meet color contrast requirements
B. Placeholder text disappears when data is entered in the field
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
When multiple labels are used for one element, each label MUST be programmatically associated with the corresponding element.
In this case, aria-labelledby is a useful tool to associate multiple labels with a single field.
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. <fieldset> and <label>
B. <fieldset> and <legend>
C. Nested fieldsets to denote groups within groups
D. role=”group” and aria-labelledby</label>
A. <fieldset> and <label></label>
True or false: Color must never be used in labels.
false
Group labels MUST NOT rely solely on references to sensory characteristics.
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 <input></input> element
B. Providing instructions in regular text nearby the <input></input> element
C. Placing instructions in the <label> element
D. Placing instructions for a group of fields in the legend</label>
B. Providing instructions in regular text nearby the <input></input> 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 <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</label>
C. Reference the ID of the instructions via aria-describedby