視覚障がい者に配慮したホームページの作成について
今回は資格障がい者に配慮した表(table)の作成方法をご紹介します。
テーブルを音声読み上げソフトで読み上げる場合、左から右に読み上げられていきます。その場合、
<table>
<tr><th>名前</th>
<th>住所</th>
<th>電話番号</th></th>
</tr>
<tr>
<td>山田太郎</td>
<td>島根県</td>
<td>090-××××-××××</td>
</tr>
</table>
名前 | 住所 | 電話番号 |
---|---|---|
山田太郎 | 島根県 |
090-××××-×××× |
この表を読み上げた場合「なまえ じゅうしょ でんわばんごう やまだたろう しまねけん ぜろきゅうぜろ・・・」となり、ほとんど聞きてにとって意味が分からないものになります。
thタグで囲まれている箇所が「見出しセル」になります。
見出しとの関連性を示すと読み取りてによって理解しやすいようにすることができます。
〇abbr属性
<td abbr=""名前>山田太郎</td>
上記のように記述することで見出しとの関連性を理解しやすくすることができます。
〇scope属性
col 下方向へ関連付けを行う。
row 右方向へ関連付けを行う。
<th scope = "col">名前</th>
上記のように記述することで各データがどのような意味を持つか明示的に示すことができます。