empty-table-header

表の見出しセルを空にしてはいけません

manual確度:medium重大度:minorperceivable

表の見出しセル(<th>、またはrole="columnheader"/"rowheader"を持つ任意の要素)が可視のテキストコンテンツを持つことを確認します。aria-label/aria-labelledbyだけで名前が付けられた見出しも報告されます。これに対する実際のスクリーンリーダーやブラウザーのサポートにはばらつきがあるためです。

適用範囲:競合する明示的なロールを持たない<th>要素と、ロールがcolumnheaderまたはrowheaderに解決される任意の要素(ネイティブの<th>かどうかを問わない)に適用されます。role属性はフォールバックのリストです。既知で抽象的でない最初のトークンを大文字と小文字を区別せずに読んだものがロールになるため、role="foo columnheader"は該当し、<th role="foo">(既知のトークンなし)は暗黙の見出しロールを保ちます。role="columnheader"/"rowheader"を明示的に指定し直した<th>は引き続き対象となります。一方、<th role="presentation">(もはや意味のある見出しではない)は正しく除外され、ARIAのロールだけによる見出し(例:role="grid"/role="table"のウィジェット内の<div role="columnheader">)も検出されます。ElementInternalsによってcolumnheaderまたはrowheaderロールを与えられたカスタム要素(this.attachInternals().role)も、別のロールを示すrole属性がなければ、そのロールを持つネイティブ要素と同じように扱われます。

期待される結果:見出しセルが可視のテキストコンテンツを持っています。aria-label/aria-labelledbyだけで名前が付けられた(可視のテキストがない)<th>も同等とはみなされず、報告されます。実際には<th>でのaria-labelのサポートにばらつきがあるためです。NVDA+FirefoxとiOS VoiceOver+Safariはこれを完全に無視し(可視のテキストだけが読み上げられる)、JAWS+Chrome/IE11も見出しセル自体の可視のテキストしか読み上げません。テストしたすべての組み合わせで機能することが確認されているのは可視のテキストだけです。https://html5accessibility.com/stuff/2024/05/22/not-so-short-note-on-aria-label-usage-big-table-edition/を参照してください。

検出結果が報告する内容:

  • ariaName(TABLE_HEADER_NAME_NOT_VISIBLE_TEXT):見出しセルが、可視テキストではなくaria-labelまたはaria-labelledbyから得ている名前です。

これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。

例

pass
<table><tr><th>Name</th></tr></table>

見出しセルに可視のテキストコンテンツがあります。

can't tell
<table><tr><th></th></tr></table>

見出しセルにテキストコンテンツもアクセシブルな名前もありません。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

TABLE_HEADER_EMPTY

  1. レポートに示された見出しセルを見つけ、画面上に表示されている内容を確認してください。
  2. ブラウザーの開発者ツールのアクセシビリティペインでセルを調べ、算出された名前を控えてください。内部にある代替テキスト付きの画像やラベル付きのアイコンが名前を与えることもあります。
  3. その下または横にあるセルを確認し、理解するために見出しが必要かを判断してください。
  4. 最初の列に行見出しがある表の空の左上隅のセルであれば、それが何の見出しにもなっていないことを控えてください。

満たす場合:セルには列や行を説明する名前があるか、データの見出しにならない空の隅のセルです(tdとしてマークアップするとさらに良いです)。

満たさない場合:セルはデータセルの見出しになっていますが、表示テキストも名前もないため、その列や行に見出しがなく、表の見出しセルに関するベストプラクティスを満たしていません。

TABLE_HEADER_NAME_NOT_VISIBLE_TEXT

  1. レポートに示された見出しセルを見つけ、レポートに示された名前(aria-labelまたはaria-labelledbyによるもの)を読んでください。
  2. 画面上でセルを確認し、それ自身のテキストを表示していないことを確かめてください。
  3. スクリーンリーダーでその列または行のデータセルを移動し、見出しの名前が一緒に読み上げられるか聞いてください。

満たす場合:見出しはそのデータセルと一緒に読み上げられるか、同じ名前を示す表示テキスト(セル内の視覚的に隠したテキストでも可)がセルに付けられています。

満たさない場合:見出しに表示テキストがなく、データセルと一緒に読み上げられないARIAの名前に頼っており、アクセシブルな名前に関するガイダンスのベストプラクティスを満たしていません。

ソースコードを見る