Time pickers
Recommedations
Best practices are based on browsers' best implementation of the time input HTML spec and WAI ARIA spec.
Currently, chrome (blink) is the most complete implementation and Mac Safari is the only major UA that has zero support for the time input.
​
Keyboard Characteristics:
-
move between time parts (hour, minutes, AM/PM) with the tabs and arrows keys.
-
increment/decrement time part value with the arrow keys
-
autofocus next time part (when appropriate)
-
[missing enhancemet]
-
home key sets the time part value as the min value​
-
end key sets the time part value as the max value
-
PageUp key sets the time part value as -xx units relative to the current value
-
PageDown key sets the time part value as +xx units relative to the current value
-
Screen reader Characteristics
-
Announcements
-
On hour focus: "hour, spin button, {value} default "0"
-
On minutes focus: "minutes, spin button, {value} default "0"
-
On "daypart" (AM/PM) focus: "AM/PAM, spin button, {value} default "0"
-
-
Focus order
-
forward tabbing: the focus is set on the hour spin button​
-
backward tabbing: the focus is set on the AM/PM spin button
-
​
Accessibility Gaps
Preset 1
keyboard:
-
Focusable, pass
-
Operable: pass though the behaviour may be confusing as the incrementation and decrementation of minutes influences the hour + backward tabbing always focuses on the hour instead of the last time part
-
Optional enhancements: fail​
Screen reader:
-
label: partially pass - no option to set a visible label ("time picker").
-
time parts role & props: fail -
-
the role should be "spinbutton"
-
missing aria-valuemin, aria-value max, aria-valuenow
-
time part labels: fail - no announcements of "hour", "minutes"
-
Preset 2
Preset Design: color contrast fail
keyboard:
-
Focusable, pass
-
Operable: pass though behaviour may be confusing as the incrementation and decrementation of minutes influeces the hour + backward tabbing always focuses on the hour instead of the last time part
-
Optional enhancements: fail​
Screen reader:
-
label: partially pass - no option to set a visible label ("time picker").
-
time parts role & props: fail -
-
role should be "spinbutton"
-
missing aria-valuemin, aria-valuemax, aria-valuenow
-
time parts labels: fail - no announcements of "hour", "minutes", "AM/PM"
-
Preset 3
Preset Design: color contrast fail
KB + SR
The use of a native select control does the trick :), but:
label: partially pass - no option to set a visible label ("time picker").
Preset 5
keyboard:
-
Focusable, pass
-
Operable: pass though behaviour may be confusing as the incrementation and decrementation of minutes influeces the hour + backward tabbing always focuses on the hour instead of the last time part
-
Optional enhancements: fail​
Screen reader:
-
label: partially pass - no option to set a visible label ("time picker").
-
time parts role & props: fail -
-
role should be "spinbutton"
-
missing aria-valuemin, aria-valuemax, aria-valuenow
-
time parts labels: fail - no announcements of "hour", "minutes"
-
Preset 4
Preset Design: color contrast fail
keyboard:
-
Focusable, pass
-
Operable: pass though behaviour may be confusing as the incrementation and decrementation of minutes influeces the hour + backward tabbing always focuses on the hour instead of the last time part
-
Optional enhancements: fail​
Screen reader:
-
label: partially pass - no option to set a visible label ("time picker")
-
time parts role & props: fail -
-
role should be "spinbutton"
-
missing aria-valuemin, aria-valuemax, aria-valuenow
-
time parts labels: fail - no announcements of "hour", "minutes"
-
Preset 6
Preset Design: color contrast fail
keyboard:
-
Focusable, pass
-
Operable: pass though behaviour may be confusing as the incrementation and decrementation of minutes influeces the hour + backward tabbing always focuses on the hour instead of the last time part
-
Optional enhancements: fail​
Screen reader:
-
label: partially pass - no option to set a visible label ("time picker").
-
time parts role & props: fail -
-
role should be "spinbutton"
-
missing aria-valuemin, aria-valuemax, aria-valuenow
-
time parts labels: fail - no announcements of "hour", "minutes", "AM/PM"
-