Sympa Accessibility Issue - 21 - Unable to select date from the calendar picker using keyboard

[rm1-uiuc]

The University of Illinois at Urbana-Champaign, Technology Services Accessibility Testing team conducted an Accessibility Review of Sympa on September 25, 2023 and found 26 issues that need to be fixed to make the interface accessible for visual impaired users.

Version

6.2.72

Installation method

Source Package

Expected behavior

User should be able to select a date in the calendar picker using a keyboard

Actual behavior

Unable to select date from the calendar picker using keyboard. When navigating through keyboard, the calendar picker popups when hitting enter but tabbing into the picker makes the picker disappear.

Steps to reproduce

Sympa Accessibility Issue - 21 was determined by manual functional testing performed by the user navigating with keyboard only or using assistive technology such as screen reader. See attached review for more info on specific location in interface.

Unable to select date from the calendar picker using keyboard. When navigating through keyboard, the calendar picker popups when hitting enter but tabbing into the picker makes the picker disappear.

2.1.1 Keyboard

Fig 22 Keyboard accessibility issue on date picker.

Additional information

Attached is the Accessibility Review conducted on Sept 25,2023
Tech Services Review - Accessibility Evaluation Report for Sympa.pdf

[ikedas]

This seems a problem of jQuery UI Datapicker. Its built-in keyboard shortcuts are not common.

Replacing with the other plug-in may fix this issue.

[ldidry]

Maybe we could simply use <input type="date"> 🤔

• MDN: https://developer.mozilla.org/fr/docs/Web/HTML/Element/input/date
• Can I use: https://caniuse.com/input-datetime

[ikedas]

According to Can I use information, some browsers have not support date type attribute (Additionally, IMO we should consider the possibility that earlier versions may survive in actual user environments).

And MDN notes that fallback to text type on unsupported browsers will cause another problem: Ambiguity of date format. In fact, when Sympa also have used text type for date entry, the ISO format year-month-day was very unpopular with some (typically North American) users: They often prefer to month-day-year.

Fortunately, several accessibility-friendly alternatives to the jQuery UI DatePicker can be found, so why not select an appropriate one from among them?

[ldidry]

According to Can I use information, some browsers have not support date type attribute (Additionally, IMO we should consider the possibility that earlier versions may survive in actual user environments).

It’s IE (last release: 2013) and Opera mini (last release: 2015), should we really take those browsers in account?

[racke]

Definitely not (my 2 cents).

[ldidry]

Mmh… Safari 13.1 (march 2020) and 14 (september 2020) are not supporting it either. For the 14, there is 14.1 which supports it, we can safely assume that everybody with Safari 14 had the point release.

Safari 14 is available on MacOS Catalina, Mojave and more recents. This means those mac computers:

• iMac (Late 2012 or later)
• iMac Pro (2017)
• MacBook (Early 2015 or later)
• MacBook Air (Mid 2012 or later)
• MacBook Pro (Mid 2012 or later)
• Mac Mini (Late 2012 or later)
• Mac Pro (Late 2013 or later)

I think it’s safe to assume that we’re good for Safari too since it means that only Mac more than 10 years old are using Safari 13 and that their owners should have installed a more recent browser than Safari 13 (otherwise, I guess that Sympa is the least of their problem when browsing today’s web).

[ikedas]

I do not believe that much consideration needs to be given to browsers for PCs and smart devices. Users of legacy devices such as feature phones need to be considered, as their options are limited.

I noticed the Opera mini survey result in Can I use is as of version 12.1. Can we confirm if recent versions support the date type attribute?

[ikedas]

With Opera Mini for Android 76.0.2254.69201, date type seems usable.

Semantics tests pass

Rendering looks good