デートピッカー

ウェブページのフォームで日付を入力する際の UI コンポーネントとして、「デートピッカー (date picker)」があります。カレンダーがポップアップで開き、その中から任意の日付を選択する、という入力機能です。

マウスや指で画面上を自由にポインティングできるユーザーにとっては、カレンダーの馴染み深い外観とも相まって使い勝手のよい UI と言えそうですが、アクセシビリティ、つまり、マウスが使えずキーボード操作に依存するユーザーや、カレンダーを視覚的に捉えることができない障害者なども含め、あらゆるウェブユーザーがストレスなくデートピッカーを利用できることも、同時に満たしたいものです。

アクセシビリティに配慮したデートピッカーは過去にいろいろ作られて、公開されています。有名なところでは、Deque DatepickerAccDC ARIA DatepickerOpenAjax Date Picker などがあります (参照 : Accessible Date Pickers - Web AxeAccessible datepickers - Axess Lab )。

ただいずれの例も、デートピッカーを起動する元の入力フィールドが <input type="text"> なのが、少し古いかなという印象です。ウェブ制作において HTML5 を用いることが主流になっている現在、要素のセマンティクスという点でも、日付入力フィールドは <input type="date"> を用いて実装したいところです。

<input type="date"> のブラウザ標準デートピッカー

かねてからモバイルデバイス (iOS や Android) では <input type="date"> に対応した OS 標準のデートピッカーが用意されていますが、PC ブラウザでも <input type="date"> に対応していれば、ブラウザ標準のデートピッカーを提示するようになっています。

<input type="date"> に対応したブラウザ標準デートピッカーの例 (左 : Chrome、右 : Firefox)
Chrome および Firefox の標準デートピッカー
各ブラウザのデートピッカーは MDN の <input type="date"> 解説ページ で見ることができます。

このうち、Chrome (特に Windows 版) は、実際に触ってみたところ以下のとおりアクセシビリティの面でかなりよくできている印象を受けました。

さらにアクセシブルなものにするには、日付入力フィールド内のデートピッカーを開くボタンのラベルを具体的にすること (「サブメニューを開く」の代わりに「カレンダーを開く」とする)、月選択を切り替えた際に音声フィードバックがあること (「何年何月のカレンダーが開いたか」がリアルタイムで読み上げられる)、配色のコントラスト (日曜日を示す赤色が背景色に対して 4.5:1 に満たない) ...などいくつか改善の余地があります。しかしそれでも Windows 版 Chrome のデートピッカーは既に高いレベルのアクセシビリティを持っているので、これが他のブラウザにも波及することを期待したいと思います。

<input type="date"> に対応したクロスブラウザでアクセシブルなデートピッカー

ところが現時点では、<input type="date"> への対応状況がブラウザによってまちまちだったり (たとえば Mac の Safari は未対応です)、ブラウザ標準デートピッカーのアクセシビリティのレベルにもバラつきがあったり (たとえば Firefox が提示するデートピッカーはキーボード操作やズーム表示ができません) することから、こうした問題が解決されるまでのつなぎとして、<input type="date"> に対応したクロスブラウザでアクセシブルなデートピッカーを実装するというのはありかもしれません。

今回、試しに Accessible Bootstrap Datepicker (eureka2 / ab-datepicker) をベースにデモを作ってみました。もともとはこれも <input type="text"> を想定して作られていますが、入力フィードに返す値のフォーマットを「yyyy-mm-dd」とすることで <input type="date"> にも対応できます。またローカライズ (多言語対応) も充実していますが、このうち日本語について、スクリーンリーダーでの読み上げが自然になるよう、ラベルを調整しています。

デートピッカーのアクセシビリティ要件をまとめると以下のとおりになりますが、上のデモに触れていただきながら、これらの要件を体感いただけたらと思います。