背景
input[type=date]のdatepickerでは以下のようにclear（削除）ボタンがあります。
clear（削除）ボタンを表示させないようにするには簡単な実装では難しいです。
aria-practicesでdatepickerのサンプルがありました。これはclear（削除）ボタンがないです。
しかし本番環境向けではないそうです。
それについて調査し、どのようなケースで使用可能なのかについて整理します。
前提知識
ARIAとは
- Accessible Rich Internet Application の略
- ウェブ・コンテンツやウェブ・アプリケーション（特にJavaScriptで開発されたもの）を障害者にとってよりアクセシブルにする方法を定義する役割と属性のセット
アクセシビリティとは
- 自分のウェブサイトを可能な限り多くの人に利用してもらうようにすること
- かつてはハンディキャップを持つ人々のためのものだった
- 現在はモバイルデバイスや遅いネットワークを利用している人々のためのものでもあると考えられている
- 能力や環境にかかわらず全員を同一に扱い、同じ機会を与えることと考えることもある
本番環境向けではないという記述について
There may be support gaps in some browser and assistive technology combinations, especially for mobile/touch devices. Testing code based on this example with assistive technologies is essential before considering use in production systems.
Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA.
- モバイル/タッチ・デバイスに対するサポート・ギャップがあるそうです。
- セマンティックHTMLを最大限に利用することを推奨されています。
最後に
- PCでの使用であれば問題ないのかなと個人的には思いました。
-
<dialog>を使ってサンプルコードを書き直す等、セマンティックなHTMLで実装し直そうと思います。 - サンプルコードではキーボードサポートが充実していましたが以下が気になりました。
- 実際ユーザが常識の範囲でどこまでキーボード操作で使うのか
- 取扱説明書のようなものを別途用意するか、キーボードガイドを要素の近くに表示させるべきなのか
- MDNのアクセシビリティのチュートリアルを読んで勉強してみます。