トピックを検索
入力もキーボード操作もできない日付ピッカー
お届け日の欄が読み取り専用で、クリックするとただのdivでできたカレンダーが開くため、キーボードでは日付を入れられず、スクリーンリーダーには数字しか聞こえません。入力できるようにしても、どの順と形で書けばよいかが示されていません。
<input id="delivery" type="text" readonly> 問題
キーボード利用者はお届け日をまったく入れられず、スクリーンリーダーの利用者には選んだ日も今日も分からない数字だけが聞こえます。入力できるようになっても、どの順と形で書けば読み取られるのかがどこにも書かれていません。
あるショップの購入手続きで、お届け日を指定します。欄には「日付を選択」と表示され、クリックするとその下に2026年11月のカレンダーが開き、今日の2日（月）が太字になっています。12日（木）をクリックすると、欄に「2026/11/12」が入ります。キーボードでは、Tabキーで欄に届いてもそこで止まります。文字を入力しても何も入らず、Enterキーや矢印キーを押しても何も開かず、次のTabキーで次の操作部品へ移ってしまいます。日付を指定する手段がないため、注文できません。スクリーンリーダーは「お届け日」を読み取り専用のテキスト欄として読み上げ、入力できないことは伝えますが、ほかの手段は示しません。マウスでカレンダーを開いても、スクリーンリーダーは各日を「12」のように数字だけで読み、選べることも、どの日が選ばれているかも、どれが今日かも伝えません。
ショップがすぐにできる修正として、欄に入力できるようにします。ショップのコードは、すべての日付を年/月/日として読みます。そのため、日本でよく書かれるように「11/12」と月/日だけを入力した人や、「2026年11月12日」と入力した人の日付は、読み取れません。ラベルは「お届け日」とだけ書かれていて、どの形で書けばよいかを知る手段はありませんでした。カレンダーは変わっていないため、前と同じように使えないままです。
達成基準2.1.1は、マウスでできることをキーボードでもできるよう求めています。欄に readonly があるため、ブラウザーはフォーカスは受け取らせますが入力は拒み、欄を埋める手段はカレンダーだけです。カレンダーは click イベントで開きますが、テキスト欄はどのキーでもこのイベントを発生させません。日は div 要素で、それを囲む箱に付けたクリック処理で選ばれ、divはフォーカスを受け取れません。ブラウザーはこの三つのどれも許し、どれも単独では誤りではありませんが、組み合わさると日付の指定はマウスだけのものになります。
達成基準4.1.2は、操作部品の名前、役割、状態を支援技術が取得できるよう求めています。画面の上では、日は操作部品です。コードでは、ただのdivです。役割がなく、名前は日の数字だけで、選んだ日と今日は、見た目だけを変える selected と today のクラスで示されています。ブラウザーはマークアップから役割と状態を伝えますが、クラスはどちらも持たないため、スクリーンリーダーには伝えることがありません。
達成基準3.3.2は、入力が必要な場所にラベルや説明を求めていて、その解説ページは、形式をテキストで示した日付の欄を例に挙げています。日付は、年、月、日のどれを先に書くことも、スラッシュ、ハイフン、漢字で区切ることもできますが、二つ目の修正前のコードはそのうち一つしか読めず、それがどれかを示していません。「お届け日」は欄の名前にはなっても書き方は伝えないため、「11/12」や「2026年11月12日」は読み取れず、ページの上ではその理由も分かりません。
お届け日や予約日は、支払いの前に必須であることがよくあります。マウスなしでは埋められない欄は、注文そのものを止めます。スマートフォンではタップでカレンダーが開くため、タッチ操作での確認では問題が見つかりにくく、それがこの欄が長く残る理由の一つです。
10グループ中4グループに影響
- 全盲 （影響あり）
- 弱視 （影響あり）
- 色覚 （影響なし）
- ろう （影響なし）
- 難聴 （影響なし）
- 発話 （影響なし）
- 手の操作 （影響あり）
- 届く範囲・力 （影響なし）
- 認知 （影響あり）
- 光過敏 （影響なし）
- 手の操作が限られる キーボードやスイッチの利用者は、読み取り専用の欄に入力できず、カレンダーのどの日にも届かないため、お届け日を指定できず、注文を確定できません。
- 視覚を使わない スクリーンリーダーの利用者が出会うのは、入る手段のない読み取り専用の欄と、選べることも、どれが選ばれているかも、どれが今日かも伝えない数字だけのカレンダーです。
- 言語・認知・学習の能力が限られる 欄が求める順と形を示していないと、別の書き方をする人は、何の知らせもなく違う日付になったり、読み取れない日付として扱われたりして、もう一度推測することになります。
- 視覚が限られる 画面上のポインターを見つけたり追ったりしにくい弱視の人は、代わりに日付を入力することも、キーボードで日を移動することもできず、小さな数字をマウスで探すしかありません。
axeのようなスキャナーはラベル付きのテキスト欄を見つけ、合格にします。readonly は正しい属性で、日付を入力できなければならないという規則もありません。カレンダーはクリックするまで表示されず、日は役割もARIAもないdivなので、規則が指摘できるものがありません。「お届け日」が形式について十分に説明しているかは、規則が問わない問題です。日付ピッカーのライブラリーは、初期設定のままで一つ目の修正前のような読み取り専用の欄になることがあります。たとえばflatpickrは、allowInputオプションを設定しない限り、欄を読み取り専用にします。AIに「日付ピッカー」を頼むと、カレンダーをdivで書くか、role="grid" を付けても日にはフォーカスも aria-selected もないままにすることがあります。使えるかどうかは、入力し、キーボードでカレンダーを開き、読み上げを聞いて初めて分かります。
試してみる
キーボードだけで、お届け日を11月12日（木）にしてください。Tabで欄へ移動し、日付を入力するか、カレンダーを開きます。
- 問題1：Tabで「お届け日」へ移動し、文字を入力するか、Enterや下矢印キーを押します。何も入らず、何も開きません。カレンダーはクリックでしか開きません。
- 欄をクリックしてカレンダーを開き、日にマウスを重ねてください。マウスの下を読むスクリーンリーダーの読み上げが下の欄に出ます。数字だけで、どの日が選ばれているかも、今日がどれかも読まれません。
- 問題2：「11/12」や「2026年11月12日」と入力し、Tabを押します。ショップがどう読むかを確かめてください。
- 修正を適用します。日付を入力するか、ダイアログの修正では、Tabでカレンダーのボタンへ移動してEnterを押し、矢印キー、Page Up、Page Downで移動します。
問題あり 修正できますか？
スクリーンリーダーの読み上げ：
（Tabで「お届け日」へ移動）
修正方法
日付は、ページが示す形式か標準の日付欄で入力できるようにし、カレンダーを置くなら、キーボードで日に届き、スクリーンリーダーが読み上げるダイアログにします。
- 1日付を入力でき、欄が書き方を示しているか、標準の日付欄である。
- 2カレンダーはボタンから開き、矢印キー、Enter、Escapeで使える。
- 3各日は日付全体で読まれ、選んだ日と今日は、見た目だけでなくコードでも伝える。
読み取り専用の欄と、クリックでしか開かないカレンダー
<label for="delivery">お届け日</label><input id="delivery" name="delivery" type="text" readonly placeholder="日付を選択"><div class="calendar" hidden> <div class="cal-head"> <span class="prev">‹</span> <span class="cal-month">2026年11月</span> <span class="next">›</span> </div> <div class="cal-week"> <span>日</span> <span>月</span> <span>火</span> <span>水</span> <span>木</span> <span>金</span> <span>土</span> </div> <div class="cal-days"></div></div>標準の日付入力
<label for="delivery">お届け日</label><input id="delivery" name="delivery" type="date">この方法を選ぶ理由：まずHTMLの要素を使う
欄は入力を拒み、カレンダーはクリックでしか開かず、日はどのキーも届かないdivなので、キーボードではまったく日付を指定できません。日には役割がなく、選んだ日と今日はクラスなので、スクリーンリーダーは数字しか読みません。
ブラウザーは、日付の各部分を順に入力させ、自身のカレンダーから選ばせ、欄の名前と役割と入っている日付をスクリーンリーダーに伝えます。部分の順はブラウザー自身の言語設定から決まり、多くのデスクトップのブラウザーでは空の欄に「年/月/日」のように示されるため、自分で言葉を書かなくても形式が伝わります。送られる値は、画面上の順にかかわらず常に「2026-11-12」です。スマートフォンでは、タップするとシステムの日付の選択画面が開きます。スクリプトとスタイルはなくなり、保守するカレンダーはもう残りません。
ただし、満たせるのは各ブラウザーの部品が正しく動く範囲までです。カレンダーの見た目は変えられません。min と max で範囲は限れますが、日曜日や売り切れの日のように一日ずつ除くことはできないため、選ばれたあとで断る必要があります。部分の読み上げ方はブラウザーとスクリーンリーダーの組み合わせによって違うため、対応するものすべてで確認してください。順はページではなくブラウザーに従うため、日本語のページでも、米国英語に設定したブラウザーでは月が先に表示されます。標準の日付欄の横に自分で形式を書くと食い違うことがあるため、書かないでください。
どちらも2.1.1、4.1.2、3.3.2を満たします。標準の日付入力はスクリプトが要りません。どのブラウザーも自身のキー操作、カレンダー、読み上げを用意し、スマートフォンではシステムの選択画面が開きます。範囲の中ならどの日でもよく、ブラウザーが描くカレンダーの見た目で差し支えない場合に選んでください。日曜日や空きのない日のように除く日がある場合や、料金のように日付以外もカレンダーに出す必要がある場合は、入力欄とダイアログを作り、キー操作、状態、タッチ操作の確認と保守を自分で引き受けてください。どちらでも、日付は入力できます。
カレンダーをまったく置かず、形式を示した入力欄だけにしても、それだけで修正になります。カレンダーを足すなら、上のダイアログのように使えるものにします。二つ目の修正前が示すとおり、古いカレンダーを欄の横に残したままでは問題が残るからです。カレンダーのスクリプトが読み込めなくても、欄は使えるようにしておきます。日付ピッカーをライブラリーで描く場合は、flatpickrのallowInputのような入力を許すオプションを有効にし、ドキュメントを信用する前に、下の手順のとおりキーボードとスクリーンリーダーでカレンダーを確認してください。
形式は、入力を始めると消えるプレースホルダーだけでなく、見えるテキストで示します。「ラベルがない、または表示と食い違うフォームの入力欄」を参照してください。読み取りも寛容にします。先頭のゼロがあってもなくても、スラッシュの代わりにハイフンやドットで区切っても、示した順なら読み取れます。「2026年11月12日木曜日」のように日付を言葉で欄の横に示し返すと、注文を送る前に読み違いに気づけます。
日曜日のように選べない日も、週の並びをそろえるためにグリッドに残します。aria-disabled="true" を付け、矢印キーでは通り過ぎられるようにし、理由を欄の近くにテキストで書きます。標準の日付入力では一日ずつ除くことはできず、min と max で決められるのは最初と最後の日だけです。
ほかの日付や時刻には、別の欄が合います。
- 生年月日のように本人が知っている日付は、今日の月から開くカレンダーで探すより、入力するほうが速くできます。GOV.UKの日付入力のように、ヒントを添えたfieldsetの中に年、月、日の欄を分けて置くか、形式を示した一つの入力欄にします。
- 時刻には、標準の
<input type="time">か、「24時間制。例：14:30」のように形式を示した入力欄を使えます。決まった数の配達時間帯なら、ラジオボタンにします。 - divで作った時と分のスクロールする回転式の選択部品は、一つ目の修正前と同じく問題になります。標準の部品と同じキー操作と役割を持たせるか、標準の部品を使ってください。
欄にフォーカスが当たったとたんにカレンダーが開いてフォーカスを奪うのは、別の問題です。「操作するだけでページが変わるドロップダウンと入力欄」で扱っています。
AI コーディングアシスタントで修正しますか？ このガイドを Markdown で取得、または全ガイドをコーディングエージェントで使う。
修正の確認
マウスを使わない5つの確認
確認方法： キーボード、スクリーンリーダー、ズーム、強制配色
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。共通の日付欄やカレンダーのコンポーネントを変更した際は、再度確認します。
制限
これは日付を一つ選ぶための出発点となる実装例です。チェックインとチェックアウトのような期間の選択、タイムゾーン、和暦のようなグレゴリオ暦以外の暦には当てはまりません。ショップが配達する日かどうかの確認は、コードから省いています。実際の日付を使い、対応するブラウザーと支援技術で、デスクトップだけでなくスマートフォンでも操作全体を確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
参考資料
- WCAG Understanding: keyboard（新しいタブで開きます）
- WCAG Understanding: name-role-value（新しいタブで開きます）
- WCAG Understanding: labels-or-instructions（新しいタブで開きます）
- WCAG Technique G89（新しいタブで開きます）
- ARIA APG: datepicker-dialog（新しいタブで開きます）
- w3.org: wai-aria-1.2（新しいタブで開きます）
- developer.mozilla.org: date（新しいタブで開きます）
- design-system.service.gov.uk: date-input（新しいタブで開きます）
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。