Input Date Picker - Add context to default placeholder text to AT - (2036569968)

[dqateam]

Module:

17a Input Date Picker

Violation:

Avoid use of placeholder values to label or explain input

WCAG Reference:

• 1.3.1 Info and Relationships
• 4.1.2 Name, Role, Value

Instance ID:

2036569968

Severity:

8

Description:

[Issue]
There are form fields that rely on the placeholder attribute to supply their accessible name. Examples include:

• All input "date-picker" elements.

[User Impact]
Users with cognitive disabilities may be unable to determine the purpose of the field after the placeholder disappears. Some assistive technologies will not use the placeholder attribute as a field's accessible name, so screen reader users will have difficulty determining what fields are for and speech input users will have difficulty navigating to them.

[Code Reference]

<input aria-label="" class="" enterkeyhint="" inputmode="" placeholder="MM/DD/YYYY" type="text">

Note:

[Suggestion]
Avoid use of placeholder values to label or explain input.

Labels must meet the following requirements:

• The label must be visible.
• The label must be persistent. That is, a label must not disappear when text is entered into the field or an option is selected.
• The label must be programmatically associated with the form field. The most common way to do this is with a <label> element with a for attribute set to the ID of the field.
• The label must provide the accessible name of the field, or the label's exact text must be included in the accessible name.

[Compliant Code Example]

N/A

Media Type:

Forms

Additional Resources:

• Report Source: Product accessibility evaluation conducted on the Calcite Design System in August, 2022.

[geospatialem]

By default the component has placeholder text MM DD YYYY that is read back to screen readers. Maybe we could change this to read it as the expected format for AT using an aria-label attr?