本文へ移動
easeweb
ご相談
トピックを検索

マウスでしか切り替えられないタブ

商品ページのタブがクリック処理を付けたリスト項目のため、キーボードでフォーカスできず、どのパネルを表示中かも伝わりません。

WCAG 2.2
SC 4.1.2ASC 2.1.1A
必須とする規格
Section 508 · EN 301 549（EU） · JIS X 8341-3
問題あり <li class="tab active" onclick="show('description')">
アクセシビリティの問題を示した図： Tabで飛ばされ、表示中のタブも分からない。
01

問題

キーボード利用者は最初のタブ以外を開けず、スクリーンリーダー利用者には、タブで内容が切り替わることも、どれを表示中かも伝わりません。

02

試してみる

キーボードで「サイズ」のタブを開いてください。

Tabキーを押してから、矢印キー、Home、Endを試してください。下の欄に、スクリーンリーダーの読み上げが出ます。どのタブを表示中か分かりますか？

問題あり 修正できますか？

  • 説明
  • サイズ
  • レビュー（12）

ワックスコットン、ウールの裏地付き。 お手入れ方法

スクリーンリーダーの読み上げ：

（Tabキーを押してください）

再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。

03

修正方法

buttonの上にタブのパターンを作ります。Tabの移動先は一つ、矢印キーで移動し、表示中のタブにaria-selectedを付けます。

  1. 1タブのリストでのTabの移動先は一つにし、矢印キー、Home、Endでタブ間を移動する。
  2. 2表示中のタブにaria-selected="true"を付け、見た目もその属性から設定する。
  3. 3ほかのパネルはhiddenで隠し、ページからは消さない。
修正前 クリック処理を付けたリスト項目
<ul class="tabs">  <li class="tab active" onclick="show('description')">説明</li>  <li class="tab" onclick="show('sizes')">サイズ</li>  <li class="tab" onclick="show('reviews')">レビュー（12）</li></ul><div class="panel" id="description">  <p>ワックスコットン、ウールの裏地付き。<a href="/care">お手入れ方法</a></p></div><div class="panel" id="sizes" style="display: none">…</div><div class="panel" id="reviews" style="display: none">…</div>
修正後 Buttonの上に作るタブのパターン
<div role="tablist" aria-label="商品の詳細">  <button type="button" role="tab" id="tab-description"          aria-selected="true" aria-controls="panel-description">説明</button>  <button type="button" role="tab" id="tab-sizes"          aria-selected="false" aria-controls="panel-sizes" tabindex="-1">サイズ</button>  <button type="button" role="tab" id="tab-reviews"          aria-selected="false" aria-controls="panel-reviews" tabindex="-1">レビュー（12）</button></div><div role="tabpanel" id="panel-description" aria-labelledby="tab-description" tabindex="0">  <p>ワックスコットン、ウールの裏地付き。<a href="/care">お手入れ方法</a></p></div><div role="tabpanel" id="panel-sizes" aria-labelledby="tab-sizes" tabindex="0" hidden>…</div><div role="tabpanel" id="panel-reviews" aria-labelledby="tab-reviews" tabindex="0" hidden>…</div>

この方法を選ぶ理由：クラスではなく状態から見た目を決める

AI コーディングアシスタントで修正しますか？ このガイドを Markdown で取得

04

修正の確認

マウスを使わない5つの確認

確認方法： キーボード、スクリーンリーダー、ズーム、強制配色

5件中0件を確認済み

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。共通のタブのコンポーネントを変更した際は、再度確認します。

制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。スクリプトは最小限の例で、1ページに一つのタブのリストだけを扱い、ディープリンクや選択の保持はありません。タブとその位置の読み上げ方は、スクリーンリーダーによって異なります。対象の支援技術で、操作全体を確認してください。

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

参考資料

コードを更新しても、使いやすさを保つために

ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。

再テストの進め方