プレースホルダーのスタイリング (文字色や文字サイズ)

プレースホルダー (placeholder) とは、入力フォームの記入欄 (テキストボックスやテキストエリア) の中に記述される、入力に関するヒントを示したテキストです。HTML5 以降は、<input> 要素と <textarea> 要素で placeholder 属性が使えるようになり、HTML の標準仕様として、あらかじめ入力フォーム (記入欄) にプレースホルダーを書き入れておくことができます。

以前、「プレースホルダーについて考える」という記事で、「プレースホルダーをラベル代わりに使わない (ラベルは <label> 要素を用いて、常に見える形で記述する)」ことを原則としたうえで、いくつか、プレースホルダーを記述する際の注意点を挙げました。今回は、プレースホルダーのスタイリング (文字色や文字サイズ) について、考えてみたいと思います。

HTML5 の場合、placeholder 属性を含む <input> 要素や <textarea> 要素に対して、CSS で「::-webkit-input-placeholder」「::-moz-placeholder」という擬似クラスを用いることで (WebKit 系および Mozilla 系ブラウザ限定になりますが) プレースホルダーのスタイリングが可能です。また、HTML5 の placeholder 属性の代わりに JavaScript を用いてプレースホルダーを実装する場合は、多くの場合、独自のスタイリングが可能だと思います。

ユーザーが記入欄に入力するテキストや本文テキストよりも「少し控えめに」する

プレースホルダーをスタイリングする際には、可読性を十分に確保することが何よりも大事です。ただし、だからと言って、ユーザーが記入欄に入力するテキストや、本文テキストと、まったく同じスタイル (文字色や文字サイズ) にしてしまうと、かえってユーザーを混乱させてしまう恐れがあります。

実際に、ユーザビリティテストでユーザーの行動を観察していて、目の当たりにしたことがあるのですが、記入欄 (<input> 要素) をマウスでクリックしてフォーカスを当てた後、まずはプレースホルダーの文字列を選択しようとして、ドラッグ操作を試みるユーザーが何人かいたのです。そのユーザーは「自分が情報を入力する前に、ダミーの記述内容 (プレースホルダーの文字列) を消す必要があると思った」そうです。ここでユーザー自身が若干の機転を利かせて、記入欄に何らかの文字 (ユーザー自身が入力したい情報) を入力してみれば、プレースホルダーは消えるのですが、「まずはダミーの記述内容を消さなきゃ」という意識で頭がいっぱいになっている場合はなかなかそうもいかず、先に進めない...という事態に陥ります。

このような事態が生じるのを減らすためには、可読性は確保しつつも、プレースホルダーの存在感を「少し控えめに」するのがよいと思います。

...といった具合に、あくまでも「仮置きのテキスト」である旨、ビジュアルヒエラルキーを表現するのです。

ただしアクセシビリティはしっかり担保する

上述の「文字色を薄くする」「文字サイズを小さくする」はいずれも、やりすぎると、アクセシビリティに悪影響を及ぼすリスクを孕んでいます。その意味では、「ほどほど」にする必要があり、その勘所をしっかりと押さえておきたいところです。

文字色については、背景色とのコントラストに配慮しましょう。ビジュアルヒエラルキー上、プレースホルダーの存在感を控えめにするとしても、コントラスト比は「4.5:1」を確保したいところです。このコントラスト比は、WCAG 2.0 (JIS X8341-3:2010) の達成基準として、明確に規定されているものです。

テキスト及び画像化された文字の視覚的な表現には、少なくとも 4.5:1 のコントラスト比がなければならない。

出典 : JIS-X8341-3:2010「7.1.4.3 最低限のコントラストに関する達成基準 (等級AA)」

文字サイズについては、ユーザーが記入欄に入力するテキストや本文テキストを「1em」または「100%」とするならば、たとえばプレースホルダーの文字サイズは少なくともその80パーセント以上を目安にしする、というのはいかがでしょうか。もちろん、「80パーセント程度の文字サイズであれば読みにくいと感じるユーザーはいない」という意味ではありませんので、文字サイズを可変にしておく (ユーザーが任意で文字サイズを拡大できるようにしておく) ことは、言うまでもありません。

このようにして、ビジュアルヒエラルキーを表現しつつも、アクセシビリティはしっかり担保しておきます。

プレースホルダーの使用に固執しない

ビジュアルヒエラルキーによって存在感を控えめにするということは、そのぶん、程度の差はあれ可読性を低下させることになります (あるスレッショルドレベルを超えなければ、それなりに可読性は維持できるとしても)。その意味では、必要以上にプレースホルダーに依存しない、ということも改めて検討したいところです。

...といったことがページレイアウト上で可能であれば、大概のケースで、プレースホルダーを使用しなくても済むように思います (注釈/インストラクションについては、当サイトの記事「フォーム入力要素の注釈のマークアップ」でご紹介したように、WAI-ARIA の「aria-describedby」を用いて、入力要素と注釈をマシンリーダブルな形で紐づけるとなおよいでしょう)。このように、不必要にユーザビリティ/アクセシビリティを損ねることなく済む手段が既にあるのですから、それらが使えれば、プレースホルダーを使うことに固執しなくてもよいのではないかな...と考えています。