入力欄のプレースホルダーって結局どうなの - Qiita

入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders

[musign]

「（例）」と書くのは最終手段で、できるだけ使わないほうが良いと思う（記事もそういう方向だと思う）。placeholderは読めばわかるが、そもそもユーザーは読まない。そんなにUIに興味ない/追記されたありがとうございま

[kompiro]

積極的には使わないって理解で良い？

[rryu]

プレースホルダーはアイキャッチ画像のように無くてもいい賑やかしとしてしか使えないと思う。役立てようとするとどうにもならなくなる。

[securecat]

::placeholderでコントラスト比を確保してしまうと、プレースホルダーであることが分からなくなってしまう(入力済みと勘違いする)ので、これはこれでやめるべきであり、単にいじれますよと紹介するのは悪手では。

[kakei-akihiko]

コメントを入力してください（省略可）

[aceraceae]

既定値みたいにみえるプレースホルダーは未記入だと気づかなくて先に進めなくて軽く悩むことはある。

[masa8aurum]

・例であるのがわかるように「（例）」など ・正しい記入のため必要な情報は、入力欄の外に書くべき ・スクリーンリーダーも考慮

[ghostbass]

使うならコントラストは通常入力色が十分なコントラストを持つ限りぎりぎりまで下げたい。

[twotiger]

確かにラベル代わりにプレースホルダー使うとか、トグルスイッチのオンオフとかはかなり問題があるUIだと思う

[igrep]

なるほどなぁ。"プレースホルダーは肝心なときに見えなくなってしまったり、記入済みの情報と区別がつかなくなってしまい、その可能性が少しでもある場合には利用を避けるべき"