Accessibility
Guidelines

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

適合レベル

A

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

概要

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

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

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

テスト・チェック方法

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

実装方法

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

Web

悪い実装例

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

<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>

Android

<TextView
  android:id="@+id/usernameLabel" ...
  android:text="@string/username"
  android:labelFor="@+id/usernameEntry" />

<EditText android:id="@+id/usernameEntry" ... />

参考文献