DatePickerのa11yについて

HTML nativeであれば <input type="date">がある。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/date
表示される日付の書式は実際の value とは異なります。 — 表示される日付はユーザーのブラウザーに設定されたロケールに基づいた書式になりますが、解釈される value は常に yyyy-mm-dd の書式です。
表示される日付はブラウザーのロケール設定次第。

makotot

<input type="date">Safari 16.6時点でのバグについて 👀

makotot

<input type="date">はブラウザー間での表示差異が多々ある
→ DatePickerのライブラリーが主にこの課題を解決する目的で利用される

makotot

2019年時点で <input type="date">のアクセシビリティーの課題について言及した記事

makotot

What makes an accessible date picker? Is it even possible?

makotot

APG patternsはアクセシブルな実装例。

The code in this example is not intended for production environments.

makotot

https://designsystem.digital.gov/components/date-picker/accessibility-tests/
アメリカ連邦政府のデザインシステムにおけるdatepickerのa11yテスト項目
タッチターゲットサイズが最低限24x24px確保すること

2.5.8 Target Size / WCAG AA

日付入力しただけでは確定せず、送信操作が必要であること

3.2.2 On Input / WCAG A

識別容易なエラー。不正な日付形式であればエラーメッセージでそれを明示

3.3.1 Error Identification / WCAG A

入力するべき日付形式を把握できるように説明文を設けること

3.3.2 Labels or Instructions / WCAG A

200%まで拡大してもDatePickerを視認できて操作できること

1.4.4 Resize Text / WCAG AA

400%まで拡大してもスクロールすることなく閲覧できること

1.4.10 Reflow / WCAG AA

DatePickerの全ての要素にキーボード操作のみでアクセスできること

2.1.1 Keyboard / WCAG A

DatePicker内でフォーカストラップしないこと

2.1.2 No Keyboard Trap / WCAG A

DatePicker内のキーボード操作による移動が論理的な順序になること

2.4.3 Focus Order / WCAG A

フォーカスインジケーターが明確に可視化されること

2.4.7 Focus visible / WCAG AA

フォーカスインジケーターが十分なサイズ、コントラスト比を持つこと

2.4.13 Focus appearance / WCAG AAA

キーボード操作による移動によってDatePickerの要素にフォーカスしただけでUIの変化を起こさないこと

3.2.1 On Focus / WCAG A

スクリーンリーダーのみでDatePickerの操作が可能であること

1.3.1 Info and Relationships / WCAG A

スクリーンリーダーが視覚的な順序と同じように読み上げること

1.3.2 Meaningful sequence / WCAG A

スクリーンリーダーが年月日の入力欄の入力目的を示すこと

1.3.5 Identify input purpose / WCAG AA

スクリーンリーダーが日付の選択状態を示すこと

4.1.2 Name, role, value / WCAG A