RE: Accessible Interactive Calendar recommendations

Hi Bryan,

Thank you for the detailed response and thank you for the good work.

Thank you,
Zach Bolena


From: Bryan Garaventa [mailto:bryan.garaventa@levelaccess.com]
Sent: Monday, December 4, 2017 1:47 PM
To: Bolena, Zachary
Cc: w3c-wai-ig@w3.org
Subject: RE: Accessible Interactive Calendar recommendations

Hi,
Regarding the differences between standard elements like links or buttons versus gridcells, when I started building this back in 2012, the support for gridcells was extremely limited by screen readers, and due to differences in opinion about what a gridcell was meant to be used for it wasn’t a reliable option for conveying the purpose of the focusable element. Since that time support levels for interactive grids has improved, but I still haven’t found any combinations that work better than this one as yet equally across desktop and mobile platforms, so I’ve kept this design pattern as over the years with minor tweaks such as the addition of aria-current to indicate the set date.

As with many complex interactive widgets, there is always a bit of a learning curve when using them, but it helps to provide help information or to announce this when the widget opens as a means for the user to be clued into the primary functions of using the widget. In this case there is optional instructional text that is announced when the datepicker is first opened and focus is set to the first date, which announces the various keyboard navigation commands that are available for the user to use within the date picker. This is also announced every time a new month is loaded just to act as a reminder. This is when arrowing up and down within the individual dates to navigate by week, or by pressing PageUp or PageDown to navigate by month or Alt+PageUp or Alt+PageDown to navigate by year. This seemed to be the least intrusive method for doing this, such as would be the case if announcing the same thing every time the arrow keys are pressed, which would become somewhat annoying with repeated use. This implementation also includes logic to prevent keyboard guidance from being announced on touch screen devices, which would be confusing when it has no relevance. Also the message announcement is customizable within the setup script to support feedback in any language supported by screen readers.

It is often a big problem as you mentioned that many screen reader users don’t actually know what interactive ARIA widgets are meant to sound like, or even how to interact with them, which significantly muddies the waters when it comes down to identifying where programming bugs in interaction exist, versus support level issues for ARIA, versus differences in expected behaviors by assistive technology users, and where the lines exist between these differing perspectives. This same issue also makes it extremely difficult for most developers and accessibility testers to understand where these lines exist as well for the same reasons.

In an attempt to address this for developers and QA testers, I wrote the following blog post, which is meant to be a single page resource for easily accessing the most common types of testable ARIA widgets.
https://www.levelaccess.com/aria-widget-checklist-screen-reader-testing/<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.levelaccess.com_aria-2Dwidget-2Dchecklist-2Dscreen-2Dreader-2Dtesting_&d=DwMGaQ&c=Ezx-H5PgBrUMEEvxgJuTQRYrd-4D8l8I18qkZZzJQbo&r=gfIcoH9AOzWzA6hyAsR7zIoc3exAOSNc5ep43e0oO18&m=aTPBqqiMeCWfHEq6-3E5QW1DReJZkxeGBh7UnpesSoU&s=nQQOpRME6P0qO0ZSKKZSdQCOzkGQSiN5sB01SGn0IS4&e=>

Which is also available as a redistributable PDF download from
http://whatsock.com/test/aria_checklist.pdf<https://urldefense.proofpoint.com/v2/url?u=http-3A__whatsock.com_test_aria-5Fchecklist.pdf&d=DwMGaQ&c=Ezx-H5PgBrUMEEvxgJuTQRYrd-4D8l8I18qkZZzJQbo&r=gfIcoH9AOzWzA6hyAsR7zIoc3exAOSNc5ep43e0oO18&m=aTPBqqiMeCWfHEq6-3E5QW1DReJZkxeGBh7UnpesSoU&s=YYgKAmDQvqSV5b99Zz8-xldSvRiu8jUniVDt6KTgFyY&e=>

This may be helpful for standard users to get familiar with the same designs as well.

All the best,
Bryan


Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
Bryan.Garaventa@LevelAccess.com<mailto:Bryan.Garaventa@LevelAccess.com>
415.624.2709 (o)
www.LevelAccess.com<http://www.LevelAccess.com>

From: Bolena, Zachary [mailto:Zachary.Bolena@Schwab.com]
Sent: Monday, December 04, 2017 8:20 AM
To: Bryan Garaventa <bryan.garaventa@levelaccess.com<mailto:bryan.garaventa@levelaccess.com>>
Cc: w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>
Subject: RE: Accessible Interactive Calendar recommendations

