これはなに
フォームを実装するとき、placeholder 属性に入力例や説明を書いてしまうことが多いと思います。
<input type="text" placeholder="ここにユーザー名を入力してください">
この書き方、実はアクセシビリティ上の問題があります。
placeholder の何が問題なのかを整理しながら、実務でどう判断すれば良いかをまとめました。
参考資料：
- 達成基準 1.4.3: コントラスト (最低限)を理解する
- 達成基準 3.3.2: ラベル又は説明を理解する
- Placeholders in Form Fields Are Harmful - Nielsen Norman Group
placeholder の根本的な問題：入力すると消える
placeholder には決定的な制約があります。入力を始めると消えます。
「user_name のような形式で入力してください」という placeholder があったとします。ユーザーはそれを読んで入力を始めますが、最初のキーを押した瞬間に消えてしまいます。
「あれ、どんな形式だったっけ？」
特に認知障害や短期記憶に困難を抱えるユーザーにとって、これは大きな障害になります。入力しながら確認したいのに、確認できない状態になってしまうからです。
消えること以外にも、いくつか問題があります：
- コントラスト比の低さ：多くのブラウザでグレー表示されます。WCAG 2.1 の達成基準 1.4.3 では通常テキストのコントラスト比は 4.5:1 以上が必要ですが、デフォルトスタイルではこれを満たさないことが多いです
-
オートコンプリート時の問題：ブラウザが自動入力すると
placeholderが消えるため、入力中にヒントを参照できなくなります - スクリーンリーダーとの相性：ブラウザ・スクリーンリーダーによって読み上げ挙動がばらつきます
使い方による3パターン評価
placeholder の使い方は大きく3パターンに分けられます。
| パターン | 例 | 評価 |
|---|---|---|
| 説明文に例を置く | 入力欄の下に「例：user_name」 | ◎ 最良 |
| 例示形式のプレースホルダー | user_name |
△ 次善 |
| 指示形式のプレースホルダー | 「ここにユーザー名を入力してください」 | × NG |
NG：指示形式
<!-- NG -->
<input type="text" placeholder="ここにユーザー名を入力してください">
入力を始めると「何を入力すればよいか」の手がかりが完全に消えます。ラベルがあったとしても、入力形式の手がかりがゼロになります。
次善：例示形式
<!-- 次善 -->
<input type="text" placeholder="user_name">
消えたとしても「あの形式か」と思い出しやすいという利点があります。指示形式よりは実用的です。
最良：説明文に例を置く
<!-- 最良 -->
<label for="username">ユーザー名</label>
<input type="text" id="username">
<p class="hint">例：user_name</p>
これなら入力中も消えません。WCAG 2.1 の達成基準 3.3.2（ラベルまたは説明）でも、入力フォーマットの説明は永続的に表示することが推奨されています。
ラベルとの関係で問題の大きさが変わる
placeholder の問題は、ラベルの有無によって影響の大きさが変わります。
ラベルの代わりに placeholder だけ → NG
<!-- NG -->
<input type="email" placeholder="メールアドレス">
入力後にフィールドの意味が分からなくなります。また、<label> 要素がないためスクリーンリーダーがフィールドを正しく読み上げられません。
WCAG 2.1 の達成基準 1.3.1（情報及び関係性）および 2.4.6（見出し及びラベル）にも反します。
ログインフォームではこのパターンをよく見かけます。
デザイン的にはスッキリしますが、アクセシビリティの観点では問題が残ってしまいます。
ラベルがある上での補足 placeholder → 許容範囲
<!-- 許容範囲 -->
<label for="email">メールアドレス</label>
<input type="email" id="email" placeholder="contact@example.com">
ラベルがあるため最低限の情報は保たれます。ただし同じ情報を説明文に置く方が確実です。
実例：before / after
問い合わせフォームのメールアドレス欄
Before
問題：ラベルなし・指示形式・入力後にフィールドの意味が消える
<input type="email" placeholder="メールアドレスを入力してください">
After
<label for="email">メールアドレス</label>
<input type="email" id="email">
<p class="hint">例：contact@example.com</p>
ラベルを追加し、placeholder を削除して説明文に例を移しました。
会員登録フォームのユーザー名欄
Before
問題：ラベルはあるが指示形式のプレースホルダー
<label for="username">ユーザー名</label>
<input type="text" id="username" placeholder="ここにユーザー名を入力してください">
After
指示形式の placeholder を削除し、説明文に入力形式の例を移しました。
<label for="username">ユーザー名</label>
<input type="text" id="username">
<p class="hint">例：user_name（半角英数字と「_」「-」が使えます）</p>
ログインフォーム
Before
問題：ラベルなし・入力後にフィールドの意味が消える
<input type="email" placeholder="メールアドレス">
<input type="password" placeholder="パスワード">
After
ラベルを追加し、placeholder を削除しました。
ログインフォームは情報がシンプルなため、ラベルを追加するだけで placeholder が不要になるケースが多いです。
<label for="email">メールアドレス</label>
<input type="email" id="email">
<label for="password">パスワード</label>
<input type="password" id="password">
まとめ
確実にNGなのは次の2点です：
-
placeholderでラベル代わりにすること - 指示形式（「ここに〇〇を入力してください」）を使うこと
それ以外は「入力中も必要な情報がユーザーに届くか」を基準に判断すると迷いが減ると思います。
| ルール | 内容 |
|---|---|
| ラベルは必ずつける |
placeholder でラベル代わりにしない |
| 指示形式は使わない | 「ここに〇〇を入力してください」はNG |
| 理想は説明文に例を置く | 消えないので確実 |
| 次善は例示形式 | 使うなら user_name のような具体例で |
まず「指示形式だけは絶対使わない」から始めると、多くのフォームは大きく改善されると思います。