[Accessibility]アクセシブルなTABLEを考える

一般的によく見かけるテーブル

このテーブルをアクセシブルにする
にはどうしたら？を考えてみた

キーワードは
id
headers
ですね。

 
サンプルのテーブルで
headers
はこのような関係があります。

headersの個々の要素

headersの個別の要素は
それぞれのth（見出し）に対して紐づいている

 

あくまでサンプル上の話になりますが
今回のサンプルでは
captionには『スクリーンリーダー』の利用者向きの文言を付加している
ブラウザユーザーには必要ない事項なので
captionにCSSで画面の外に追い出す方法で
ブラウザ上には表示させない方法を取っています

またCSSを無効にする事でこの文言は一般ブラウザにも表示されるので良いじゃないか？

<p class="forscreenreaders">料金表についてわかりにくい点がございましたら0000-00000-00000までお問い合わせ下さい</p>
<table summary="旅客運賃表　通常と深夜の一覧表">
<caption>旅客運賃表　2010-10-10時点</caption>
<thead title="料金区分">
<tr>
<th title="目的地"></th>
<th id="jyousya_ryokin">乗車代金</th>
<th id="tokkyu_ryokin">特急料金</th>
<th id="shitei_ryokin">指定席料金</th>
</tr>
</thead>
<tbody title="料金表">
<tr>
<td title="ここから通常料金" colspan="4" id="tsujyou">通常料金(AM9:00 - PM20:00）</td>
</tr>
<tr>
<th id="to_sinagawa">品川</th>
<td headers="jyousya_ryokin tsujyou to_sinagawa">100</td>
<td headers="tokkyu_ryokin tsujyou to_sinagawa">100</td>
<td headers="shitei_ryokin tsujyou to_sinagawa">100</td>
</tr>
<tr>
<th id="to_yokohama">横浜</th>
<td headers="jyousya_ryokin tsujyou to_yokohama">200</td>
<td headers="tokkyu_ryokin tsujyou to_yokohama">200</td>
<td headers="shitei_ryokin tsujyou to_yokohama">200</td>
</tr>
<tr>
<th id="to_oofuna">大船</th>
<td headers="jyousya_ryokin tsujyou to_oofuna">300</td>
<td headers="tokkyu_ryokin tsujyou to_oofuna">300</td>
<td headers="shitei_ryokin tsujyou to_oofuna">300</td>
</tr>
<tr>
<th id="to_fujisawa">藤沢</th>
<td headers="jyousya_ryokin tsujyou to_fujisawa">400</td>
<td headers="tokkyu_ryokin tsujyou to_fujisawa">400</td>
<td headers="shitei_ryokin tsujyou to_fujisawa">400</td>
</tr>
<tr>
<td title="ここから深夜料金" colspan="4" id="shinya">深夜料金(PM20:00 - AM9:00）</td>
</tr>
<tr>
<th id="to_sinagawa">品川</th>
<td headers="jyousya_ryokin shinya to_sinagawa" title="乗車代金 深夜料金 品川まで">200</td>
<td headers="tokkyu_ryokin shinya to_sinagawa" title="特急料金 深夜料金 品川まで">200</td>
<td headers="shitei_ryokin shinya to_sinagawa" title="指定席料金 深夜料金 品川まで">200</td>
</tr>
<tr>
<th id="to_yokohama">横浜</th>
<td headers="jyousya_ryokin shinya to_yokohama" title="乗車代金 深夜料金 横浜まで">300</td>
<td headers="tokkyu_ryokin shinya to_yokohama" title="特急料金 深夜料金 横浜まで">300</td>
<td headers="shitei_ryokin shinya to_yokohama" title="指定席料金 深夜料金 横浜まで">300</td>
</tr>
<tr>
<th id="to_oofuna">大船</th>
<td headers="jyousya_ryokin shinya to_oofuna" title="乗車代金 深夜料金 大船まで">400</td>
<td headers="tokkyu_ryokin shinya to_oofuna" title="特急料金 深夜料金 大船まで">400</td>
<td headers="shitei_ryokin shinya to_oofuna" title="指定席料金 深夜料金 大船まで">400</td>
</tr>
<tr>
<th id="to_fujisawa">藤沢</th>
<td headers="jyousya_ryokin shinya to_fujisawa" title="乗車代金 深夜料金 藤沢まで">500</td>
<td headers="tokkyu_ryokin shinya to_fujisawa" title="特急料金 深夜料金 藤沢まで">500</td>
<td headers="shitei_ryokin shinya to_fujisawa" title="指定席料金 深夜料金 藤沢まで">500</td>
</tr>
</tbody>
</table>

「Accessibility.table.html」をダウンロード

「Accessibility.table.html.txt」をダウンロード