アクセシブルなHTMLテーブルはどのように構築しますか?

Question

Accepted Answer

HTMLテーブルは**表形式のデータ**(関連するデータの行と列)を表示します。ただしレイアウトには使いません。アクセシブルなテーブルは適切な構造を使用して、スクリーンリーダーが各セルとともにヘッダーを読み上げられるようにします。 ```html

Q2 Sales by Region
Region	Revenue
North	$12,000
South	$9,500
Total	$21,500

``` ## The accessibility-critical parts - **`scope`を持つ``** — ヘッダーセルをマークします。列ヘッダーの場合は`scope="col"`、行ヘッダーの場合は`scope="row"`です。スクリーンリーダーは文脈なしにセルを読むのではなく、「North, Revenue: $12,000」のようにアナウンスします。 - **``** — テーブル全体のタイトル。``の最初の子要素です。ユーザーを案内するために読み上げられます。 - **``/``/``** — ヘッダー行、本体行、サマリー行をグループ化します。ナビゲーションを支援し、印刷時にヘッダーを繰り返させることができます。 ## レイアウトにテーブルを使用しないでください ```html

sidebar

content

``` レイアウトテーブルはスクリーンリーダーを混乱させ(データテーブルセマンティクスをアナウンスする)、柔軟性がありません。ページレイアウトにはCSS Grid/Flexboxを使用してください。 ## なぜ重要なのか適切なテーブルセマンティクス(``、``、セクション分け)こそが、スクリーンリーダーユーザーにとってデータテーブルを使いやすくするもの — 各値を行ヘッダーと列ヘッダーに結び付けます。 ``を厳密に本物の表形式データのためだけに予約してください。