- Coding Methodology
- 第86回 アクセシビリティを考えたhtml5コーディング
第86回 アクセシビリティを考えたhtml5コーディング
html5のタグはそれぞれ役割を持っています。きちんとした使い方をすることでWebアクセシビリティの向上に繋がり、幅広いユーザーにより正しい情報を伝えることができます。そこで今回は明日からすぐに使える、Webアクセシビリティを考えたhtml5タグの使用例を5つご紹介したいと思います。
1.太字
強調したいといった意味がなく、見た目の区別としてテキストを太字にしたい場合は、<b>タグを使用します。
2.現在地（カレント）
現在地の設定をする場合は、強勢を意味する<em>タグを使用します。また、ユーザビリティ的に現在表示しているページへのリンクは無意味なので外すほうが望ましいです。
3.ナビゲーション
<nav>タグを使用し、role="navigation"を設定します。また、適宜aria-label属性を用いて、ナビゲーションの役割を指定します。
4.セクション
<section>タグを使用します。また、直下に見出しタグを設置します。多段階層の場合は<section>タグを入れ子構造すると良いです。
5.表組み
<table>タグを使用する場合は、見出しである<th>タグにidを設定し、<td>タグとheader属性を用いて関連付けをします。
header属性は半角スペース区切りで複数設定することができるので、縦方向の見出しと横方向の見出しを両方設定することが可能です。
また、html5ではsummary属性は使用できないため、代わりに<figure>タグとセットで図表のキャプションに用いられる<figcaption>タグ（※1）を使用します。（デザイン的に必要ない場合）<figcaption>タグはブラウザの表示上は必要ないため、cssで非表示にしておきます。
このとき、display: none;で消してしまうと音声読み上げに対応されなくなってしまうため、height: 0;等（※2）を用いて見えなくする必要があります。
