アクセシブルなフロントエンドコンポーネントの構築
アクセシビリティは要件です。選択肢ではありません。
コードを書く前に計画を立てましょう。ユーザーをリストアップします。
- スクリーンリーダーのユーザー
- キーボードのみを使用するユーザー
- 色覚多様性を持つユーザー
まずはネイティブなHTMLを使用します。
- ボタンには
buttonタグを使用する - フォームには
inputタグを使用する - ネイティブなHTMLで対応できない場合にのみ ARIA を追加する
キーボード操作を優先します。
- すべてのコントロールがマウスなしで動作することを確認する
- フォーカスインジケーターを常に表示させる
- モーダル内ではフォーカスをトラップする
視覚以外の要素も考慮して設計します。
- エラーを示すために色のみを使用しない
- アラートにはテキストラベルを追加する
- コントラスト比を確認する
エラー処理を適切に行います。
- ユーザーが間違いを修正できる明確な方法を提供する
- 不適切な入力には
aria-invalidを使用する - 更新情報には
aria-liveを使用する
成果物をテストします。
- axe-core や Lighthouse を使用する
- スクリーンリーダーを使ってサイトを試す
- Tab キーを使ってすべてのボタンをテストする
カスタムの div よりもネイティブな要素を選択しましょう。その方が時間を節約でき、より確実に動作します。