Accessibility
Guidelines

1.3.1 情報や関係性を明確にする

提供する情報は、プログラムによる解釈が可能か、テキストで適切にラベリングや説明がされている。

この項目の目的は、様々な環境で、提供している情報の構造を適切に伝えることである。たとえば表や見出しなどが、適切にマークアップされていない場合、スクリーンリーダーやクローラーからは、表や見出しと認識できない。

情報を見た目だけで表現せず、マシンリーダブルに実装する(またはラベリングなどを用いる)ことで、どの環境にも適切に情報や関係性を伝えることができる。

レビュー・テスト方法

  • 企画時、デザイン時、デザイン・エンジニアによるレビュー
  • マークアップ実装時、コードレビューによるチェック

実装方法

フォーム要素のラベルづけ

悪い実装例

視覚的にはフォームのコントロールに対応するラベルが提示されているが、要素を用いてラベルとコントロールの対応関係がコードでは示されていない。

<form>
  姓:
  <input type="text" name="lastname">
  <br>
  名:
  <input type="text" name="firstname">
</form>

良い実装例

<label>要素を用いて、フォーム・コントロールとラベルが関連付けられている。

<form>
  <label for="lastname">姓:</label>
  <input type="text" name="lastname" id="lastname">
  <br>
  <label for="firstname">名:</label>
  <input type="text" name="firstname" id="firstname">
</form>

参考文献