初代編集長ブログ―安田英久

お願いだからWebフォームでは<label>を正しく使ってユーザビリティを上げてくれ

Webフォームが「うわ、使いづらい」となってしまわないようにする、意外と対応されていないHTMLタグ
Web担のなかの人

今日は、Webフォームが「うわ、使いづらい」となってしまわないようにする、意外と対応されていないことが多いHTMLタグ「<label>」について。

HTMLを自分で書かないWeb担当者さんでも、デザイナーさんが作ったフォームに関して最低限これだけはチェックしておくといいですよ、というお話しです。

コンバージョンの要である「Webフォーム」。アクセス解析での改善やEFO(入力フォーム最適化)をしていると思いますが、意外と忘れられていることが多い「<label>」をご存じでしょうか。

フォームの入力項目それぞれの「ラベル(項目名)」を書くためのHTMLの作法なのですが、これをちゃんと使っているかどうかで、フォームの使いやすさがガラッと変わるのです。

一番わかりやすいのは、ラジオボタンやチェックボックス。<label>をちゃんと使っていると、ボタン部分ではなく文字の部分をクリックするだけで項目を選択できるのです。

逆に言うと、そういった配慮がされているフォームを使い慣れている人にとっては、<label>がちゃんと設定されていないフォームは「うわっ、使いづらい、面倒くさい」となってしまうのです。

以下に、label要素を使っていないフォームの例と、使っているフォームの例を示します。実際にクリックしてみて動作の違いを確認してください。

label要素あり(文字クリックでOK)
  
label要素なし(ボタン本体をクリックしなきゃダメ)
はい    いいえ

使い方は、意外と簡単。対応するチェックボックスやラジオボタンにそれぞれid属性を付けておいて、<label>のfor属性でそのid名を指定するだけ。「このフォーム要素に対応するラベルだよ」と指示してあげるわけですね。

<label for="mail-0">
  <input type="radio" name="mail" value="0" id="mail-0">
  はい
</label>

これで、そのラベル内の文字(上記の例では「はい」の部分)などをクリックすると、for属性で指定された要素がクリックされたのと同じ動作をするようになります。

label要素の使い方として実際には次の2通りがあります。

  • for属性を使う(対応チェックボックスなどとの位置関係は関係なし)
  • <label>タグでラベルの文字列と対応するチェックボックスなどを囲む(for属性なし)

私はfor属性付きの<label>で囲むのが癖になっていますが、無理に囲まなくてもいいんですね。

このあたりの詳しい解説が、「全日本<label>要素マークアップ検定」としてslideshareに川田寛氏が公開している資料の30枚目以降のスライドにありますので、ちゃんと知りたい人は、そちらも参照するといいでしょう。

ネット(というかブラウザの機能)に明るくない一般ユーザーは、あまり<label>のことは気にせずにボタン部分をクリックしている比率が高いのではないかと思われます。なので、これに対応したらコンバージョン率がすごくアップするかというと、そうではないでしょう。

しかし、せっかくフォームが使いやすくなるように用意されている機能があるのならば、少しでもちゃんと使って、いろんなユーザーにとって使いやすいフォームにしたいですよね。

御社のフォーム、ちゃんと<label>が設定されていますか?

ちなみにWeb担でも、外部システムを使うセミナー申し込みフォームなどではちゃんとできていないこともあります。改善しなきゃ。

用語集
EFO / HTML / アクセス解析 / コンバージョン / コンバージョン率 / チェックボックス / ユーザビリティ / ラジオボタン
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

カオスマップ
企業やサービスや製品などについて、カテゴリーや関係性でまとめて図にしたもの。具体 ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]