Description

Date Picker findings, recommendations, and next steps from the Aug-Sep 2023 Usability Testing Findings Report 🔒

Video clip compilation 1 🔒
Video clip compilation 2 🔒

Findings report takeaways

• Keyboard controls did not work as expected. All screen reader users that we tested with (3…we ran out of time with 1) had difficulty using the date picker. They could only use up and down arrows, not left or right or page up or down.
• User preference on entering dates: 2 prefer to type it in, one likes memorable date picker drop downs
• 1 person was not able to tab to date picker calendar icon and had to use a mouse.
• One participant entered an incorrect format for date entry and it did not give any error message/feedback that the format was wrong. (ex: entering 10/1/2023 instead of 10/01/2023)
• Date picker calendar icon disappeared for one person who was using a special dark mode and high contrast extensions for her setup.

💡 Date picker original recommendations:

• Fix keyboard controls within the date picker. (this is a known issue we’re working on)
• Provide helpful error feedback when incorrect format is entered.
• Automatically enter slashes so the user does not have to type them.
• Explicitly call out in our guidance that the component should always allow for the date to also be typed in manually.

Next steps

• Fix keyboard controls within the date picker.
• Provide a helpful error message when incorrect format is entered.
• Automatically enter slashes so the user does not have to type them.
• Explicitly call out in our guidance that the component should always allow for the date to also be typed in manually.

Findings details

Finding 1: Keyboard controls did not work as expected

Issue previously reported: #4616
Potentially resolved by #5374

Finding 2: Entering dates

If AT users like memorable date picker, we could consider a refactor similar to Russ Weakley’s

Potentially resolved by our refactor of input mask

From the ID24 Date picker presentation / discussion

Finding 3: Unable to tab to calendar icon

Can we acquire browser + AT used to try to replicate?

Finding 4: Calendar icon disappeared using dark mode + hich contrast extensions

This is likely caused by her plugins. From the report:

Her tech setup:
Chrome browser on PC.
Used the high contrast setting on desktop. Personalization> High Contrast: toggle ON.
Three extensions installed for color inversion or dark themes:
ZoomText Smart Invert - See photos in their natural colors when using the ZoomText Invert Brightness or Invert Color effect.
High Contrast - Change or invert the color scheme to make webpages easier to read.
Special Dark - Darkens bright pages. Love your eyes and your power bill.

From the Special Dark plugin review page:

"I was excited for this extension considering all the positive reviews however when applied to Google Docs EVERYTHING is black, which i thought was ok at first but I cant change text colors to white so that I can edit this document."

Finding 5: Incorrect format entered

• Add error feedback?
• Add conditional formatting for slashes and/or adding a 0 before single digit dates

Finding 6: Update guidance to always allow manual entry

Explicitly call out in our guidance that the component should always allow for the date to also be typed in manually.

Discussion

Issues

• USWDS - Bug: Date Picker keyboard navigation not working correctly with JAWS #4616
• USWDS - Bug: Date picker icon does not have visible focus indicator in high contrast mode #5535
• Date picker - Finding 4: Calendar icon disappeared using dark mode + hich contrast extentions - Non UWDS issue
• Date picker - Finding 6: Update guidance to always allow manual entry
• Finding 5: Incorrect format entered - USWDS - Date picker: Manually formatting date input is difficult #5534