開発時のウェブアクセシビリティの取り組み
HTML作成時のウェブアクセシビリティを意識した具体的なアドバイスをまとめています。
開発時は次の注意点を守りアクセシビリティの向上に努めてください。
HTMLのバリデーションを実施する
W3Cバリデーターを使用してマークアップの正確性を確認し、リンク切れがないかもチェックします。
文書構造を意味づけする
視覚障害者がページ内を容易に移動できるように、見出しやランドマークを適切に使用します。
アクセシビリティツリーを意識する
Google ChromeのDevToolsでアクセシビリティツリーを有効にし、HTML要素のアクセシビリティ情報を確認します。
スクリーンリーダーでの読み上げを考慮する
HTMLの構造や順序に配慮して、スクリーンリーダーが自然な順序で読み上げられるようにします。
フォーカス移動を意識する
キーボードでのフォーカス移動がスムーズに行えるように、HTMLを適切に構成します。
WAI-ARIAを慎重に使用する
不必要なWAI-ARIAの使用を避け、正しくHTMLを使用して、必要な場合のみWAI-ARIAを検討します。
画像の代替テキストを提供する
すべての画像に代替テキストを設定し、「画像です。」という説明を避け、簡潔に内容を伝えます。
フォームのアクセシビリティを確保する
基本はブラウザの標準バリデーション機能を利用し、必要に応じてWAI-ARIAでバリデーションの状態や必須フィールドを明示します。
入力フィールドは何を入力するかを明確にする
入力項目は何を入力するか、ラベルなどを用いて明確にします。
フォームのエラーを特定できる
入力項目をエラー表示する場合は、安易に場所を特定できるようにします。
テキストとカラーのコントラストを確保する
ウェブアクセシビリティ基準に準拠した色のコントラストを確保し、テキストが読みやすいことを保証します。
アクセシビリティの確認を行う
axe DevToolsやmiCheckerなどのツールを使用して、ページ全体のアクセシビリティ評価を行います。
実践的なチェック方法
アクセシビリティの確保には、実践的なチェックが欠かせません。以下は、freeeアクセシビリティ・ガイドラインのチェック方法です。
これらのチェックを行い、クリアすることで、一定水準のアクセシビリティが確保できます。