Accessibility
Guidelines

4.1.1 HTMLを正しく記述する

適合レベル

A

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

概要

どのブラウザから読まれても正常に動作するよう、HTMLを正しく記述する。HTMLが正しく記述されていないと、一部のブラウザで表示がおかしくなってしまう。スクリーンリーダーなどの支援技術でも正しく解釈できない。

HTMLを記述する時は、以下の点に注意する。

  • 開始タグと終了タグを正しく記述する
  • 入れ子にするタグの要素はHTML仕様通りに記述する
  • 各要素に設定するID属性はページ内で重複していない

テスト・チェック方法

以下のツールを用いて、セルフやコードレビューなどでチェックする。

負担を減らすため、テキストエディタやCIと連携させてチェックを自動化することが望ましい。

実装方法

悪い実装例

要素の閉じタグが無い

<div>文章です
<div>文章です2

要素の使い方が間違っている

<ul>
  <a href="#menu1"><li>メニュー1</li></a>
  <a href="#menu2"><li>メニュー2</li></a>
</ul>

IDが重複している

<h2 id="contents">コンテンツ1</h2>
<h2 id="contents">コンテンツ2</h2>

良い実装例

要素の閉じタグがある

<div>文章です</div>
<div>文章です2</div>

要素の使い方が正しい

<ul>
  <li><a href="#menu1">メニュー1</a></li>
  <li><a href="#menu2">メニュー2</a></li>
</ul>

IDが重複していない

<h2 id="contents1">コンテンツ1</h2>
<h2 id="contents2">コンテンツ2</h2>

参考文献