|    80  81  82  83  84  85  86  87  |

アクセシビリティを考慮した表を作る

音声ブラウザにも対応した表を作る

アクセシビリティを考慮した表がなぜ必要が?

文書内で表を示す時は table 要素を使用しますが、そのなかにさらにいくつかの要素や属性を追加することで、表の概要や構造的な意味まで記述することができます。表の説明や概略、行および列のグループ、各セルの関係などを表の HTML マークアップに含めておくこともできます。

こうすることで、音声ブラウザにも対応可能なアクセシビリティを考慮した表の表示が実現できます。

ページトップへ

表の基本的マークアップ

例として基本的な表のマークアップを行います。いくつかの項目名と、それに該当するデータがそれぞれ存在する一般的な表です。

table 要素を使用して表を示し、見出し情報を th 要素、データを td 要素でそれぞれマークアップしたうえで、tr 要素を使用して行を組み立てます。

班名 A班 B班 C班
男性会員 10 14 12
女性会員 16 12 14
合計会員数 26 26 26
  • XHTMLソース:
    • <table cellpadding="5" border="1">
    •   <tr>
    •    <th>班名</th>
    •    <td>A班</td>
    •    <td>B班</td>
    •    <td>C班</td>
    •   </tr>
    •   <tr>
    •    <th>男性会員</th>
    •    <td>10</td>
    •    <td>14</td>
    •    <td>12</td>
    •   </tr>
    •   <tr>
    •    <th>女性会員</th>
    •    <td>16</td>
    •    <td>12</td>
    •    <td>14</td>
    •   </tr>
    •   <tr>
    •    <th>合計会員数</th>
    •    <td>26</td>
    •    <td>26</td>
    •    <td>26</td>
    •   </tr>
    • </table>

ページトップへ

caption 要素と summary 属性で表の説明を示す

caption 要素 (表題) は table 要素の開始タグ直後に1つだけ記述することができます。表の簡単な説明を表すのに使います。caption 要素はインライン要素を含むことができ、その内容は視覚的にレンダリングされます。

summary 属性 (要約) も同様に表の内容を示すのに使われますが、 summary 属性の値は視覚的にレンダリングされません。ただし音声ブラウザにおいては表の内容を説明するものとして読み上げられます。

班別会員数一覧
班名 A班 B班 C班
男性会員 10 14 12
女性会員 16 12 14
合計会員数 26 26 26
  • XHTMLソース:
    • <table cellpadding="5" border="1" summary="ほどがやパソボラの班毎の男女別会員数、及びその合計会員数一覧">
    •  <caption>班別会員数一覧</caption>
    •   <tr>
    •    <th>班名</th>
    •    <td>A班</td>
    •  
    •  ... 中略 ....
    •  
    •   </tr>
    • </table>

ページトップへ

見出し情報が長い場合は省略形を示す

  • XHTMLソース:
    •    <th abbr="男性">男性会員</th>
    •    <th abbr="女性">女性会員</th>

見出し情報 (th 要素) が長い場合、音声ブラウザで毎回それが読み上げられるのは冗長となります。そのような場合には th 要素abbr 属性を使用してその省略形を示します。音声ブラウザによる読み上げでは abbr 属性の値が優先されます。

もともと簡略な見出しが付けられている場合は、abbr 属性は不要です。

ページトップへ

行と列のグループ化と各セルの関係性を示す

例として示している表では、人数の入った td 要素 (データセル) が、縦軸方向、横軸方向それぞれに見出しセルを持っています。このように1つのデータに対して複数の見出し情報が関連する表の場合には、見出しとデータとの関係を明確に示す必要があるとされています。

この関係を示す方法としては、2つの方法が考えられます。

