You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/body/acknowledgements.php
+1
Original file line number
Diff line number
Diff line change
@@ -21,6 +21,7 @@
21
21
</li>
22
22
<li>Sahil Singh for unit tests for the <ahref="input-mask.php">input mask component</a>.</li>
23
23
<li><ahref="https://www.useragentman.com/">Zoltan Hawryluk</a> for starting the Enable project to begin with.</li>
24
+
<li><ahref="https://github.com/shiprarawal">Shipra Rawal</a> for the <ahref="./infographic.php">accessible infographics</a> and <ahref="./datetimepicker.php">accessible datetime picker</a> component.</li>
"label": "Add a dropdown to select the language preference",
68
+
"highlight": "language-select",
69
+
"notes": "In this example, there are only two language options. However, there are many locales available and details can be found <a href=\"https://flatpickr.js.org/localization/\" target=\"_blank\">here.</a>"
70
+
},
71
+
{
72
+
"label": "Add an input and provide a class or id to it. The same class or id needs to be passed in the javascript.",
73
+
"highlight": "datetimepicker",
74
+
"notes": "Once you have got the instance of the datepicker, you can easity access it's properties."
75
+
},
76
+
{
77
+
"label": "Add few span tags having the description of the time field. It gets announced when use selects the hour, minute or AM/PM",
78
+
"highlight": "hour-description",
79
+
"notes": "The aria-describedby property is set using the javascript. The id allocated to the span attributes is assigned dynamically to the time input."
<p>The instructions for installing a flatpickr module are available <a href="https://flatpickr.js.org/getting-started/"
87
+
target="_blank">here</a></p>
88
+
89
+
<h3>Keyboard Support</h3>
90
+
<h4>Datetime picker: Open and close dialog</h4>
91
+
<table class="datetimepicker__table">
92
+
<thead>
93
+
<tr>
94
+
<th>Key</th>
95
+
<th>Function</th>
96
+
</tr>
97
+
</thead>
98
+
<tbody>
99
+
<tr>
100
+
<td>Tab and Enter</td>
101
+
<td>
102
+
When the datetime picker field receives the focus, it opens the datetime picker dialog. Use the <code>Up</code>
103
+
or <code>down</code> arrow key to select the current date.
104
+
Press <code>Enter</code> key to confirm the date selection.
105
+
</td>
106
+
</tr>
107
+
<tr>
108
+
<td>Esc</td>
109
+
<td>Closes the dialog and returns focus to the "Select Date" field. Press <code>Enter</code> to reopen the
110
+
Datetime picker dialog.</td>
111
+
</tr>
112
+
</tbody>
113
+
</table>
114
+
<h4>Date Picker Dialog: Navigate different dates, month & year</h4>
115
+
<table class="datetimepicker__table">
116
+
<thead>
117
+
<tr>
118
+
<th>Key</th>
119
+
<th>Function</th>
120
+
</tr>
121
+
</thead>
122
+
<tbody>
123
+
<tr>
124
+
<td>Up Arrow</td>
125
+
<td>
126
+
Moves focus to the same day of the previous week.
127
+
</td>
128
+
</tr>
129
+
<tr>
130
+
<td>Down Arrow</td>
131
+
<td>Moves focus to the same day of the next week.
132
+
</td>
133
+
</tr>
134
+
<tr>
135
+
<td>Right Arrow</td>
136
+
<td>
137
+
Moves focus to the next day.
138
+
</td>
139
+
</tr>
140
+
<tr>
141
+
<td>Left Arrow</td>
142
+
<td>
143
+
Moves focus to the previous day.
144
+
</td>
145
+
</tr>
146
+
<tr>
147
+
<td>
148
+
<ul>
149
+
<li>Mac (Control + Command/Option/Shift + Left arrow key)</li>
150
+
<li>Windows (Control + Shift + Left arrow key)</li>
151
+
</ul>
152
+
</td>
153
+
<td>Changes the grid of dates to the previous month.</td>
154
+
</tr>
155
+
<tr>
156
+
<td>
157
+
<ul>
158
+
<li>Mac (Control + Command/Option/Shift + Right arrow key)</li>
159
+
<li>Windows (Control + Shift + Right arrow key)</li>
160
+
</ul>
161
+
</td>
162
+
<td>Changes the grid of dates to the next month.
163
+
</td>
164
+
</tr>
165
+
<tr>
166
+
<td>
167
+
<ul>
168
+
<li>Mac (Control + Command/Option/Shift + Down arrow key)</li>
169
+
<li>Windows (Control + Shift + Down arrow key)</li>
170
+
</ul>
171
+
</td>
172
+
<td>Changes the grid of dates to the previous year.
173
+
</td>
174
+
</tr>
175
+
<tr>
176
+
<td>
177
+
<ul>
178
+
<li>Mac (Control + Command/Option/Shift + Up arrow key)</li>
179
+
<li>Windows (Control + Shift + Up arrow key)</li>
180
+
</ul>
181
+
</td>
182
+
<td>Changes the grid of dates to the next year.
183
+
</td>
184
+
</tr>
185
+
</tbody>
186
+
</table>
187
+
188
+
<h4>Date Picker Dialog: Select time</h4>
189
+
<table class="datetimepicker__table">
190
+
<thead>
191
+
<tr>
192
+
<th>Key</th>
193
+
<th>Function</th>
194
+
</tr>
195
+
</thead>
196
+
<tbody>
197
+
<tr>
198
+
<td>Enter</td>
199
+
<td>
200
+
Press the Enter key to activate the selected date. It automatically takes focus to Time field. Press <code>Enter</code> again to select the time. Anytime to move focus out of the time field, press the <code>Shift + Tab</code> key.
201
+
</td>
202
+
</tr>
203
+
</tbody>
204
+
</table>
205
+
206
+
<h2>Using HTML5 date and time control </h2>
207
+
208
+
<?phpincludeStats([
209
+
"doNot" => true,
210
+
"comment" =>
211
+
"This does not work with assistive technologies in most web browsers.",
212
+
]); ?>
213
+
<p>
214
+
Ironically, this seems to be inaccessible compared to the ARIA version. Because of the below reasons, it is one of the
215
+
cases where ARIA works better.
216
+
</p>
217
+
<ol>
218
+
<li>Inconsistent Browser Support and Visual Design:
219
+
<p>
220
+
The appearance of the native date-time picker can vary significantly between browsers and operating systems.
221
+
For instance, the date and time control feature looks quite different in Firefox (version 129),
222
+
whereas in Safari (version 16.6), the placeholder text is grayed out and the calendar icon is missing.
223
+
Moreover, in Safari, when users try to adjust the year field, the value can range from 0001 to 275760.
224
+
Despite the accepted format being YYYY, users can still input up to six digits in the year field, and
225
+
the focus does not automatically shift to the next field.
226
+
These inconsistencies can create a confusing user experience, particularly for individuals with cognitive disabilities.
227
+
</p>
228
+
</li>
229
+
<li>Validation and Error Handling:
230
+
<p>
231
+
Since users can enter an invalid date via the keyboard,
232
+
incorporating custom validation and error handling may be crucial to ensure that all users clearly understand what is required.
233
+
</p>
234
+
</li>
235
+
<li>Presentation format:
236
+
<p>
237
+
The date is displayed differently across various operating systems. On a Mac, the format in Chrome (version 127),
238
+
Safari (version 16.6), and Firefox (version 129) is YYYY-MM-DDThh:mm
239
+
. In contrast, on Windows, the format in Chrome (version 127) and Firefox (version 129) is mm/dd/yyyy hh:mm.
240
+
</p>
241
+
</li>
242
+
<li>Keyboard Navigation:
243
+
<p>
244
+
Users who rely on keyboard navigation for forms might struggle with the date-time picker.
245
+
Certain implementations lack straightforward keyboard navigation, making it challenging for users to select dates and times without using a mouse.
246
+
For example, if a user is navigating using only the keyboard on Chrome (version 127) on a Mac, the focus may not shift to the calendar icon that opens the date-time picker dialog,
247
+
leaving the user with no keyboard-based option to access the dialog and only allowing date entry.
248
+
</p>
249
+
</li>
250
+
<li>Lack of Customization:
251
+
<p>
252
+
The native control does not provide much flexibility in terms of styling or behavior customization.
253
+
This can make it difficult to match the control with the overall design and accessibility requirements of any
254
+
website.
255
+
</p>
256
+
</li>
257
+
<li>Screen Reader Compatibility:
258
+
<p>
259
+
Certain screen readers might not correctly convey the input type or offer an intuitive interaction method with the date-time picker.
260
+
This can hinder users who rely on screen readers from effectively understanding and using the control.
261
+
For instance, when using VoiceOver with Chrome on Mac, if the user enters the date and then focuses on the hour field,
262
+
VoiceOver might announce something like '-9.1 %, Hours Enter the travel (date and time).'
263
+
This confusing negative percentage can disorient the user.
"notes": "Just like any other form element, this needs a proper label."
283
+
},
284
+
{
285
+
"label": "Give keyboard instructions using aria-describedby.",
286
+
"highlight": "aria-describedby",
287
+
"notes": "Since the format of the date and time may not be localized according to the user's regional settings, these instructions may help some screen reader users use this component properly."
288
+
},
289
+
{
290
+
"label": "Set up the input type as datetime-local",
291
+
"highlight": "datetime-local",
292
+
"notes": "Note that input type datetime-local is required when you need both date and time input together. Otherwise input type as 'date' or 'time' could be used when you only need the user to input a date or time."
// disableMobile: true, // By default, Flatpicker shows the native HTML5 datepicker on mobile devices. To change this behavior and maintain a consistent appearance across all devices, set this property to true.
11
+
allowInput:true, // allows the user to enter date using keyboard
12
+
dateFormat: "Y-m-d H:i",
13
+
locale: language==='fr' ? 'fr' : 'default', // Set locale based on language
0 commit comments