Accessibility
Guidelines

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

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

具体例

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

見出しタグを、見出しレベルに応じて適切に適用しているマークアップ例。 適切なマークアップのHTMLが描画されている図。想定通りの見出しが想定通りの階層(レベル)で列挙されている。
Good 見出しタグを正しく使用している場合。支援技術で、見出しを一覧化して表示する機能を使っても、全ての見出しを表示できるため、必要な情報を選んで読みやすい。
見出しレベル1の要素のみh1要素でマークアップされ、その他の見出しはpタグでマークアップされている。 不適切なマークアップのHTMLが描画されている図。h1要素でマークアップされた見出しのみ表示されているが、pタグでマークアップされた見出しは表示されていない。
Bad 見出しタグを適切に使用していない場合。CSSでスタイリングしているため、仕上がりは見出しのように見えていたが、見出しタグを使っていないために、見出し一覧機能を使うと見出しとして表示されない。

テスト・チェック方法

  1. コードレビュー

実装方法

悪い実装例

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

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

良い実装例

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

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

参考文献