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