Accessible Date Pickers

Unfortunately, several shiny HTML5 features (such as the video element), ended up implemented to different levels by browsers, without good accessibility, and without an interface that satisfied designers (a nearly impossible task). This includes the date input.

Recently on Twitter, there was some discussion about accessible date picker widgets. Jason Kiss (@JKiss) did some analysis and gave feedback.

I felt compelled to list the examples of accessible date pickers mentioned in the Twitter thread, so here they are. Know any other good ones?

PS: In the tweet thread, props to @handcoding, @pauljadam, and @backflip.

More:

7 comments

  1. Pingback: [DigitalScholarship] [webdev] Web Design Update: April 21, 2016 – educatorgoldarchives
  2. Jason Kiss

    Good work, Dennis!
    A few that were mentioned in the Twitter thread to add to your list:
    -http://examples.simplyaccessible.com/datepicker/ was one of the original six I reviewed
    -https://wet-boew.github.io/v4.0-ci/demos/datepicker/datepicker-en.html

  3. Neil

    Bravo Dennis,
    BTW, to see a live example, you may visit elal.com website, and activate the screen reader profile using User1st solution.

  4. Pingback: Are There Accessible Advanced Search Plugins For WordPress?
  5. Steve Green

    I have tested all of these with JAWS 17. Only two (Deque and Whatsock) are usable at all and there are issues with those.

    The showstopper with the Deque one is the inability to increment the year – that’s a serious oversight and not something I would know how to add. This would be my recommended date picker if that was fixed. It’s also way too verbose, although that should be easily fixed.

    Instead, I have to recommend the Whatsock date picker despite its issues. JAWS announces the non-standard method for moving to the next and previous months and years, but it is a significant cognitive load for a screen reader user. If there is already a date in the textbox, it is ignored when the date picker opens and the date picker is set to whatever it was set to previously. Instead, it ought to read the contents of the textbox, which the Deque one does. The date is automatically entered in the textbox in the format “Monday January 5, 2015” so some server-side processing would be needed to get this into the dd/mm/yyyy format that most systems expect. It may be possible to do a client-side fix but that’s way beyond my ability.

    So the search continues for a truly accessible date picker. Any more suggestions?

    • Bryan Garaventa

      Hi, to respond to your issues.

      “JAWS announces the non-standard method for moving to the next and previous months and years, but it is a significant cognitive load for a screen reader user.”

      I agree this is a bit verbose, though this message can be customized within setup.js to whatever you wish, also you can press Shift+Tab or Tab to locate buttons that do what you wish as well in the nature of a modal dialog. The use of the PageUp/PageDown keys have been recommended for many years as part of the ARIA Authoring Practices guide, so I’m not sure how this is non-standard though. A lot of experimentation went into these keystrokes though, and these were the only ones that worked consistently in JAWS going back to JAWS11 in IE8 on Windows XP going forward as well as within Firefox, plus in NVDA in Firefox in Windows XP through Windows 10. Plus this allows access for voice navigation software such as Dragon by passing such keystrokes through to the date picker by voicing commands like ‘press PageUp’ or ‘press PageDown’, which will also control the date picker.

      “If there is already a date in the textbox, it is ignored when the date picker opens and the date picker is set to whatever it was set to previously. Instead, it ought to read the contents of the textbox, which the Deque one does.”

      Within these examples the text field itself is not programmed to control the date picker, however support for this is already built in, so if you need help with setting this up I can assist. Just send me a message at bryan.garaventa@levelaccess.com if you wish to do this.

      “The date is automatically entered in the textbox in the format “Monday January 5, 2015” so some server-side processing would be needed to get this into the dd/mm/yyyy format that most systems expect.”

      No server side processing is needed for this, the setup instructions include examples that show how to implement whatever string format you desire during the datepicker setup declaration, included in the Coding Arena archive at
      https://github.com/accdc/tsg

      E.G Here is one such that includes this date string format change within setup.js link

      There is one issue that may still exist in JAWS, where if you open the date picker on a disabled date such as Saturday or Sunday, JAWS will not automatically activate Applications Mode as expected to allow for arrow key navigation. I raised this as a bug with Freedom Scientific over a year ago, and to my knowledge they don’t see this as a problem worth fixing. Perhaps others will get better traction on this if other reports are filed by different people.

      All the best,
      Bryan

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>