Memorable date accessibility considerations

[joshkimux]

Duplicate check

• [X] I've searched for any related issues and avoided creating a duplicate issue.

This update is for:

Component

What is the name?

Memorable date

What is the nature of this update?

• [ ] How to build this component/pattern
• [ ] When to use this component/pattern
• [ ] When to use something else
• [ ] Usability guidance
• [X] Accessibility
• [ ] Implementation
• [ ] Research insights
• [ ] Package information
• [ ] Addition to Forms Library documentation
• [ ] Update to existing Forms Library documentation

What problem does this solve?

Currently, the memorable date component doesn't cover key accessibility considerations brought up by @Mottie and Jasmine Friedrich. Specifically:

• Dyscalculia
• US localization of month year day order (this being more of a potential bug/discovery ticket than a documentation request)

Additional Context

We suggest to change "memorable date" to just "date input"

• "Memorable" implies this is something the user remembers as opposed to something they may reference (which is a key usage point). For example, a user may not remember their credit card expiration date, but can easily find it and input it.
• The key difference between this component and the dropdown version for date selection is that it uses input fields, not dropdowns. Naming it as such may be a more semantic and robust decision.
• Future state, we should strongly consider providing more fleshed out guidance on when to select different types of date components. Gov UK does this under patterns.

We suggest to add the following bullet point to accessibility considerations:

• More research is needed to determine the extent to which users struggle to enter months as numbers, and whether allowing them to enter months as text is helpful.

We suggest to edit "when to use data inputs" from:

Appropriate for most dates.

To

Use the date input component to help users enter a date they can easily remember (for example, a birthday) or one they can easily look up (for example, the expiration date of a credit card).

We suggest to edit "When to consider something else" from:

"Consider a date picker for scheduling. If users are trying to schedule something, the date picker might make more sense. Be sure to also provide an option for text entry as well. Note: We do not currently have a calendar picker as part of the design system. For reference, visit the VA online scheduling tool (VAOS) to see an experimental version of a calendar picker."

To

"Do not use the date input component if users are unlikely to know the exact date of the event you’re asking about. You may consider using a date picker for scheduling, with the following caveats ⚠️

• We do not currently have a calendar picker as part of the design system. For reference, visit the VA online scheduling tool (VAOS) to see an experimental version of a calendar picker.
• Date pickers have not been tested for accessibility, and may lead to launch blocking issues for your product unless carefully designed with an accessibility specialist. We strongly recommend reaching out to #accessibility-help on slack for support before considering this pattern.

We suggest providing more detailed guidance on usage

This will likely take more discovery, time, and resources-- but more guidance around usage (e.g. reducing the amount of fields to match the date being input) could be invaluable for designers. USWDS guidance feels scarce compared to gov uk (where it likely was pulled from originally)

[caw310]

@rsmithadhoc do you think we can close this based on the updated made to memorable date?

[rsmithadhoc]

@rsmithadhoc do you think we can close this based on the updated made to memorable date?

@caw310 I think we should keep this open to review and update the guidance. I don't believe any changes need to be made to the components themselves at this time.

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @powellkerry @rsmithadhoc

[Andrew565]

This appears to be a "update the guidance" ticket more than a development ticket?

[rsmithadhoc]

This appears to be a "update the guidance" ticket more than a development ticket?

@Andrew565 That's correct.

[rsmithadhoc]

PR created: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/pull/3427

I updated the guidance, except for 'We suggest to change "memorable date" to just "date input"', since we now have Date Input and Memorable Date as separate components.