テーブルのsummaryとcaptionが同一
Silktideは、summary属性とcaptionの両方を持つテーブルをチェックし、その2つがまったく同じ内容になっているものを報告します。それぞれ異なる目的があるため、一方をもう一方に重複させても、繰り返しが生じるだけです。
では、<caption>要素はテーブルに表示されるタイトルであり、summary属性は、テーブルの構造をユーザーに説明するための、非表示の説明です。
<!-- 問題: summaryがcaptionをそのまま繰り返している -->
<table summary="Opening hours">
<caption>Opening hours</caption>
...
</table>
重要な理由
スクリーンリーダーは、利用者がテーブルに到達するとcaptionとsummaryの両方を読み上げます。両者が同一の場合、同じテキストが2回読み上げられるため、利用者の時間を無駄にし、summaryが役立てるためではなく、チェックを通すためだけに入力されたような印象を与えます。役立つsummaryは、captionにない情報を追加します。たとえば、テーブルがどのように構成されているか、またはどのように読むのが最適かを説明します。
修正方法
summary属性を削除してcaptionを残す、または- テーブルの構造を説明してcaptionを補足するようにsummaryを書き直します。
<!-- 修正後: summaryが構造に関する情報を追加している -->
<table summary="Days in the first column, morning and afternoon hours in the second and third">
<caption>Opening hours</caption>
...
</table>
summary属性はHTML 4に由来するもので、現在のHTMLでは廃止されていることに注意してください。そのため、長期的には削除するほうが適切な場合が多くあります。テーブルの前に表示される段落を置けば、同じ説明をすべての利用者に提供できます。
Silktideによるチェック方法
- 各ページ上のすべてのテーブルを見つけます。
role="presentation"で表示用としてマークされたテーブルを除外します。summary属性がないテーブル、または<caption>がないテーブルを除外します。- 大文字と小文字の違い、および余分な空白を無視して2つのテキストを比較し、同一の場合にそのテーブルを報告します。