プレースホルダーの使い方について｜ウェブアクセシビリティ対応
こんにちは、webエンジニアのゾノ( @ozonosho )です。
今回はウェブアクセシビリティにおけるプレースホルダーの使い方について僕が指摘されたポイントをご紹介いたします。
プレースホルダーはおさまりが良いので下記のように使われているケースをよく見かけますが、ウェブアクセシビリティの観点だと下記はすべてNGです。
- ①ラベルの内容を記入しているケース
- ②説明文を記入しているケース
- パスワード
- ③誤解を与える例示を記入しているケース
- メールアドレス
URL
※参考情報
『HTML Standard「The placeholder attribute」』
プレースホルダーの性質上、入力項目内に1文字でも入力すると表示内容が消えてしまうため、入力するうえで重要な情報や再確認する可能性のある情報を含めることは推奨されません。（上記だと①②のケース）
こういった情報はプレースホルダーを利用するのではなく、①の場合はラベルとして設置、②の場合は注釈として入力項目の付近に設置することが推奨されています。
②について補足すると、スクリーンリーダーを利用する方は注釈が入力項目の下部にあると入力前に気づけないため、注釈はできれば入力項目の直前に設置し、それが難しい場合はaria-describedbyプロパティを用いて入力項目と説明文を関連付けます。
※詳細はこちら
『ユーザインタフェース コントロールに対する説明ラベルを提供するために、aria-describedby プロパティを使用する』
③については、ラベルに「メールアドレス」とあればユーザーはそれだけで何を入力すれば良いのか正しく理解できます。
それにも関わらず具体例を入れてしまうと「記入例と同じドメインじゃないとダメなのか」「（記入例と分からず）同じアドレスを入力する必要があるのか」といった誤解を与えてしまう可能性があります。
同様にURL入力欄でラベルに「URL」とあるにもかかわらずプレースホルダーに「https://」と入っていると「http://はダメなのか」「https://の後から書けばよいのか」といった誤解を与えてしまいます。
つまり、本来当たり前に何を入力すれば良いのか分かることなのにプレースホルダーがあるせいで余計な誤解を与えてしまうということです。このような利用は避けるべきです。（僕はそう怒られましたｗ）
また、一般的にプレースホルダー内の文字は（ユーザーが入力する文字と区別するため）薄い色で表現されることが多く、ほとんどのサイトにおいてウェブアクセシビリティにおけるコントラスト比基準を達成できていません。プレースホルダーにはこういった問題点もあります。
※詳細はこちら
『コントラスト (最低限):達成基準 1.4.3 を理解する』
プレースホルダーはあくまで補助。使わなくても良い。
ここまでに記載したとおり、プレースホルダーはウェブアクセシビリティの観点で見ると必須ではないどころか使い方によってはマイナスの作用が働いてしまいます。
ラベルや説明文を別途設置したうえで本来の目的どおり入力補助としてプレースホルダーを使う分には問題ないですが、途中で表示が消えてしまう性質上ユーザーの短期記憶に負荷をかける要因にもなります。
僕が受けたアクセシビリティ評価会社のテストにおいても、プレースホルダーを利用していた箇所は基本的にすべて入力項目の外に設置するよう代替を求められました。そのため、どうしても必要な場合を除いて無理に使う必要は無いです。
おわりに
以上、今回の記事ではウェブアクセシビリティにおけるプレースホルダーの使い方を紹介させていただきました。
当サイトではWordPressのカスタマイズ依頼を請け負っています。実現したい機能・要望がある方はぜひ下記ページよりご相談ください。
