データテーブルのアクセシビリティのための "id"と "headers"または "scope"？

Question

スクリーンリーダーで最もサポートされている方法 - idとheadersまたはscopeの属性はありますか？

これらの方法のいずれかがHTMLテーブルヘッダーをテーブルセルに関連付ける方法について、矛盾する情報が見つかりました。

Answer 1

データテーブルの複雑さによって異なります。一般的にはscopeを使用することをお勧めします。

あなたは、例えばcolspanまたはrowspanを使用する場合は、idとheadersを使用すると、より良い選択です。

H43: Using id and headers attributes to associate data cells with header cells in data tables:

データセルが複数の行および/または1つの列ヘッダに関連付けられている場合、この技術は、使用されます。これにより、関係が複雑すぎてth要素単独またはscope属性を持つth要素を使用して識別できない場合、スクリーンリーダーが各データセルに関連付けられたヘッダーを読み上げることができます。

データテーブルには、このような補助的な属性を必要とするとき、それはそのヘッダとセルを関連付けるために（スクリーンリーダーを使用していない）他の人のために難しいかもしれない、言われて、補足が必要なものかもしれないことヘッダーの視覚的手がかり（交互の色やマウスオーバーの効果など）。