【要約】`placeholder` のアクセシビリティ問題、3パターンで整理してみた [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
フロントエンド開発者が、デザインの簡素化を目的として
placeholderをラベル代わりに利用している。この慣習は、特定のユーザー層に対して深刻な操作上の障壁を生じさせている。特に、入力中に情報が消失する点は、認知的な負荷を増大させる。- ・入力開始時に情報が消えるため、短期記憶に課題があるユーザーが困惑する。
- ・デフォルトのスタイルではコントラスト比が不足し、視認性が低い。
- ・オートコンプリート時にヒントが参照できなくなる。
- ・ラベルがない場合、スクリーンリーダーがフィールドの役割を正しく認識できない。
// Approach
著者は、入力中も情報が消失しない永続的な表示方法を採用することで、この問題を解決する手法を提示している。具体的には、
placeholderへの依存を避け、HTML標準要素を組み合わせる手法である。これにより、情報の永続性を確保する。- ・
<label>要素を必ず使用し、フィールドの目的を明示する。 - ・指示文（「〜を入力してください」）を
placeholderに含めない。 - ・入力形式の例示は、入力欄の下などに永続的な説明文として配置する。
- ・例示形式（
user_name等）を用いる場合は、指示形式よりも優先して採用する。
// Result
適切な実装への移行により、多様なユーザー層に対する操作性と情報の正確性が向上する。これにより、アクセシビリティの標準に準拠した堅牢なフォームが実現できる。
- ・認知障害や短期記憶に困難を抱えるユーザーの操作性が向上する。
- ・WCAG 2.1の達成基準（1.3.1, 1.4.3, 3.3.2等）への準拠が可能になる。
- ・スクリーンリーダー利用者が、入力中もフィールドの意味を正確に把握できる。
- ・デザインの美観とアクセシビリティを両立できる。
Senior Engineer Insight
> UIの美観を優先して
placeholderを多用する設計は、アクセシビリティの観点から極めてリスクが高い。大規模なサービスを運用する立場としては、以下の視点が重要である。- ・デザインガイドラインに「ラベルの必須化」を組み込むべきだ。
- ・指示形式の
placeholderは、開発工程で禁止すべきである。 - ・実装コストは低いが、ユーザー体験への影響は甚大である。
- ・アクセシビリティは、単なる配慮ではなく、製品の品質そのものである。