W3C home > Mailing lists > Public > wai-xtech@w3.org > April 2008

Re: Updated: Date Picker Widget

From: Chris Blouch <cblouch@aol.com>
Date: Tue, 08 Apr 2008 11:53:19 -0400
Message-ID: <47FB94EF.9070302@aol.com>
To: Chris Blouch <chris.blouch@corp.aol.com>
CC: "Evans, Donald" <Donald.Evans@corp.aol.com>, wai-xtech@w3.org, "Wlodkowski, Thomas" <Thomas.Wlodkowski@corp.aol.com>, Earl.Johnson@Sun.COM, Jon Gunderson <jongund@uiuc.edu>, Becky Gibson <Becky_Gibson@notesdev.ibm.com>, Joseph Scheuhammer <clown@utoronto.ca>, "Schnabel, Stefan" <stefan.schnabel@sap.com>, schwer@us.ibm.com, Al Gilman <Alfred.S.Gilman@IEEE.org>
Updated with some of the items from last time. I have included an issues 
list at the end so we don't miss any of the discussion points. I have 
also moved the changelog to the end as it is starting to grow as long as 
the actual content :)

Date Picker Widget

Purpose:
Choose a date as input in an easy to navigate manner. This widget does 
not address selection of time ranges within a date, which, in the web 
world, is often performed via a separate UI process.

Behavior:
Like other widgets the calendar widget receives focus to become active 
by tabbing into it. Once focused is received it is placed on todays date 
in a grid of days and weeks. A grid embodies the same representational 
metaphors for both visual and aural navigation. This gives extra lift to 
the solution by aligning it with mainstream objects.

There are two modalities for selection:
Singleton - boolean - When true the calendar will only allow one date to 
be picked at a time. When false the user can pick multiple dates.
Contiguous (Available only if Singleton is false) - boolean - When true 
the user can only pick two dates and all the days contained between them 
are also selected automatically. When false the user can pick multiple 
dates which do not needs to be siblings.

Navigation:

Arrowing up and down goes to the same day of the week in the previous or 
next week respectively. If the user advances past the end of the month 
they continue into the next or previous month as appropriate. Visually 
the grid might flip from month to month but audibly arrowing is a 
continuum of dates. When passing the epoch of one month to another, the 
month entered should announce

<Monthname>[<"NO"|XX> days selected.]

The days selected would only be announced if we are in a multi-select mode.

Going left and right advances one day to the next, also in a continuum.  
Visually focus is moved from day to day and wraps from row to row in a 
grid of days and weeks.

Home takes you to the first day in a month while End takes you to the 
last day in a month.

PageUp advances a month and PageDown retreats a month. As mentioned 
before, advancing or retreating a month should announce the month along 
with selected days if in a multiselect mode. When changing months focus 
should stick to the week and day as the user cycles through. For 
example, if they are currently focused on 8 Tuesday April 2008 and 
advance a month, they should sill be on the Second Tuesday but in May, 
which is May 13. This new date should be announced to the user.

Control+PageUp advances a year while Control+PageDown retreats a year 
and should announce

<Year>[<"NO"|XX> days selected.]

The days selected would only be announced if we are in a multi-select 
mode. The user focus should stick to the same date in the next year.

We do not need another shortcut for changing weeks because it is already 
just hitting the up and down arrow.

Unavailability:

The widget should also recognize some dates as not being available such 
as weekends or holidays. The API is not defined here but should include 
exclusion of certain days of the week, dates in the past, ranges of 
dates and discontinuous sets of dates. These dates are announced as Not 
Available or Available as appropriate in the localized language. We 
assume the user most often will be hunting for an open available date so 
we suggest announcing Not Available early on so the user knows to just 
skip forward or back to another date. If the widget is instructed to 
make all dates in the past unavailable, if the user attempts a 
navigation method that would take them into the past, the command is 
ignored and the user is taken to Today's date. Today would announce

"Dates in the past are not selectable"

in addition to the regular information about that date.

Announcing:

The data points for a single day is spoken from specific/interesting to 
general/ordinary. These terms would be localized for the target 
audience. Different ATs may want to expose preferences to reorder the 
elements or taper off the verbosity.

