Summary

Users found it challenging to manually type dates into the date picker input element.

Observations

1. It is not always obvious to screen reader users what the accepted date format is.
2. It is easy to make errors when trying to type slashes, especially for blind users. Some users prefer the slashes to be entered automatically.
3. It is not obvious when users make an error in manually typing the date due to a lack of error feedback.

Affected user groups

• All users
• Screen reader users
• Screen magnification users

Research method

1-hour 20 minute moderated usability testing sessions conducted via video conference. Conducted with 5 participants using assistive technology (screen readers and screen magnification) on a high fidelity form prototype.

More details in the findings report (Google docs 🔒).

Recommendations for next steps

1. Provide helpful error feedback when incorrect format is entered.
2. Explicitly call out in our guidance that the component should always allow for the date to also be typed in manually.
3. Consider adding input mask functionality.
4. Implement conditional formatting:
   1. Automatically add 0 for single-digit dates.
   2. Automatically enter slashes so the user does not have to type them.