Form Labels, Instructions, and Validation (with WCAG 2.2 updates) Flashcards
Does every from control need a visible label?
A. True
B. False
A. True
<label>
Your favourite colour
</label>
<input></input>
Is this a correct example of the use of label tag on a form?
A. Yes
B. No
A. Yes
https://www.a11y-collective.com/courses/accessible-code/lessons/forms-2/topics/labels/
Why do you need use fieldsets and legends?
Screen readers announce that it’s a group and announce the legend, so blind users understand the context of what they need to fill out or check with the form controls.
https://www.a11y-collective.com/courses/accessible-code/lessons/forms-2/topics/fieldsets-and-legends/
For a screen reader, “form mode” means:
Check all that apply.
A. A screen reader user can type in form controls instead of using the short codes from the screen reader
B. Only form controls and their attached information are announced by the screen reader
C. A screen reader user is sent to a separate form with fewer options
A. A screen reader user can type in form controls instead of using the short codes from the screen reader
B. Only form controls and their attached information are announced by the screen reader
What is correct HTML?
A. <label>Your name</label> <label>First Name</label> <input></input> <label>Last Name</label> <input></input>
B. <fieldset> <legend>Your name</legend> <label>First Name</label> <input></input> <label>Last Name</label> <input></input> </fieldset>
B. <fieldset> <legend>Your name</legend> <label>First Name</label> <input></input> <label>Last Name</label> <input></input> </fieldset>
Aria-describedby is used to add extra information to a form control.
A. True
B. False
A. True
Autocomplete is required for every type of form control in a form.
A. True
B. False
B. False
Examples of good error prevention messages in a form are:
Check all that apply.
A, Please choose a strong password
B. Your password must be at least 8 characters long and contain a number
C. All fields are required
D. Your first name must be at least 3 characters long
B. Your password must be at least 8 characters long and contain a number
C. All fields are required
A placeholder can be used to replace the visible label.
A. True
B. False
B. False
What is a good way of indicating errors in a form after submit?
Check all that apply.
A. Add the text: Please fill out this field
B. Add the text: Please provide a valid email address, like name@example.com
C. Place a red border around the field and make the text bold
D. Add a list of errors at the top of the form and with each form control give an explanation of what needs improvement
B. Add the text: Please provide a valid email address, like name@example.com
D. Add a list of errors at the top of the form and with each form control give an explanation of what needs improvement
After an AJAX submit of a form, the keyboard focus should be put on:
A. The top of the form
B. The top of the error or success message
C. The top of the page
B. The top of the error or success message
Custom styling on a checkbox or radio button can be done by hiding the input element with the CSS display: none.
A. True
B. False
B. False
All date and time pickers need to be accessible, even if there is an accessible alternative present.
A. True
B. False
B. False
How can you help visitors to fill out a form that has a time limit?
Check all that apply.
A. Give them a list of the documentation they will need to fill out the form
B. Tell them to hurry up every 10 seconds
C. Give them the opportunity to extend the time limit
D. Block the user if the time limit has expired 3 times
A. Give them a list of the documentation they will need to fill out the form
C. Give them the opportunity to extend the time limit
