Forms

Question 1

What are the most important attributes of accessible labels?

Answer 1

• Labels must be meaningful, i.e., they must clearly explain the purpose of the field.
• Labels must be programmatically associated with their control.
• Labels must be visible at all times.
• Labels must be in close proximity to their control.

Question 2

What’s a form input’s “accessible name”?

Answer 2

its label

Question 3

True or False: icons should not be used as form labels.

Answer 3

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.

Question 4

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>

Answer 4

C. Explicit <label> association</label>

Question 5

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 5

D. A and B

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

Placeholder text disappears when data is entered in the field

Question 6

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.

Answer 6

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

Question 7

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 7

False

use ` aria-labelledby`

Question 8

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 8

True

Question 9

What are two ways related form controls can be programmatically grouped?

Answer 9

1. The HTML solution consists of using a <fieldset> to semantically group the form fields and a <legend> to provide a semantic group label.
2. The ARIA solution consists of semantically grouping fields within a group region and providing a semantic group label using the aria-labelledby attribute.

NOTE: VoiceOver does not yet support role=”group” as a way to label a group of form elements. For this reason, <fieldset> and <legend> are still preferred over role=”group”.

Question 10

What are three options for adding instructions to a group of form fields?

Answer 10

1. add instruction text to the legend of a fieldset (only if short)
2. Associate the instructions with one of the fields (usually the first field is best) within the group, using aria-describedby
3. Put the instructions before the start of the whole form, as regular text not associated with anything, and hope that screen reader users read them before jumping in to form mode.

Putting regular text in the middle of a form runs the risk that screen reader users will not hear it because if they’re tabbing only to focusable elements, they will skip over all non-focusable text, unless that text is programmatically associated with a group label or an input.

Question 11

How should you identify required form fields?

Answer 11

• The aria-required="true" indicator should be set on the input. The HTML required attribute would also work, but it changes browser behavior.
• A supplemental visible indicator should be available to sighted users.

Question 12

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>

Answer 12

B. Providing instructions in regular text nearby the <input></input> 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

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

Answer 14

E. Make dynamic changes in the form anywhere in the DOM

Changes should only occur later in the DOM

Question 15

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

Answer 15

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

Question 16

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 16

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

Question 17

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 17

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

Question 18

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 18

D. aria-invalid

Question 19

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 19

B. aria-describedby

Question 20

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

Answer 20

True

Question 21

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”

Answer 21

D. Elements with tabindex=”-1”

Question 22

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 22

True

Question 23

What HTML attributes are used to programmatically link labels and inputs?

Answer 23

for on the label and id on the input should match

Question 24

When should you use the autocomplete attribute?

Answer 24

When an input is asking for personal information from the user.

example: autocomplete="email"

This is required for WCAG 2.2

Question 25

True or False: A single form field can have more than one label.

Answer 25

True

Question 26

True or False: Any given label element can be associated with only one input element.

Answer 26

True