miChecker:『フォーム・コントロールにlabel要素およびtitle属性が関連付けられていません。』

技術コラムAMCC,miChecker

検出理由

「問題あり」として検出される項目です。
フォームコントールにはラベルテキストが必要です。テキストラベルはlabel要素により定義するか、title属性により設定しますが、検出箇所ではそのいずれも存在しないため検出されています。対象になるフォームコントロールは、input要素、textarea要素、select要素とisindex要素になります。送信(submit)、リセット(reset)、画像ボタン(image)、隠しフィールド(hidden)、スクリプトボタン(button)はそれ自身がラベルとしての機能を持つか、ラベルが必要ないケースのため検出対象にはなりません。

<!-- 視覚的にはラベルに相当するものがあるが、input要素と結び付くマシンアンダースタンダルブルなラベルが無い -->
<p>電話番号</p>
<input id="telNumber" type="text" name="number" size="10" value="">

根拠

入力欄やボタンには、何を入力するものであるか、あるいは実行すると何が起きるのかが分かるようにしておく必要があります。まず、視覚的に見て分かるようにすること、加えて、音声ブラウザで聞いた時にもわかるようにすることが必要です。なぜなら、視覚的に見ている人は、前後のコンテンツの様子、入力欄の並び、配置されている位置などから、そこに何を入れれば良いかをイメージすることができる場合もありますが、音声ブラウザで聞いている人は、そうした位置情報などは見て取れないため、そのフォームコントールの目的が分からないことがあるからです。

あるいは、音声ブラウザの利用者は、少しでも読みにかかる時間を短くするために、フォームコントールだけを再生させながら読み進める場合もあります。そうした場合、そのフォームコントロールに確実に関連付けされたテキストラベルが無いと、例えば、「エディット」「エディット」としか聞こえて来ず、何を入れたら良いのか良く分からなくなることもあります。

例えば、電話番号入力欄は一つのテキスト入力欄で済ます場合と、三つにわける場合があります。視覚的に見ている人はテキスト入力欄の幅や数から、直感的にどのように入力すれば良いか見当を付けることができますが、音声ブラウザを利用している人にはそれは容易ではありません。規格が求めているように、三つに分ける場合であれば、一つ目のテキスト入力欄にはtitle="市外局番"、二つ目にはtitle="局番"、三つ目にはtitle="下4桁"のように指定があれば、利用者は「エディット 市外局番」「エディット 局番」「エディット 下4桁」のように聞くことができ、混乱せず、求められている内容を入力できるようになります。

修正方針

最初に視覚的にラベルとして利用している箇所が無いか確認します。なければ、視覚的なテキストラベルを追加することを検討します。そして、それらテキストラベルを label要素を用いてフォームコントロールと関連付けます。場所が無いなどの理由でテキストを配置したくない場合は、最低でも title属性を用いてラベルを定義します。これでエラーは検出されなくなります。

修正例 : label要素による例

label要素を用いた典型的な例です。これをtitle属性に置き換えることもできますが、title属性では視覚的なラベルを提供できないので好ましくはありません。まずは、label要素を用いることを検討すべきです。

<label for="telNumber">電話番号</label>
<input id="telNumber" type="text" name="number" size="10" value="">

修正例 : title属性による例

titlel属性を用いた例です。このケースではテキストラベルを配置すると視覚的に見ている人には冗長になります。このような場合はtitle属性で情報を提供することは容認されます。

<fieldset>
<legend>電話番号</legend>
<input type="text" id="areaCode" name="areaCode" size="3" value="" title="市外局番">
<input type="text" id="exchange" name="exchange" size="3" value="" title="局番">
<input type="text" id="lastDigits" name="lastDigits" size="4" value="" title="下4桁">
</fieldset>

補足

miChecker では visibility:hidden などで非表示にしているフォームコントロールを検証しエラーを検出する場合があります。これは目視検査では不適合にはならず(*1)無視しても良いのですが、都度検出されのも面倒です。このような場合は、気かチェックツール対策にすぎませんが、title="dummy"など適当な値を設定しておくと良いかもしれません。
(*1 – 音声ブラウザは visibility:hidden は読み上げ対象としません。)

関連する達成基準、達成方法


(他のテクニックは「miChecker対策テクニック集」に整理されています。)

2021年1月16日