SmartHR Design System

表が<table>でマークアップされている

概要

この基準では、データを表形式で表示する際に、HTMLのtable関連要素を適切に使用していることを確認してください。列と行の関係が明確になり、表の内容がスクリーンリーダーや他の支援技術によって正しく解釈され、すべてのユーザーにとってアクセスしやすくなります。

メリット

  1. 視覚障害のあるユーザー: スクリーンリーダーが表の構造を正確に読み上げることで、表のデータを理解しやすくなります。
  2. 表形式を維持してコピーしたいユーザー: <table> でマークアップされているコンテンツをコピーすると、表の構造のままコピーできます。スプレッドシートなどに貼り付けた場合、表の構造を維持して貼り付けることができるなどデータの可搬性が向上します。

達成方法

  1. <table>の適切な使用:
    • 表形式のデータは<table>でマークアップします。<tr>で行を、<th>で見出しセルを、<td>でセルをそれぞれ表現します。
    • 表形式でないデータは、 <table> でマークアップしないでください。
  2. 見出しセルの使用:
    • 表の行や列の見出しは<th>でマークアップし、scope属性を使ってその見出しが行に関連するのか、列に関連するのかを指定します。

テスト方法

  1. 表のコード構造の確認:
    • HTMLコードを確認し、データ表が<table>、<tr>、<td>、<th>を使って適切にマークアップされているかをチェックします。
  2. 視覚的な確認:
    • 表がブラウザで正しく表示され、行と列の構造が視覚的にも明確であるかを確認します。

関連するWCAG2.1達成基準