Gather Ye Rosebuds: thoughts regarding collecting date values

One very common data types that we collect from users is a date value, whether it be a birthday or other anniversary or even something like a booking date for an event. Unfortunately, most of the date collection methods I've seen in the past two decades are sub par and the failure is even more pronounced when we consider the experience for those using assistive technology.

We've made some progress - we now, in HTML5, have a date type INPUT tag - but even there the experience is lacking. If we add in other considerations - like internationalization - we slide even further down this slippery slope, opting to do things like collect the date parts, i.e., month, day, and year, individually to make sure we have a valid date that's gathered in a manner that is somewhat familiar to the user.

Of course we have tools like datepicker, but unfortunately those are typically only partial solutions. Sure, they improve the interface for a number of users, but most still fall short, especially for those using screen readers...and that situation becomes even worse when they insert a calendar widget into a popup and focus is not managed well.

What's the solution?

Ideally, a tool that would automatically generate a visual calendar in the most common layout - a table with seven columns with each week in a row - and some common controls - like the ability to change the month and/or year using a next/previous button or a drop down list. The control should be in the flow of the document and it should include, at the very least, ARIA-* and role attributes so the experience doesn't suck if you're using a screen reader. Oh, and you should be able to navigate it easily using the keyboard, a mouse, or a touch-enabled device.

I don't really think that's asking too much. All it's really asking is that we, as UI engineers, consider how the experiences we are building are impacting people who are not like us. Maybe that's more along the lines of "everything and a kite" than "not too much", but I like to think we can do better than just OK. I'd like to think that when we talk about the MVP we're not really thinking about the MVE (Minimum Viable Effort - look for that in an upcoming post).

Now for a little good news. I've begun building such an interface. Since everyone seems to be hot after Angular these days, that's what I've used and I've built a prototype with a calendar directive. Granted, it's not 100% complete - there's still a little work to do to improve the accessibility and internationalization - but it's about 99 percent there. (You can see the prototype at http://prototypes.cathmhaol.com/ng-calendar/.)

The directive is not yet on my github, but it will be as soon as I've rounded a few of the rough corners, but you can easily download the source and the CSS (which includes a special trick that forces the table cells into squares) from the prototype if you're dying to get started building out a better date collector.

As always, happy coding.

20 February, 2017

The interface is complete and is available on GitHub at https://github.com/hrobertking/angular/tree/master/ng-calendar. A brief demonstration is below.

Date of Birth