ARIA: columnheader ロール
ARIA ロール属性の columnheader 値は、要素を列の見出し情報を含む行内のセルとして識別します。これは、列スコープを持つネイティブな <th> 要素と似ています。
説明
role="columnheader" を持つ要素が role="row" を持つ要素の子孫として入れ子になっている場合、それは表形式のコンテナー（表、グリッド、またはデータの関係を示す必要があるその他のチャート）内の列見出しセルの静的な表形式構造です。サポートされるには、columnheader は row ロール を持つ要素内に入れ子にされている必要があります。
関連する WAI-ARIA のロール、ステート、プロパティ
すべての列見出しは row 内に入れ子にされている必要があります。同様にすべての行は、grid、table、または treegrid 、または上記のいずれかに入れ子にされた rowgroup 内に入れ子にされている必要があります。
aria-sort-
一度に 1 つの列見出しのみに適用され、もし適用されている場合、
aria-sort属性は、列がascendingまたはdescending順序でソートされているか、ソートされていない場合はnoneかを示します。
キーボードインタラクション
このロールは、特定のキーボードインタラクションをサポートしていません。
必要な JavaScript 機能
JavaScript は、aria-sort 属性が使用される場合のみ必要です。
例
<table>
<thead>
<tr role="row">
<th role="columnheader" scope="col">
<button>First Name</button>
</th>
<th role="columnheader" scope="col">
<button>Last Name</button>
</th>
<th role="columnheader" scope="col" aria-sort="ascending">
<button>Company Name</button>
</th>
<th role="columnheader" scope="col">
<button>Job Title</button>
</th>
</tr>
</thead>
<tbody>
…
</tbody>
</table>
ベストプラクティス
列見出しには、列のタイトルまたは見出し情報を含める必要があります。
ARIA の第一のルールは、必要なセマンティクスと動作を持つネイティブ HTML 要素または属性がある場合、要素を再利用して ARIA ロール、ステート、またはプロパティを追加してアクセシブルにするのではなく、そのネイティブ要素を使用することです。<div> または他の要素の代わりに、scope 属性を設定したネイティブ HTML の <th> 要素 <th scope="col"> を使用することが推奨されます。セマンティック HTML の <th scope="col"> を使用する場合、role 属性は必要ありませんが、CSS の display プロパティ値でデフォルトのセマンティクスが削除された場合に表がそのセマンティクスを保持することを確実にするためのバックアップとして含めることができます。
aria-sort 属性は、ARIA の role 属性が指定されていない場合でも <th scope="col"> に追加できます。
好ましい HTML
columnheader は <th scope="col"> と同じセマンティクスを持ちます。
仕様書
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # columnheader |
| Unknown specification |