トピックを検索
現在のステップを見た目だけで示すステップ表示
チェックアウトのステップ表示は、今いるステップの円を塗りつぶし、終わったステップにチェックを付けますが、どれがどれかをコードは伝えないため、スクリーンリーダーはすべてのステップを同じように読みます。
<li class="current"> 問題
スクリーンリーダー利用者は、フォームの今どのステップにいるのか、どのステップが終わったのかが分かりません。ステップ表示の塗りとチェックだけが示しているからです。
あるショップのチェックアウトは、「購入手続き」という一つの見出しの下に、カート、配送、支払い、確認の四つのステップとしてデザインされています。各ステップは番号の入った円で、線で次の円とつながっています。ページは落ち着いたまま、進み具合がひと目で分かるデザインです。今いるステップは青く塗りつぶした円で名前が太字、終わったステップにはチェックが付き、これからのステップは灰色の輪郭だけです。配送のステップにいる買い物客は、半分まで来たことがすぐに分かります。
同じページをスクリーンリーダーで読むと、「購入手続き、見出し」の後にリストが続きます。「カート、リンク」「2 配送」「3 支払い」「4 確認」。今いるのが配送だとも、カートが終わったとも伝わりません。チェックは描かれているだけで、言葉になっていません。見出しはどのステップでも「購入手続き」なので、そこからも分かりません。利用者は入力欄まで読み進めて今の場所を知り、再読み込みや戻る操作の後には、またそれを繰り返します。
ステップ表示は関係を示しています。このステップが現在のもの、これらは終わったもの、これらはこれからのもの、という関係です。WCAG 1.3.1「情報及び関係性」は、見た目で示した情報をコードかテキストでも伝えることを求めています。この例では、その情報が見た目にしかありません。塗りは current クラス、チェックは done クラスによるもので、クラス名はブラウザーにとって意味がないため、支援技術に伝わるものがありません。チェック自体もスクリーンリーダーから隠したアイコンで、代わりの言葉がありません。
見出しは基準を満たしています。WCAG 2.4.6「見出し及びラベル」は、見出しが主題や目的を説明していることを求めており、「購入手続き」はページを説明しています。ステップ番号までは求めていません。それでも、見出しでステップを示すのは、今どこにいるかを誰にでも伝える最も分かりやすい方法です。そのため修正の一つにしています。現在のステップをテキストで示すので、1.3.1が求めることを満たします。
見た目そのものは基準を満たしています。現在のステップは塗りつぶした円と太字の名前で示しており、色の変化だけに頼っていないため、1.4.1「色の使用」を満たします。どの円の枠線も白いページに対して3:1以上のコントラストがあり（これからのステップは3.03:1、ほかは6.84:1）、チェックは淡い塗りに対して5.49:1で、1.4.11「非テキストのコントラスト」の求めるとおりです。ステップをコードで示すことは、達成方法ARIA26にも当たります。これは、一連のページの中で今どこにいるかが分かることを求めるレベルAAAの達成基準2.4.8「現在位置」の十分な達成方法です。
ステップに分かれたチェックアウト、会員登録、申し込み、予約は、どれもこうした表示を使います。マークアップより見た目のほうが多様で、線でつないだ円、番号付きのタブ、山括弧でつないだ言葉の列などがあります。どう描いても、現在のステップがスタイルだけなら、そのスタイルが見えない人は今の場所を見失います。
10グループ中3グループに影響
- 全盲 （影響あり）
- 弱視 （影響あり）
- 色覚 （影響なし）
- ろう （影響なし）
- 難聴 （影響なし）
- 発話 （影響なし）
- 手の操作 （影響なし）
- 届く範囲・力 （影響なし）
- 認知 （影響あり）
- 光過敏 （影響なし）
- 視覚を使わない スクリーンリーダーではステップ表示のステップがすべて同じように読まれるため、今どのステップか、どれが終わったかが表示から分からず、ページの入力欄から推測するしかありません。
- 視覚が限られる 画面拡大鏡では、入力欄を埋めている間、ステップ表示が画面の外にあることがよくあります。どのステップでも見出しが「購入手続き」のままでは、そこからも今のステップが分かりません。
- 言語・認知・学習の能力が限られる 長いフォームで今どこにいるか分からなくなる人には、どこまで進み、あといくつ残っているかが必要です。塗りだけで示していると、表示を見落としたり読み取れなかったりした人には手がかりがありません。
自動チェックは、短いテキストの正しい順序付きリストとして合格にします。current、active、is-complete といったクラス名には意味がないため、一つの項目が現在のものとして描かれていることは分かりません。ステップが変わったときに目印が移るかも確認できません。EaseWebの診断は、クラスや名前でステップと示されたリストのうち、一つの項目に current や active のようなクラスがあり、ほかと違って描かれ、aria-current も隠したテキストもないものを、ページの見出しもページタイトルもステップを示していない場合に問題として報告します。ほかの項目と違って描かれているのにコードに理由のないステップのリストや、見出しかページタイトルがステップを示すページにある目印のないリストは、人が確認する項目として送ります。AIによるコード生成では、現在のステップに aria-selected="true" や role="tab" を付けることがあります。これらはタブやリストボックスのためのもので、リストの項目では無視されるか誤って伝わります。表示を role="progressbar" に変え、値の2が「2パーセント」と読まれる例もあります。二つの別のステップで表示を聞いて確かめてください。
試してみる
「次へ」と「戻る」でチェックアウトを進めてください。
下の欄に、ステップの冒頭をスクリーンリーダーが読む内容が出ます。今どのステップか、どれが終わったか分かりますか？
問題あり 修正できますか？
先頭から読むと、スクリーンリーダーの読み上げ：
- 購入手続き、見出し
- リスト、4項目
- カート、リンク
- 2 配送
- 3 支払い
- 4 確認
修正方法
現在のステップと終わったステップをコードで示すか、見出しでステップを伝え、見た目も同じステップの値から設定します。
- 1現在のステップには
aria-current="step"か隠したテキストを付けるか、ステップの見出しに番号とステップを書く。 - 2終わったことをチェックや塗りだけで示さず、言葉でも伝える。
- 3見た目、目印、見出しを一つのステップの値から設定し、ステップが変わったらすべて移す。
<h1>Checkout</h1><ol class="steps" role="list"> <li class="done"> <a href="/checkout/cart"> <span class="mark"><svg aria-hidden="true" viewBox="0 0 16 16">…</svg></span> Cart </a> </li> <li class="current"> <span class="mark">2</span> Delivery </li> <li> <span class="mark">3</span> Payment </li> <li> <span class="mark">4</span> Review </li></ol>現在のステップにaria-current、終わったステップに隠したテキスト
<h1>Checkout</h1><ol class="steps" role="list"> <li class="done"> <a href="/checkout/cart"> <span class="mark"><svg aria-hidden="true" viewBox="0 0 16 16">…</svg></span> Cart<span class="visually-hidden">, completed</span> </a> </li> <li aria-current="step"> <span class="mark">2</span> Delivery </li> <li> <span class="mark">3</span> Payment </li> <li> <span class="mark">4</span> Review </li></ol>この方法を選ぶ理由：クラスではなく状態から見た目を決める
current と done のクラスは、ステップの見た目を変えるだけです。スクリーンリーダーは「2 Delivery」を「3 Payment」とまったく同じように読み、終わったステップも「Cart、リンク」と読みます。チェックは隠されていて、言葉がないからです。
aria-current="step" は、この項目が手続きの中の現在のステップだと支援技術に伝え、対応するスクリーンリーダーは現在のステップだと読み上げます。スタイルも属性で選ぶため、見た目とコードが一つの目印から決まり、別々のステップを示すことがありません。ARIAには終わったステップを表す状態がないため、チェックの意味はリンクの中の隠したテキストで伝えます。「Cart, completed、リンク」と読まれます。このテキストは done クラスを付けるのと同じテンプレートの条件で書き、ページのほかの部分と一緒に翻訳してください。デザインは変わりません。円も塗りもチェックも、描いたとおりです。
どちらも今どのステップかを伝えます。終わったステップに隠したテキストを付けたうえで aria-current="step" を使ってください。表示そのものを直し、デザインを描いたとおりに保ち、同じ目印から見た目を設定します。見出しだけの方法は、ステップを必ず順に進む間しか満たしません。それでも、見出しのステップは併せて加える価値があります。入力欄を見ている拡大鏡の利用者のように表示を目にしない人や、数を平易な言葉で知りたい人の助けになり、デザイナーにとっては見出しの上に小さな文字を1行足すだけです。
ステップ表示とその周りのページでは、さらに判断が必要です。
- 番号のないリスト：SafariのVoiceOverでは、CSSで番号や行頭記号を消したリストからリストの役割が外れ、「リスト、4項目」と読まれないことがあります。
olにrole="list"を付けて保ちます。 - 終わったステップのリンク：W3Cの複数ページのフォームのチュートリアルは、終わったステップへリンクして見直せるようにすることを勧めています。隠した「完了」のテキストはリンクの中に置き、リンク名の一部にします。これからのステップは、何も起きないリンクにせず、ただのテキストにします。
- 現在のステップにも隠したテキスト：属性は付けられずテキストなら加えられるコンポーネントでは、現在の項目の中に「、現在のステップ」を隠したテキストとして書きます。チュートリアルも、名前の前に「Current: 」を隠して置いています。クラスと同じ条件で設定し、翻訳します。
- シングルページのチェックアウト：「次へ」でページを読み込まずにステップを入れ替えるなら、ルーターが
aria-currentとフォーカスを一緒に移す必要があります。読み上げられないSPAの画面遷移を参照してください。切り替えが読み上げられないと、スクリーンリーダー利用者は、別のステップのものになったボタンの上に残されます。 - ページタイトル：「Step 2 of 4: Delivery – Checkout」のようにページのタイトルにステップを入れると、ページを読み込んだ直後にスクリーンリーダー利用者へ今の場所が伝わります。これは2.4.2「ページタイトル」の範囲で、すべてのページで同じページタイトルで扱っています。
- 円ではなくバー：ステップを示すプログレスバーには
aria-valuetext="Step 2 of 4: Delivery"が必要です。ないと値がパーセントとして読まれます。スクリーンリーダーで読めないプログレスバーとメーターを参照してください。
強制配色でも現在のステップが見えるようにします。Windowsのコントラスト テーマは円の塗りをテーマの色に置き換えるため、塗りつぶした円がほかと同じに見えることがあります。太字の名前と枠線は残ります。現在のステップは太字の名前や太い輪など、塗り以外でも描き、コントラスト テーマで確かめてください。スマートフォンでは、表示を「ステップ2（全4）」という言葉に縮めるデザインがよくあり、これは満たします。点だけに縮めると満たしません。
AI コーディングアシスタントで修正しますか？ このガイドを Markdown で取得、または全ガイドをコーディングエージェントで使う。
デザインの案
ステップ表示は、いろいろな描き方で今の場所を伝えられます。
同じ4つのステップを、さらに4通りに描きました。「次へ」を押し、終わったステップへTabで移動してみてください。3つは今のステップを言葉かコードで伝え、1つは描くだけです。
デザインファイルで
- 終わった、現在、これからの3つの見た目を描き、それぞれに名前を書く。
- 現在のステップは塗りだけにせず、太字の名前や下の線も付ける。Windowsのハイコントラストでも見えるように。
- チェックの横に、スクリーンリーダーが読む言葉（「完了」など）を書く。
- スマートフォンの画面も描き、点だけにせず「ステップ2（全4）」のように言葉で書く。
- 色の横にコントラスト比を書く。ステップ名は最低4.5:1、輪は最低3:1。
合格
- 言葉で書いたステップと、区切りのあるバー 4つの角丸の区切りの上に、太字で「ステップ2（全4）：配送」と書き、最初の2つを#1f5f8bで塗ります。ステップは言葉が伝えるので、バーはそれを繰り返すだけです。名前付きの円が4つ並ばないスマートフォンにも収まります。
- カート、完了
- 配送
- 支払い
- 確認
山括弧でつないだステップ名の列 円を使わず、多くのショップのチェックアウトと同じく4つの名前を1行に並べます。現在のステップは太字で下に3pxの線があり、色だけでなく形でも分かります。終わったステップは#1f5f8b（6.84:1）のリンク、これからのステップは#5b6670（5.87:1）です。現在のステップは、どの表示とも同じくコードでも示します。- カート、完了 リネンのトート、$48
- 配送入力中
- 支払い
- 確認
答えを表示する縦の列 フォームの横の縦のリストです。終わった各ステップの名前の下に、入力した内容「リネンのトート、$48」を表示するので、何が終わったかを言葉で伝え、要約も兼ねます。現在のステップには「入力中」のタグを付け、誰でも読めるテキストで示します。1列を使うので、広い画面に向いています。
不合格
- 点だけで、現在の点を伸ばすWCAG 1.3.1 会員登録の流れでよく見る形です。8pxの点が4つあり、現在の点だけが#1f5f8bの24pxの楕円に伸びます。画面上にもコードにも、ステップ名も番号もないため、スクリーンリーダーは何も読まず、次に何が来るかも誰にも分かりません。点の横に「ステップ2（全4）」と書きます。
修正の確認
マウスを使わない5つの確認
確認方法： スクリーンリーダー、キーボード、強制配色
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。チェックアウトのステップやステップのコンポーネントを変更した際は、再度確認します。
制限
このサンプルは、どの手続きでも同じ結果になることを保証するものではありません。aria-current の読み上げ方はスクリーンリーダーによって異なり、名前の前に読むものも後に読むものもあります。対応もスクリーンリーダーとブラウザーの組み合わせで差があるため、利用者が使うもので試してください。正しいステップに目印があっても、手続き自体が分かりにくかったり、同じ情報を二度求めたりすれば、人は迷います。同じ住所を二度入力させるチェックアウトフォームを参照してください。メニューの現在のページのリンクも、同じ属性を別の値で使います。現在のページを見た目だけで示すナビゲーションを参照してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。