コーディングメソドロジー

第86回 アクセシビリティを考えたhtml5コーディング

html5のタグはそれぞれ役割を持っています。きちんとした使い方をすることでWebアクセシビリティの向上に繋がり、幅広いユーザーにより正しい情報を伝えることができます。そこで今回は明日からすぐに使える、Webアクセシビリティを考えたhtml5タグの使用例を5つご紹介したいと思います。

1.太字

1.太字

強調したいといった意味がなく、見た目の区別としてテキストを太字にしたい場合は、<b>タグを使用します。

2.現在地(カレント)

2.現在地(カレント)

現在地の設定をする場合は、強勢を意味する<em>タグを使用します。また、ユーザビリティ的に現在表示しているページへのリンクは無意味なので外すほうが望ましいです。

3.ナビゲーション

3.ナビゲーション

<nav>タグを使用し、role="navigation"を設定します。また、適宜aria-label属性を用いて、ナビゲーションの役割を指定します。

4.セクション

4.セクション

<section>タグを使用します。また、直下に見出しタグを設置します。多段階層の場合は<section>タグを入れ子構造すると良いです。

5.表組み

5.表組み

<table>タグを使用する場合は、見出しである<th>タグにidを設定し、<td>タグとheader属性を用いて関連付けをします。
header属性は半角スペース区切りで複数設定することができるので、縦方向の見出しと横方向の見出しを両方設定することが可能です。
また、html5ではsummary属性は使用できないため、代わりに<figure>タグとセットで図表のキャプションに用いられる<figcaption>タグ(※1)を使用します。(デザイン的に必要ない場合)<figcaption>タグはブラウザの表示上は必要ないため、cssで非表示にしておきます。
このとき、display: none;で消してしまうと音声読み上げに対応されなくなってしまうため、height: 0;等(※2)を用いて見えなくする必要があります。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム