WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Datepicker questions - are they useful?

for

From: Whitney Quesenbery
Date: Nov 7, 2015 8:57AM

Dropping back a bit from the technical questions, there is not one simple
rule for how to collect dates in a form or interface.

The UK GDS has done some excellent work untangling this, thinking about
differences in how we might want to edit dates based on context -- and most
importantly, what we know about the date in question.

Their Design Pattern for Dates
<https://www.gov.uk/service-manual/user-centred-design/resources/patterns/dates.html>
discusses

- Memorable dates
- Copied dates
- Approximate dates
- Relative dates
- Calendar controls
- Formatting dates
- Validating dates

There is also a good article on asking for a date of birth (common need in
many govt forms). I value it for the reports of usability work on this
topic and how it shaped the design they now recommend.
https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth/

One usability/accessibility problem in the article has been corrected in
the article, with the labels now outside of the form, where they belong.

It also points out that the reading (and visual) order should put any
instructions BEFORE they are needed, not AFTER - no matter how tempting it
might be.


On Fri, Nov 6, 2015 at 1:50 PM Bryan Garaventa < <EMAIL REMOVED> >
wrote:

> Thanks, those are all helpful. Luckily these are fairly simple to
> implement within any web UI.
>
> Regarding the format, mm/dd/yyy or dd/mm/yyy, I agree it is confusing at
> times. This can be helped using supplementary description text or a
> placeholder at times.
>
> Also, this can be addressed programmatically for some sites that span
> multiple countries. For example, the date format string for the WhatSock
> date picker simply uses a callback function when a date is selected, then
> the developer can use whatever parsing logic and string format they wish to
> populate the field, or even control the values of three individual select
> elements such as Day, Month, and Year, so this flexibility is easily
> achieved.
>
> Typically I recommend both, the ability to manually enter the desired
> date, and an accessible date picker, because having both will ensure the
> greatest value for all user types.
>
> > If you do the datepicker don't forget to style it so I can see it (one
> of the examples had a visual focus indicator of
> > dark grey on black seemingly)
>
> Probably my fault, I'm blind so this can slip past me at times. The source
> code is easily changed however for anybody who wishes to employ different
> styling and content.
>
> All the best,
> Bryan
>
>