入力フォームのフィールド内ラベルとヘルプテキストラベルのアクセシビリティ
新しいUIインターフェースの多くは、入力フィールドラベルまたはヘルプテキストを個別のラベルとして実装するのではなく、UIコンポーネント自体に含めるように設定されています。これが視覚障害者のアクセシビリティに与える影響を誰かが知っているかどうか疑問に思っていました。
さらに興味深いのは、ヘルプテキストが配置される場所と、これがユーザーが入力フィールドを使用する方法にどのように影響するかです。
アクセシビリティガイドラインに従ってこれらの機能を実装した経験がある人、または特定の問題に遭遇した場合は、回答に貢献してください。
プレースホルダーをラベルとして使用しない理由はたくさんあります。 Nielsen Norman Groupによるこの記事 はそれをうまくまとめています：
- プレースホルダーテキストが消えると、ユーザーの短期記憶が緊張します。 ...
- ラベルがないと、ユーザーはフォームを送信する前に自分の作業を確認できません。 ...
- エラーメッセージが発生したとき、人々は問題を修正する方法を知りません。 ...
- カーソルがフォームフィールドに置かれたときに非表示になるプレースホルダーテキストは、キーボードで移動するユーザーにとって不快です。 ...
- 中にものがあるフィールドは目立ちません。 ...
- ユーザーは、プレースホルダーを自動的に入力されたデータと間違える可能性があります。..
- ユーザーがプレースホルダーテキストを手動で削除する必要がある場合があります。 ...
ラベルとしてプレースホルダーを使用することについての私の最大の不満は、視覚障害のある人々が読むことを不可能にする光のコントラストの使用です。つまり、これらの人々にはラベルがないほど良いのです！
プレースホルダーのコントラストは通常2.5：1より低く、これは WCAG 2.0ガイドライン に記載されている値をはるかに下回っています。通常のサイズのテキスト（入力フィールドを含む）のコントラストは、4.5：1以上（AAガイドラインに従う）である必要があります。ただし、コントラストを高くすると、実際の値のように見え、ポイント6で上記の問題が増加します。コントラストが読みやすさに与える影響を過小評価しないでください。
追加のヘルプテキストについても同じことが言えます。これにはプレースホルダーを使用しないでください。スクリーンリーダーがプレースホルダーを無視する場合があることを考慮に入れてください。フィールドにフォーカスがある場合（および一部のブラウザーでは）、フィールドに入力があるとテキストが消えます（NNの記事ですべて説明されています）。 。
したがって、プレースホルダーを使用します。
参考にならないテキスト
混乱することなく、この例があるかどうかわかりません。フィールドの近くの他の場所にも表示される情報
個人的には、この冗長性の理由がわかりません。欠落しても影響のない追加情報
これが、プレースホルダーIMHOの唯一の正当な理由です。