Design question re: Date Picker - displaying dates in next/previous months in current month's grid

Allison Bloodworth abloodworth at berkeley.edu
Sat Feb 14 03:01:41 UTC 2009


Hi Carl!

Thanks so much for your suggestion! I'm forwarding your suggestions on  
to the fluid-work mailing list so that the developers can review them.

Thanks again,
Allison

On Feb 3, 2009, at 1:05 PM, Carl Forde wrote:

> Allison, here's an ugly hack and kludge that might get you part of the
> way. Rather than using a table, you could use a series of <a>, with
> floats and widths assigned so they flow the right way. Now here's the
> ugly part ( ha, you were thinking that was the ugly part ) all the <a>
> use a common background sprite suitably offset and cropped to show the
> right day number. Each one would have an TITLE attribute defined that
> would provide the correct date interpretation. I think this would
> handle your first two concerns. Perhaps for the non-selectable dates
> you could use a <p> with a different sprite that has some colour added
> to it to visually distinguish these dates from the selectable ones?
>
> Does that help? Even make sense?
>
> Carl
>
>
> On Tue, Feb 3, 2009 at 11:53 AM, Allison Bloodworth
> <abloodworth at berkeley.edu> wrote:
>> Hi everyone,
>> As we are wrapping up the storyboards, wireframes, & storycards, we  
>> have run
>> into one last design question about the the Date Picker that  
>> touches on
>> coding and accessibility, and hope folks on the list can offer some  
>> advice.
>> Ideally, we'd like to show dates in in the next and previous months  
>> that
>> overlap into the current month's grid (see the date pickers near  
>> the bottom
>> of this
>> page: http://wiki.fluidproject.org/display/fluid/Date+Picker+Storyboard+-+Date+and+Time+Separate+Fields+with+Default) 
>> .
>> This allows users to more easily put the current month within the  
>> context of
>> the next and previous months, and provides them with more potentially
>> clickable links (instead of blank boxes), which will in some  
>> instances
>> reduce the need to navigate between months.
>> However, there are several potential issues we see with this:
>> 1) Screen readers may read the dates as being within the wrong month.
>> Talking with Mike Elledge, if the dates are in a table he advises  
>> us that
>> the screen reader will read something like "Feb 2008 tuesday 1." If  
>> we show
>> Jan 31st in the same grid, it may in accurately read "Feb 2008  
>> Monday 31."
>> Is there a way to set up the table so it reads properly, or perhaps  
>> not use
>> tables at all?
>> 2) Will there be issues with folks with cognitive disabilities not
>> understanding that the 31 is not part of February? Is there any way  
>> other
>> than completely removing the numbers for next/previous months to  
>> alleviate
>> this problem?
>> 3) We haven't come up with a great design solution to strongly  
>> distinguish
>> non-selectable dates (e.g. when entering a Due Date for an  
>> assignment, dates
>> *before* the Open Date shouldn't be selectable) and dates in the  
>> previous
>> month. Currently we have them both as the same gray, but the  
>> difference is
>> on mouse-over the non-selectable dates do not receive a blue  
>> highlight. We
>> do think we should provide different CSS classes to these cells so  
>> that
>> different styling *can* be used, but in our design we don't see it  
>> as being
>> very meaningful to use different colors of gray (which is sort of the
>> standard for both dates in the next/previous month *and* non- 
>> selectable
>> dates).
>> Do folks have any advice on these issues?
>> Thanks very much!
>> Allison & Erin
>>
>> Allison Bloodworth
>> Senior User Interaction Designer
>> Educational Technology Services
>> University of California, Berkeley
>> (415) 377-8243
>> abloodworth at berkeley.edu
>>
>>
>>
>>
>> _______________________________________________________
>> fluid-work mailing list - fluid-work at fluidproject.org
>> To unsubscribe, change settings or access archives,
>> see http://fluidproject.org/mailman/listinfo/fluid-work
>>
>>
>
>
>
> -- 
> Start by doing what's necessary;
> then do what's possible;
> and suddenly you are doing the impossible.
> -- Saint Francis of Assisi

Allison Bloodworth
Senior User Interaction Designer
Educational Technology Services
University of California, Berkeley
(415) 377-8243
abloodworth at berkeley.edu