行および列をグループ化する

  • XHTMLソース:
    • <table cellpadding="5" border="1" summary="ほどがやパソボラの班毎の男女別会員数、及びその合計会員数一覧">
    •  <caption>班別会員数一覧</caption>
    •  <colgroup id="male-female"></colgroup>
    •  <colgroup id="number-of-members" span="3"></colgroup>
    •  <thead>
    •   <tr>
    •    <th>班名</th>
    •    <td>A班</td>
    •    <td>B班</td>
    •    <td>C班</td>
    •  </thead>
    •  <tfoot>
    •   <tr>
    •    <th>合計会員数</th>
    •    <td>26</td>
    •    <td>26</td>
    •    <td>26</td>
    •   </tr>
    •  </tfoot>
    •  <tbody>
    •   <tr>
    •    <th>男性会員</th>
    •    <td>10</td>
    •    <td>14</td>
    •    <td>12</td>
    •   </tr>
    •   <tr>
    •    <th>女性会員</th>
    •    <td>16</td>
    •    <td>12</td>
    •    <td>14</td>
    •   </tr>
    •   </tbody>
    • </table>
  •           行と列をグループ化して、データの構造を明らかにします。
  • CSS ソース:
    • colgroup#male-female { background : #fef ; }
    • thead { background : #eee ; }
  •           グループ化した行および列にCSSを適用します。

列 (縦方向) のグループ化には colgroup 要素、行 (横方向) のグループ化には thead 要素tbody 要素tfoot 要素を使用します。

colgroup 要素は table 要素内で、caption 要素のうしろ、かつ thead 要素の前に記述しなければなりません。複数列をグループ化する際は、span 属性を用いて列数を指定します。また、id 属性を与えて列グループに名前を付け、CSSを適用することもできます。

行のグループ化を行う、thead 要素tbody 要素tfoot 要素は、それぞれ表のヘッダ、ボディ、フッタを示します。thead 要素および tfoot 要素は、table 要素内に1つだけ記述できます。tbody 要素は複数記述して構わないとされます。

ここで注意しなければならないのは、thead 要素、tbody 要素、tfoot 要素の記述順です。tfoot 要素は、table 要素内で tbody 要素よりも前に出現しなければなりません。これにより、表データが大きい場合などに、Web ブラウザはそのデータをすべて取得するまで待たずにフッタのレンダリングを行えます。

班別会員数一覧
班名 A班 B班 C班
合計会員数 26 26 26
男性会員 10 14 12
女性会員 16 12 14

各セルの関係性を明示する

表のセルの関係性を明示する各セルの関係性を示すために、th 要素および td 要素に scope 属性headers 属性を追加します。

scope 属性では、そのセルがどちらの方向に対する見出し情報であるかを明示します。例えば今回のサンプル表の「班名」という見出しは行方向と列方向のどちらに対する見出し情報なのかあいまいなので、scope 情報で方向を明示します。行方向なら「row」、列方向なら「col」という値を指定します。

headers 属性は、見出し情報セルに着けられた id 属性を利用して、データと見出し情報の関係を明示するために使用できます。関係を示す id 属性値は空白文字で区切って複数指定できるため、複雑な表で各セルの関係を明確に示す際に有効です。

  • XHTMLソース:
    • <table cellpadding="5" border="1" summary="ほどがやパソボラの班毎の男女別会員数、及びその合計会員数一覧">
    •  <caption>班別会員数一覧</caption>
    •  <colgroup id="male-female"></colgroup>
    •  <colgroup id="number-of-members" span="3"></colgroup>
    •  <thead>
    •   <tr>
    •    <th scope="row">班名</th>
    •    <td scope="col" id="group-a">A班</td>
    •    <td scope="col" id="group-b">B班</td>
    •    <td scope="col" id="group-c">C班</td>
    •  </thead>
    •  <tfoot>
    •   <tr>
    •    <th id="total">合計会員数</th>
    •    <td headers="total group-a">26</td>
    •    <td headers="total group-b">26</td>
  •  
    •    <td headers="total group-c">26</td>
    •   </tr>
    •  </tfoot>
    •  <tbody>
    •   <tr>
    •    <th id="male">男性会員</th>
    •    <td headers="male group-a">10</td>
    •    <td headers="male group-b">14</td>
    •    <td headers="male group-c">12</td>
    •   </tr>
    •   <tr>
    •    <th id="female">女性会員</th>
    •    <td headers="female group-a">16</td>
    •    <td headers="female group-b">12</td>
    •    <td headers="female group-c">14</td>
    •   </tr>
    •   </tbody>
    • </table>
  • 見出しとセルの関係を明示すると、表の構造がさらにわかりやすくなります。

ページトップへ

|    80  81  82  83  84  85  86  87  |