とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

フォームのplaceholder属性はラベルの役割として使うのはやめたほうがいい

フォームのplaceholder属性はラベルの役割として使うのはやめたほうがいい

フォームのplaceholder属性は、

<input>要素のplaceholder属性で指定した値が、入力欄に初期値として表示されます。 例えば、テキストフィールドに初期値として、 「検索するキーワードを入力してください」などのヒントを示してユーザーの操作を補助することができます。

http://www.htmq.com/html5/input_placeholder.shtml

 

初期値として文字を設定できるので、

入力する項目のラベルや、入力例が記述されている

フォームを多いです。

ですが、ラベルや入力例をplaceholder属性に設定

するのがユーザビリティ上よろしくありません。

 

placeholder属性の挙動は、

文字が入力されたタイミングで消えてしまいます。

 

項目(ラベル)が消えると入力した項目が

何だったのかユーザが入力画面で確認

できなくなります。

 

入力例やヒントが消えるのも同様に

入力するときに例が消えてしまうので、

ヒントを見ながら入力ができない状態になります。

 

placeholder属性にラベルやヒントを記述

しておくとUI上はスッキリしますが、

ユーザには不親切なフォームと言えます。

 

こちらの記事が参考になります。

u-site.jp

この記事では7つの理由から使うべきではない、としています。

 

  1. 消えるプレースホルダテキストはユーザーの短期記憶に負荷をかける
  2. ラベルがないと、フォームの送信前にユーザーが自分の入力内容をチェックできない
  3. エラーメッセージが出たときに、問題の解決方法がわからない
  4. 入力フォーム内にカーソルが入るとプレースホルダテキストが消えるのは、キーボードで移動するユーザーをイライラさせる
  5. 入力済みの入力欄が目につきにくい
  6. ユーザーがプレースホルダを自動入力されたデータだと勘違いする恐れがある
  7. プレースホルダテキストを手動で削除しなければならない場合がある

 

そして結論は、

 

フォームの入力中にユーザーをつまずかせたり、フォームがどう機能するかを理解するのに貴重な時間を無駄にさせるというリスクを取ってはならない。一番いいのは、いつでも見ることのできる明快なラベルを空の入力フォームの外に置くことである。

 

完全同意、ぐうの音も出ない正論ですね。

placeholder属性を設定するのであれば、

入力の際に消えてしまっても

ユーザの操作性を妨げない内容にしましょう。

 

エントリーフォーム最適化(EFO)にもつながります。

参考になる関連記事をはっておきます。

フォームのユーザビリティはまじめにやると

めちゃくちゃ大変。

 

デザイナーとしては

フォームに使用されるタグの挙動や

各フォーム系のタグを使用する場面を

適切に把握しておきたいですね。

 

myakura.github.io

f-tra.com

webtan.impress.co.jp

webtan.impress.co.jp

www.suzukikenichi.com

ics.media
martechlab.gaprise.jp

www.suzukikenichi.com