WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Date fields in forms: one input vs three

for

From: Susan Grossman
Date: Mar 22, 2013 7:17AM

Thank you for your replies. It was all helpful, aa.com has indeed changed
to one field, and I didn't know that aria-label wasn't supported by iOS


On Thu, Mar 21, 2013 at 7:32 PM, Bryan Garaventa <
<EMAIL REMOVED> > wrote:

> When you say 'These are nice and intuitive but would require more work to
> make sure they are fully accessible', which accessibility issues have you
> noticed?
>
> This is in regards to the date picker at
> http://whatsock.com/modules/aria_calendar_module/demo.htm
>
> It would be great to know, so I can fix them.
>
> A few notes, I've tested this successfully using:
> JAWS 12, 13, and 14 in IE8 and 9, on Win XP, Win7 and 8;
> JAWS 14 in Firefox (earlier versions of JAWS don't support role=dialog nor
> role=application in Firefox)
> and using NVDA in both Firefox and Chrome.
>
> The differences have to do with differing levels of ARIA support between
> the
> screen reader versions.
>
> For example, JAWS 12 and 13 support the use of role="dialog" where the
> Virtual Cursor is disabled so that arrow key navigation is possible, which
> matched NVDA.
>
> In JAWS 14 however, Freedom Scientific removed this behavior so that
> nothing
> happens when role="dialog" is applied, thus breaking this functionality and
> making it inconsistent across all screen readers that support the role.
>
> So the only way to fix this behavior for JAWS 14, was to wrap an internal
> container element that contains role="application" with another outer
> container that contains role="dialog", which then makes it work in JAWS 12,
> 13, and 14 when using IE 8 and 9, and for JAWS 14 when using Firefox.
>
> However, this nesting of role="application" within role="dialog" appears to
> confuse NVDA so that it doesn't work in IE, but it does however work in
> Firefox, and in Chrome if you press Insert+Space to make sure that it
> remains in Applications Mode when the Calendar link is activated.
>
> JAWS also correctly announces only the aria-label attribute for focusable
> elements in Applications Mode, but annoyingly appends aria-label text to
> screen text in Virtual Buffer navigation mode when applied to elements with
> role="link".
>
> The way to fix the issue of screen text being concatenated with aria-label
> text in JAWS, is to surround the screen text with aria-hidden="true",
> however doing this breaks Voiceover support in iOS touch screen devices,
> because iOS doesn't support aria-label.
>
> As you can see, I've given this a lot of thought, and it's sort of
> complicated.
>
>
>
> ----- Original Message -----
> From: "Birkir R. Gunnarsson" < <EMAIL REMOVED> >
> To: "WebAIM Discussion List" < <EMAIL REMOVED> >
> Sent: Thursday, March 21, 2013 5:35 PM
> Subject: Re: [WebAIM] Date fields in forms: one input vs three
>
>
> > Hi
> >
> > Can't seem to find the article you mentioned (please post it to the
> > list if you find it).
> > Regarding date pickers, whatever version is implemented it has to have
> > full keyboard support and be labelled accessibly. I have seen many
> > unsatisfactory versions of date pickers unfortunately.
> > The most unambiguous one I have used is on www.aa.com when booking
> > flights (it may have been "updated" .. made worse). It simply consts
> > of 3 comboboxes, day, month, year, it eliminates any confusion
> > regarding format of text input (date format, 2 vs 4 digit years etc.).
> > If an edit field is provided for dates the label should clearly
> > indicate the expected format (dd/mm/yy or mm/dd/yy or mm/dd/yyyy etc.)
> > ideally along with an example (mm/dd/yyyy, such as 10/20/2013).
> > There are some cool date pickers out there, I know www.whatsock.com
> > had an experimental one that was fully keyboard accessible in a table
> > format (though it was more of a calendar grid). These are nice and
> > intuitive but would require more work to make sure they are fully
> > accessible, and would have to take over keyboard navigation (i.e. be
> > an application) to make sure arrow keys work as expected. If this
> > solution is selected it should follow the DHTML keyboard navigation
> > guide.
> > This is probably all pretty basic, and stuff you are already aware of,
> > but I am posting it just in case.
> > HTH
> > -B
> >
> > On 3/21/13, Susan Grossman < <EMAIL REMOVED> > wrote:
> >> Last year a vendor supplied me with a white paper on using one field and
> >> a
> >> date picker enhancement (one label), instead of using three fields for
> >> dates (three labels) in forms.
> >>
> >> Don't seem to be able to find this paper and was hoping someone could
> >> point
> >> me to it, or give me an expert opinion that I can pass on. There is an
> >> ongoing discussion among our UX teams with members feeling strongly
> about
> >> both concepts and I'm looking for data or an accessibility experts
> >> reasoning an recommendation.
> >>
> >> I'm aware that many books like Hardboiled Web Design talk about the date
> >> pickers airlines/hotels use as being painful and show single fields, but
> >> am
> >> looking for the accessibility angle.
> >>
> >> Thank you
> >>
> >> --
> >> *Susan R. Grossman*
> >> <EMAIL REMOVED>
> >> > >> > >> > >>
> > > > > > >
> > > >



--
*Susan R. Grossman*
<EMAIL REMOVED>