トピックを検索
一部選択の状態が読み上げられない「すべて選択」チェックボックス
一部の行だけをチェックしたときに「すべて選択」のチェックボックスに出る横線はクラスで描いただけのため、スクリーンリーダーは「チェックなし」と読み上げてしまう
all.classList.toggle('partial', ticked > 0 && !all.checked); 問題
一部の行がチェックされているのに、スクリーンリーダー利用者には「すべて選択」が「チェックなし」と読まれ、何かが選ばれていることが分からない
アカウントのページに、請求書の一覧があります。各行にチェックボックスがあり、一覧の上に「すべて選択」のチェックボックス、下に「選択した請求書をダウンロード」ボタンがあります。3月と4月をチェックすると、「すべて選択」のボックスが空から横線に変わります。この横線は一覧のまとめです。一部の請求書がチェックされていて、すべてではないことが一目で分かります。長い一覧では、画面の外の行がまだチェックされていることを示す、ただ一つの手がかりになることもよくあります。
スクリーンリーダーで同じ2件をチェックし、Shift + Tabで「すべて選択」に戻ります。読み上げは「すべて選択、チェックボックス、チェックなし」です。画面のボックスには横線が出ていますが、コード上のチェックボックスは、ただチェックされていない状態です。Spaceを押すと、マウスのときと同じようにすべての請求書がチェックされるので、操作はできます。問題は伝える内容です。あとから一覧に来た人や、上から順に読む人は、「すべて選択」がチェックなしだと聞き、すべての行を読まない限り、すでに2件が選ばれていることを知る方法がありません。
達成基準4.1.2 名前・役割・値は、利用者が設定できるコントロールの状態を、支援技術が取得できることを求めています。横線の付いたチェックボックスは、一部だけチェックされた第3の状態にあり、その状態は画面上にしかありません。
HTMLのチェックボックスのチェックの値は、チェックありとチェックなしの2つです。3つ目の見た目を決めるのは indeterminate という別のフラグで、スクリプトから扱うプロパティとしてしか存在しません。indeterminate という属性はないため、マークアップに書くことも、テンプレートで属性として設定することもできません。スクリプトでこのプロパティを true にすると、ブラウザーは標準の横線を描き、CSSでは :indeterminate に一致するようになり、支援技術にはチェックボックスを一部チェック（mixed）の状態として伝えます。スクリーンリーダーは、一部だけチェックされた状態として読み上げます。言い方はスクリーンリーダーによって異なります。この例のスクリプトは、このプロパティを一度も設定していません。クラスを付け、CSSがそのクラスからボックスに横線を描いています。見た目とブラウザーが伝える状態は別々で、変わったのは見た目だけです。
同じ横線は、ほかの方法でもよく作られ、同じように失敗します。
- HTML標準のチェックボックスに
aria-checked="mixed"を付ける。ARIA in HTMLはinput type="checkbox"へのaria-checkedを禁じており、Chromeはこの属性を無視してinput自身のチェックの状態を伝えるため、ボックスはチェックなしと読まれたままです。 role="checkbox"を持つbuttonやdivで作った独自のチェックボックスで、スクリプトがaria-checkedを"true"か"false"にしかせず、"mixed"にしない。- 1行でもチェックされると
checked = trueにし、チェックマークの上に横線を描くスクリプト。ボックスには横線が出ますが、読み上げは「チェックあり」で、すべての請求書が選ばれているかのように伝わります。
「すべて選択」は、請求書、メッセージ、ファイル、注文、表の行など、画面に収まらない一覧の上に置かれます。一覧全体の状態をまとめて示すのは、このチェックボックスの見た目だけです。そのまとめが描かれているだけでは、画面を見ない人にはまったく届きません。
10グループ中1グループに影響
- 全盲 （影響あり）
- 弱視 （影響なし）
- 色覚 （影響なし）
- ろう （影響なし）
- 難聴 （影響なし）
- 発話 （影響なし）
- 手の操作 （影響なし）
- 筋力・可動域 （影響なし）
- 認知 （影響なし）
- 光過敏 （影響なし）
- 視覚を使わない スクリーンリーダー利用者が「すべて選択」に移ると、請求書が2件チェックされているのに「チェックなし」と読まれます。目で見れば一部が選ばれていると分かる横線は読まれないため、確かめるにはすべての行を順に聞くしかありません。
チェックボックスにはラベルもロールも正しい状態もあるため、axeなどの自動チェックは合格にします。マークアップに誤りはなく、足りないものがあるだけです。また、自動チェックは見た目と伝わる状態を比べません。EaseWebの診断は、1行をSpaceでチェックし、見た目が変わったのにチェックなしと読まれたままの「すべて選択」を ew:select-all-state-missing として報告します。修正を頼むと、コード生成AIはHTML標準のチェックボックスに aria-checked="mixed" を付けたり、マークアップに indeterminate を属性として書いたりすることがあります。どちらもChromeが伝える内容を変えず、チェックボックスはチェックなしと読まれたままです。前者は、HTML標準のチェックボックスの aria-checked が実際の状態と食い違うため、axeが aria-conditional-attr として見つけます。ただし、求められる修正は属性を外すことなので、外せば横線はまた伝わらなくなります。クラスではなく、ブラウザーのアクセシビリティパネルで「すべて選択」の状態を確認してください。
試してみる
請求書を2件チェックしてから「すべて選択」に戻り、どう読まれるか聞いてみましょう
Tabで3月に移動してSpace、Tabで4月に移動してSpaceを押し、Shift + Tabを2回押します。下の欄に、フォーカスの移動に合わせたスクリーンリーダーの読み上げが出ます。「すべて選択」で読まれる内容と、見えているボックスを比べてから、そこでSpaceを押してみてください。
問題あり 修正できますか？
スクリーンリーダーの読み上げ：
（Tabで一覧を移動）
修正方法
「すべて選択」にコード上の一部チェックの状態を持たせ、そこから横線を描く
- 1一部の行だけがチェックされているときは、indeterminate プロパティか aria-checked="mixed" で一部チェックの状態にする
- 2横線はクラスではなくその状態から、色だけに頼らない印として描く
- 3HTML標準のチェックボックスに aria-checked を付けない
<form action="/invoices/download" method="post"> <label class="check"> <input type="checkbox" id="select-all"> すべて選択 </label> <ul class="invoices"> <li> <label class="check"> <input type="checkbox" name="invoice" value="2026-03"> 2026年3月 </label> </li> … </ul> <button type="submit">選択した請求書をダウンロード</button></form>Indeterminate プロパティ
<form action="/invoices/download" method="post"> <label class="check"> <input type="checkbox" id="select-all"> すべて選択 </label> <ul class="invoices"> <li> <label class="check"> <input type="checkbox" name="invoice" value="2026-03"> 2026年3月 </label> </li> … </ul> <button type="submit">選択した請求書をダウンロード</button></form>この方法を選ぶ理由：まずHTMLの要素を使う
2行がチェックされていると、スクリプトは checked を false にして partial クラスを付け、CSSがそのクラスから横線を描きます。ブラウザーが伝えるのは、チェックボックスに描かれたものではなく、チェックボックスが持つ状態なので、スクリーンリーダーは「チェックなし」と読み上げます。
スクリプトはクラスを付ける代わりに、チェックボックス自身の indeterminate プロパティを設定し、CSSはプロパティが true の間だけ一致する :indeterminate から横線を描きます。スクリーンリーダーが読む状態と目に見える横線が一つの値から決まるので、食い違うことがありません。remove('partial') の行もなくなります。一部チェックのチェックボックスを押すと、ブラウザー自身が indeterminate を false に戻してチェックを付けるため、「すべて選択」は修正前と同じようにすべての行をチェックします。
どちらも基準を満たします。「すべて選択」がHTML標準のチェックボックスなら、indeterminate プロパティを使ってください。ほとんどの場合、標準のチェックボックスで作れます。今あるスクリプトに1行足すだけで、ブラウザーが一部チェックの状態を伝え、ボックスが押されればその状態を解除してくれるので、ほかに変えるところはありません。これが推奨する理由です。「すべて選択」がすでに独自のチェックボックスになっている場合（すべてのチェックボックスをボタンで描くコンポーネントライブラリーを使っている場合など）は、aria-checked="mixed" を使い、行をチェックするのと同じスクリプトで3つの状態をすべて設定します。横線のために、HTML標準のチェックボックスを独自のものに作り直さないでください。プロパティを使えば、そのままで横線も一部チェックの状態も得られます。
indeterminate はプロパティでしかないため、マークアップからは設定できず、リセットなどで元に戻ることもありません。ページを読み込んだときに、すでにチェックされている行から設定し、利用者が行をチェックしていないのに行の状態が変わるときにも設定し直します。フォームのリセットは各チェックボックスのチェックの状態を戻しますが indeterminate には触れないので、リセットの後にも設定します。一覧の絞り込みやページ送りの後、行を足したり消したりした後も同じです。indeterminate をマークアップに書くテンプレートやフレームワークでは何も起きません。描画のたびに参照（ref）から設定するなど、コンポーネントのスクリプトでプロパティを設定してください。
この例では、一部チェックのチェックボックスを押すとチェックが付きます。「すべて選択」は横線からチェックマークに変わり、すべての行がチェックされます。ARIA Authoring Practicesのチェックボックスのパターンには、押すたびにすべてチェック、すべて解除と進み、3回目で利用者が作った一部の選択に戻る「すべて選択」の例もあります。スクリプトは増えますが、どの段階でも伝える状態がボックスと一致していれば、どちらの動きでも4.1.2を満たします。
「一部」は、ボックスを淡く塗るだけでなく、横線や小さな四角といった専用の印で描きます。塗りだけでは一部となしを色でしか見分けられず、1.4.1 色の使用を満たしません。横線は、ここでのように枠線で描き、塗りつぶした図形では描かないでください。Windowsのコントラスト テーマでは、ブラウザーが背景の塗りを消し、枠線は利用者の配色で描き直します。枠線で描いた横線は残り、3つの状態を見分けられます。
行のチェックで「すべて選択」が変わっても、読み上げる必要はありません。フォーカスは行にあり、スクリーンリーダーは利用者が「すべて選択」に移ったとき、つまり必要なときにその状態を読みます。「4件中2件を選択」と伝えるライブリージョンを補助として加えてもかまいませんが、一部チェックの状態の代わりにはなりません。
デザインの案
なし、一部、すべて。3つの状態に、それぞれの印を
一覧の上の「すべて選択」の描き方を4通り並べました。マウスで、またはTabとSpaceで行をチェックしたり外したりしてください。3つは「一部」を専用の印か言葉で示し、1つは淡い塗りだけで示します。
デザインファイルで
- 「すべて選択」を、空、すべての行を選んだときのチェックマーク付き、一部だけのときの専用の印付きの3通りで描く。
- 「一部」の印は横線や小さな四角などの形にし、淡い塗りだけにはしない。3つの状態を白黒でも確認する。
- 各印と、その下の色とのコントラスト比を横に書く。最低3:1。例の白地の紫の横線は6.29:1。
- 「すべて選択」の中間の状態は、別のスタイルではなく、コードで設定するチェックボックス自身の状態だと書き添える。
- Windowsのコントラスト テーマでの3つの状態を描く。塗りが消えても、どの印も見えるように。
合格
- 枠の中の小さな四角 一部を選ぶと、ボックスは白い塗りと#6b7280の枠線（4.83:1）のまま、中に紫の小さな四角が入ります（白に対して6.29:1）。すべて選ぶと紫に塗られ、チェックマークが付きます。形が3つとも違うので白黒でも状態が分かり、四角は枠線で描くため、コントラスト テーマでも残ります。
- 枠だけのボックスに横線 塗りつぶしたボックスより軽い見た目です。一部を選ぶと枠線が紫になり、白地に紫の横線が入ります（6.29:1）。塗るのは、すべて選んだときだけです。なしと一部を見分けるのは色ではなく横線で、枠線で描くため、コントラスト テーマでも残ります。
- 件数を示す選択バー 行を1つでも選ぶと、一覧の上の行が#eef2ffのバーに変わります。横線の付いたボックス、#3730a3の「3件中2件を選択」（塗りに対して8.88:1）、「解除」ボタンが並びます。何件かを言葉で伝え、「解除」で選択を一度に戻せます。
不合格
- 淡い塗りで示す「一部」WCAG 1.4.1 すべて選ぶと紫のボックスにチェックマーク、一部では同じボックスが淡い#c7d2feになるだけで印はなく、空のボックスの白との差は1.49:1です。チェックボックスは「一部チェック」を伝えますが、画面では、白黒や、塗りが消えるコントラスト テーマで、一部となしが同じに見えます。
修正の確認
4項目、マウス不要
確認方法： スクリーンリーダー、キーボード、強制配色
OS、ブラウザー、支援技術のバージョン、ビルド、日付、各手順の実際の結果を記録してください。一覧のコンポーネントやそのチェックボックスを変えたら、もう一度確認します。
制限
これは出発点となる実装例で、どの一覧でも動くことを保証するものではありません。ここで扱うのは「すべて選択」の状態です。キーボードでまったく届かないチェックボックスは「キーボードでもスクリーンリーダーでも使えないカスタムチェックボックス」で、選んだ選択肢が読み上げられない一覧は「選択が読まれず、チップをキーボードで消せない複数選択」で扱います。グループごとに「すべて選択」を持つ、入れ子のチェックボックスでは、どの階層にも同じ一部チェックの状態が必要です。利用者が使うスクリーンリーダーで、一覧全体を確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
EaseWebのサービス
修正した問題を、次のリリースで再発させない
このガイドのような修正方法を、コーディングエージェントが従うルールと、CIのチェックに組み込みます。あわせて定期的に、キーボードとスクリーンリーダーで手動の再テストを行います。