Accessibility
Guidelines

4.1.2 HTMLの要素や属性を正しい役割で使用する

適合レベル

A

※各レベルについては適合レベルとはをご覧ください

概要

リンクやボタンなどユーザーが操作可能な項目を作成するときに、本来リンクやボタンに使わない要素や属性を使用して記述すると、ブラウザやスクリーンリーダーなどで正しく操作できなくなる可能性がある。そのため、ユーザーが操作可能な項目は、正しい要素や属性を用いて記述する。

具体例

見出しに見出しタグh1~h6要素を使っている

バナー作成の手順が見出しレベル1でマークアップされ、その他の見出しはpタグでクラスhd2もしくはhd3とマークアップされている。 見出し一覧のラベルと見出しレベル1のバナー作成の手順が表示されている。
Bad 見出しタグを適切に使用していない場合。CSSでスタイリングしているため、仕上がりは見出しのように見えていたが、見出しタグを使っていないために、見出し一覧機能を使うと見出しとして表示されない。
バナー作成の手順が見出しレベル1。手順①バナー構成を確認、手順②入稿規定を確認、手順③素材を集めるは見出しレベル2でマークアップされている。 見出し一覧のラベルとバナー作成の手順、手順①バナー構成を確認、手順②入稿規定を確認、手順③素材を集めるが見出しの階層となって表示されている。
Good 見出しタグを正しく使用している場合。支援技術で、見出しを一覧化して表示する機能を使っても、全ての見出しを表示できるため、必要な情報を選んで読みやすい。

テスト・チェック方法

  1. コードレビュー

実装方法

悪い実装例

ボタンの項目なのに、spanタグを使って実装している。

<span class="button">登録する</span>

良い実装例

buttonタグを使って実装している。

<button type="button">登録する</button>

参考文献