Hello Bryan,

Great job this datepicker was the one that seemed to work cross browser and be most usable. I have a few questions I would love your feedback on.


  *   Every accessible calendar widget example uses the tab key to navigate to prev/next month/year controls and the current or selected date. Then uses the arrow keys to navigate through the dates.
     *   Question: Is this interaction of using the tab key then the arrow keys intuitive to the majority of blind screen reader users without any keyboard instructions? How would one know to use the arrow keys after tabbing to the date?
  *   I see that you are using a role=link for the dates which makes sense to me since it is an interactive element. I have seen many datepickers user role=gridcell which I would think the majority of everyday screen reader users would not recognize and not know it can be selected since it is not a common interactive element like a link or button.
     *   Question: I have asked a blind users at a conference if they recognized some of the not so common ARIA attributes and they did not. How do you think we can create awareness and educate the blind screen reader community about these attributes?

Thank you,
Zach Bolena

From: Bryan Garaventa [mailto:bryan.garaventa@levelaccess.com]
Sent: Saturday, December 2, 2017 12:57 AM
To: Steve Green; w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>
Subject: RE: Accessible Interactive Calendar recommendations

Hi,
I’m actually the one who programmed all of the WhatSock widgets archived here
https://github.com/accdc/tsg<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_accdc_tsg&d=DwMGaQ&c=Ezx-H5PgBrUMEEvxgJuTQRYrd-4D8l8I18qkZZzJQbo&r=gfIcoH9AOzWzA6hyAsR7zIoc3exAOSNc5ep43e0oO18&m=lDmRVksMs9u4MsVvM24qT4r3dAfRU301KmoPt4ncUN0&s=t5Sxx19FXuNRA9h9evNic7IkB1Eg-S4kqqyuKlZgJ4A&e=>
(Along with everything else on WhatSock and all of the accessible repos at https://github.com/accdc?tab=repositories<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_accdc-3Ftab-3Drepositories&d=DwMGaQ&c=Ezx-H5PgBrUMEEvxgJuTQRYrd-4D8l8I18qkZZzJQbo&r=gfIcoH9AOzWzA6hyAsR7zIoc3exAOSNc5ep43e0oO18&m=lDmRVksMs9u4MsVvM24qT4r3dAfRU301KmoPt4ncUN0&s=MDXPumSo1Mdt0pPbTw9CtQ0BDRFt0eSOm4u0_SJmSDY&e=> )

My point in saying this is that I am totally blind, and all of these technologies are intentionally designed to be supported in the most common screen reader and browser combinations which is where I do my testing for all of these things. Also, I am perfectly happy to fix any issues that people do encounter, or explain further when there are breakdowns in levels of support in some assistive technologies if applicable.

So if you could please list all of the accessibility issues that you are encountering with the WhatSock datepicker, such as the following, I would appreciate it.
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Date%20Pickers/ARIA%20Date%20Picker%20(with%20Disabled%20Date%20Ranges)/demo.htm<https://urldefense.proofpoint.com/v2/url?u=http-3A__whatsock.com_tsg_Coding-2520Arena_ARIA-2520Date-2520Pickers_ARIA-2520Date-2520Picker-2520-28with-2520Disabled-2520Date-2520Ranges-29_demo.htm&d=DwMGaQ&c=Ezx-H5PgBrUMEEvxgJuTQRYrd-4D8l8I18qkZZzJQbo&r=gfIcoH9AOzWzA6hyAsR7zIoc3exAOSNc5ep43e0oO18&m=lDmRVksMs9u4MsVvM24qT4r3dAfRU301KmoPt4ncUN0&s=kxwIUMEawYaKeqhcqZ0YSB_gVL7o2fF9B17JcliLees&e=>

I have tested  this successfully across IE11, Firefox, and Chrome using JAWS 12 through 18 on Win 7 through 10, as well as the latest versions of NVDA going back three years in the same combinations, plus iOS VoiceOver in Safari on both the iPad and iPhone for touch device support. This too has been tested successfully by sighted Dragon users with voice commands to ensure accessibility there as well using standard voiced keyboard commands as expected.

It’s always possible that I may have missed something, so please let me know which issues you are having difficulty with and I’ll be happy to provide more info or update the widget accordingly.

Best wishes,
Bryan


Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
Bryan.Garaventa@LevelAccess.com<mailto:Bryan.Garaventa@LevelAccess.com>
415.624.2709 (o)
www.LevelAccess.com<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.LevelAccess.com&d=DwMGaQ&c=Ezx-H5PgBrUMEEvxgJuTQRYrd-4D8l8I18qkZZzJQbo&r=gfIcoH9AOzWzA6hyAsR7zIoc3exAOSNc5ep43e0oO18&m=aTPBqqiMeCWfHEq6-3E5QW1DReJZkxeGBh7UnpesSoU&s=iZpIoRo_Ux9E2Q4v6rahQImT15693DzIf5jrgkqt_g4&e=>

From: Steve Green [mailto:steve.green@testpartners.co.uk]
Sent: Friday, December 01, 2017 5:35 PM
To: w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>
Subject: RE: Accessible Interactive Calendar recommendations

As I commented on Dennis’s article, most of those are totally inaccessible (at least for screen reader users) and there are issues with the only two that are usable at all. In fact, the more I test them, the more issues I find.

I have tested lots of other date pickers too, but none are any better. Right now, my view is that there are none that you can just pick up and use, and most are not even fixable. The Deque and Whatsock ones might be fixable but I certainly don’t have the skills to do that.

The problem is compounded by the fact that their behaviour varies greatly depending on not only which screen reader mode you navigate with inside the date picker (i.e. forms mode or virtual cursor mode), but it can also vary depending on how you entered the date picker (i.e. whether you tabbed in or used the arrow keys). There are a surprising number of variations that need to be tested.

I have no doubt that some of the erroneous behaviours are caused by bugs in the assistive technologies rather than by incorrect coding, but my view is that developers have a responsibility to provide solutions that work with the currently available assistive technologies. It’s not satisfactory to say the code is fine because it would work with bug-free assistive technologies that don’t actually exist yet.

Steve Green
Managing Director
Test Partners Ltd


From: Jennifer Sutton [mailto:jsuttondc@gmail.com]
Sent: 01 December 2017 23:33
To: w3c-wai-ig <w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>>
Subject: Re: Accessible Interactive Calendar recommendations


WAI folks:



Here's a collection of date-pickers that Dennis  Lembree put together at one time. Hope it helps/gets you pointed in the right direction. See:



http://www.webaxe.org/accessible-date-pickers/<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.webaxe.org_accessible-2Ddate-2Dpickers_&d=DwMGaQ&c=Ezx-H5PgBrUMEEvxgJuTQRYrd-4D8l8I18qkZZzJQbo&r=gfIcoH9AOzWzA6hyAsR7zIoc3exAOSNc5ep43e0oO18&m=lDmRVksMs9u4MsVvM24qT4r3dAfRU301KmoPt4ncUN0&s=pwTCT1iWSZHhuq7rtURX3KAye7zkP0RfCyhyExujitc&e=>



If folks have more to recommend, feel free to comment on his post (and here, too, of course).



And for good measure, here's an article from Smashing Magazine that's about these, generally, rather than being accessibility-centric:



https://www.smashingmagazine.com/2017/07/designing-perfect-date-time-picker/<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.smashingmagazine.com_2017_07_designing-2Dperfect-2Ddate-2Dtime-2Dpicker_&d=DwMGaQ&c=Ezx-H5PgBrUMEEvxgJuTQRYrd-4D8l8I18qkZZzJQbo&r=gfIcoH9AOzWzA6hyAsR7zIoc3exAOSNc5ep43e0oO18&m=lDmRVksMs9u4MsVvM24qT4r3dAfRU301KmoPt4ncUN0&s=abjJzu2MP8yuMrIQANdvnkT4BfuosaWs1HU9qf7CkFE&e=>



I double-checked Heydon Pickering's Inclusive components site, which lots of folks seem to be enjoying of late, but he hasn't worked on this component, yet:

https://inclusive-components.design<https://urldefense.proofpoint.com/v2/url?u=https-3A__inclusive-2Dcomponents.design&d=DwMGaQ&c=Ezx-H5PgBrUMEEvxgJuTQRYrd-4D8l8I18qkZZzJQbo&r=gfIcoH9AOzWzA6hyAsR7zIoc3exAOSNc5ep43e0oO18&m=lDmRVksMs9u4MsVvM24qT4r3dAfRU301KmoPt4ncUN0&s=nJnOX1rfGdCs7xnUQ25PBcey2koWShJi6Bnoy_P9hYI&e=>



Best,

Jennifer



On 12/1/2017 10:42 AM, Kelly Childs wrote:
Hi All,

Does anyone have a full accessible interactive calendar they recommend?

Thanks!

--
Kelly Childs
ADA Compliance & Graphic Support Manager

888.750.4556, option 7