開発時のウェブアクセシビリティの取り組み
HTML
作成や実装の段階で意識するとよい点を、短くまとめています。
プロジェクトの方針や対象の WCAG
の版に合わせて、優先度を付けながら取り入れてください。
HTMLのバリデーションを実施する
W3Cバリデーターを使用してマークアップの正確性を確認し、リンク切れがないかもチェックします。
文書構造を意味づけする
支援技術の利用者がページ内を移動しやすいよう、見出しやランドマークを適切に使います。
アクセシビリティツリーを意識する
Google ChromeのDevToolsでアクセシビリティツリーを有効にし、HTML要素のアクセシビリティ情報を確認します。
スクリーンリーダーでの読み上げを考慮する
HTMLの構造や順序に配慮して、スクリーンリーダーが自然な順序で読み上げられるようにします。
フォーカス移動を意識する
キーボードでのフォーカス移動がスムーズに行えるように、HTMLを適切に構成します。
WAI-ARIA を慎重に使う
不要な WAI-ARIA は避け、まずは意味のある HTML で表現し、どうしても足りない情報だけを WAI-ARIA で補います。
画像の代替テキストを提供する
すべての画像に代替テキストを設定し、「画像です。」という説明を避け、簡潔に内容を伝えます。
フォームのアクセシビリティを確保する
基本はブラウザの標準バリデーション機能を利用し、必要に応じてWAI-ARIAでバリデーションの状態や必須フィールドを明示します。
入力フィールドは何を入力するかを明確にする
入力項目は何を入力するか、ラベルなどを用いて明確にします。
フォームのエラーを特定できる
入力エラーを示すときは、どの項目に問題があるかを利用者がたどりやすいようにします。
テキストとカラーのコントラストを確保する
対象とする WCAG の達成基準に沿って、前景と背景のコントラストを確保し、本文や UI の文字が判読しやすくなるようにします。
アクセシビリティの確認を行う
axe DevToolsやmiCheckerなどのツールを使用して、ページ全体のアクセシビリティ評価を行います。
実践的なチェック方法
自動検査に加え、キーボード操作やスクリーンリーダーでの確認など、手順に沿ったチェックが役立ちます。次のリンクは、freee
アクセシビリティ・ガイドラインに掲載されている手順例です。
プロジェクトの要件に合わせて、必要な項目だけを選んでも構いません。
公開・販売・運用のことで困ったら、まずは「ましじめ」へ
ウェブサイトの制作や改善、AI活用、アクセシビリティ、
商品やサービスの見せ方まで、何から手をつければよいか分からない段階でもご相談ください。
自社事業の経験と専門的な技術力を活かし、無理なく続けられる形をご提案します。