[Selected][Not Available] NumericDate DayOfWeek Month NumericYear [Not 
Selected][Available][X of Y]

As the user navigates they can quickly hear the number and if they allow 
speech to go on long enough they can get the day or more detail. If the 
date is already selected that is stated. If we are in contiguous mode we 
also announce which position this date holds in the set as "X of Y" 
where X is the selected date's position and Y is the size of the set. 
The earliest date is announced as 1 and the last date is announced as 
the size of the set. If the date is not already selected then "Not 
Selected" is stated at the end. The assumption is that being selected is 
important to the user so they would want to know that right away. The 
majority of dates are not selected so hearing that over and over would 
be tedious, but still important at points of interest. The first focus 
on today's date would read all the details out in full unless the users 
starts interacting. Reasonable combinations are:

Selected NumericDate DayofWeek Month NumericYear [X of Y]
NumericDate DayofWeek Month NumericYear Not Selected Available
Not Available NumericDate DayofWeek Month NumericYear

Selection:

Pressing the space key selects a date.

In singleton mode this deselects the previous choice. We assume the user 
knows what they are doing and the change is easily reversed so we simply 
announce the unselection asas part of the new selection.

Selected NumericDate DayofWeek Month NumericYear [Previous date 
NumericDate DayofWeek Month NumericYear Unselected]

In discontiguous mode the space acts as a toggle so we could be either 
selecting or deselecting and simply announce the current state as 
previously described.

In contiguous mode the space nails down the tail of the snake and then 
shift+arrows moves the head to select a set of dates. This is similar to 
the keyboard behavior in selecting a range of text in a word processor. 
Pressing space on another date starts a new snake. As each date is 
navigated for the head we announce the date and the number of members in 
the set. If Unavailable dates are included in the range, they are not 
included in the count of selected days.

Selected NumericDate DayofWeek Month NumericYear [X days selected]

More Items for discussion:

{Headers}
There could be a header to the widget containing equivalent links to 
advance and retreat years and months along with the title showing which 
month and year the last focused date is contained in. To reach the 
header the user would need to navigate out of the calendar date picker 
section. Once in the header the same keys move through the month and 
year increment/decrement controls.

{Header pull downs}
Some calendar widgets represented the current Month and Year as 
pull-down menus in the header with the current month/year selected. You 
then use standard navigation to change the selected month or year from 
these menus.

{Year entry}
Some calendar widgets have the year as an editable text field so the 
user can just type in 2018 to jump to that date rather than incrementing 
or messing with a menu. Might swing to far on the capability/complexity 
trade off.

{Additional keys}
There are many other keys defined in some desktop applications but I 
didn't know if they are of great utility or not. More keystrokes is more 
cognitive load and more client-side code. That said, here is a list of 
additional keystrokes beyond the baseline previously discussed

control+alt+home - first day of the current week
control+alt+end - last day of the current week
control+alt+t - Jump focus to today - how to internationalize?

{Submit}
Do we need a submit key in either the multiselect or singleton modes?

{Tree View}
Al suggested consideration of a tree view which I'm assuming would need 
an alternate keyboard navigation. Should we pursue this branch?

CB

Update 4/8
- Tried to generalize AT behavior description for order of content 
revelation
- Added section about singleton and contiguous modes
- Added unavailability section
- Changed selection from enter to space
- added contiguous and discontiguous selection methods
- Reorganized into major sections
- Removed all modal dialogs and other tweaks that try to capture Al's 
comments
- Changed keys to ones not needing localization

Update 3/25
- added announcing number of days selected when switching from Month to 
Month or Year to Year
- added announcing availability of the selected date to the spoken 
description
- added announcing the month and its attributes when the user crosses a 
month boundary
- clarified combinations allowed for availability and selected
- added implementation detail about supporting a passed in list of 
unavailable dates
- added section about navigation into the past

Update 3/4
- added commentary about alignment with mainstream objects
- added section of additional keys we might want to consider
- added continuity of grid focus when changing months and years
Received on Tuesday, 8 April 2008 15:54:07 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 21:51:35 UTC