table-accessibility

テーブルのアクセシビリティ

行や列を走査する視覚のあるユーザーだけでなく、1 つずつセルを移動するスクリーンリーダーのユーザーにも、構造と関係性が伝わるテーブルを設計します。

テーブルを使う場面

テーブルは、2 つの次元（行と列）にまたがる関係性のあるデータに使用します。レイアウトにはテーブルを使用しないでください。

• テーブルを使う場合：製品間の機能比較、スケジュールの表示、一貫したカテゴリで整理されたデータの表示
• テーブルを使わない場合：フォームのレイアウト、カードの配置、互いに関係のないコンテンツを視覚的な列に並べる場合

基本要件

すべてのテーブルにヘッダーを付ける

• 列ヘッダー：scope="col" を指定した を使用します
• 行ヘッダー：scope="row" を指定した を使用します
• スクリーンリーダーは各セルの前にヘッダーを読み上げるため、ユーザーは常にどの列と行にいるかを把握できます
• ヘッダーがないと、スクリーンリーダーのユーザーには文脈のない、つながりのない値の羅列が聞こえます

すべてのテーブルにキャプションまたはラベルを付ける

• HTML テーブルには 要素を使用します
• または、aria-labelledby で可視の見出しを参照します
• キャプションではテーブルの内容を説明します： 「Standard、Pro、Enterprise プランの料金比較」
• 「テーブル 1」や「データ」だけでは不十分です

複雑なテーブルよりシンプルなテーブルを選ぶ

• 列ヘッダーが 1 行のシンプルなテーブルを優先します
• 可能な限り、セルの結合（colspan、rowspan）は避けます
• セルの結合が必要な場合は、適切な headers/id/scope の関連付けを使用します
• 意味を伝えるためにセルの結合が必要な場合は、複数のシンプルなテーブルに分割できないか検討します

テーブルの認知アクセシビリティ

視覚的なデザイン

• ゼブラストライプ（行ごとに交互に色を変える）は、行を追いやすくします
• 適切なセルのパディング（少なくとも 8px）で、窮屈さを防ぎます
• 読みやすさのため、数値は右揃え、テキストは左揃えにします
• ヘッダー行は、より高いコントラストで強調します

複雑さを軽減する

• 快適に一覧できる列数は最大 5～7 列です
• さらに多くの列が必要な場合は、別の形式を検討するか、ユーザーが列を表示／非表示にできるようにします
• 複雑なテーブルの上に、要約または重要なポイントを提示します
• 横スクロールを必須にしないでください。テーブルをレスポンシブにします

レスポンシブテーブル

• 小さい画面では、各行をラベル付きカードにするカード／リスト表示に切り替えます
• または、最初の列を固定して横スクロールできるようにします
• 小さい画面でデータを隠す場合は、アクセスする手段を必ず用意します
• テスト：モバイルユーザーはすべてのデータにアクセスできますか？

評価チェックリスト

• すべてのテーブルに、適切な scope を指定した列ヘッダーまたは行ヘッダー（あるいはその両方）がある
• すべてのテーブルにキャプションまたはアクセシブルなラベルがある
• セルが結合されていない（避けられない場合はヘッダーが適切に関連付けられている）
• 小さい画面でもテーブルがレスポンシブである
• 視覚的なレイアウトにテーブルを使用していない
• 複雑なテーブルに、重要な調査結果をまとめたテキストがある
• セルのパディングと間隔が読みやすさを支えている