Webアクセシビリティ達成基準まとめ（1.3.1〜1.4.5）

情報の構造と意味を正しく伝える達成基準

1.3.1 情報及び関係性の達成基準

見た目だけでなく、HTMLの構造としても情報の関係性が正しく伝わっていることが求められます

対応例
見出しにはh1〜h6、箇条書きにはulやol、表にはtableを使用し、CSSだけで構造を表現しないようにします。スクリーンリーダー利用者にも情報のまとまりが伝わります。

Webアクセシビリティ達成基準「1.3.1 情報及び関係性の達成基準」の話

1.3.2 意味のある順序の達成基準

コンテンツは、読み上げたときにも意味が通じる順序で並んでいる必要があります。

対応例
FlexboxやGridで表示順を変更している場合でも、HTML上の記述順が自然な流れになっているかを確認します。

Webアクセシビリティ達成基準「1.3.2 意味のある順序の達成基準」の話

1.3.3 感覚的な特徴の達成基準

位置や色、形など感覚的な表現だけで情報を伝えないことが求められます。

対応例
「右のボタン」「赤い部分」などの表現に加え、ボタン名や項目名を明記します。

Webアクセシビリティ達成基準「1.3.3 感覚的な特徴の達成基準」の話

視覚・聴覚への配慮に関する達成基準

1.4.1 色の使用の達成基準

色だけに頼って情報を伝えないことがポイントです。

対応例
エラー表示や必須項目は、色変更に加えてテキストやアイコンを併用します。

Webアクセシビリティ達成基準「1.4.1 色の使用の達成基準」の話

1.4.2 音声の制御の達成基準

自動再生される音声を、利用者が制御できる必要があります。

対応例
動画や音声コンテンツは自動再生を避け、停止・ミュート操作を可能にします。

Webアクセシビリティ達成基準「1.4.2 音声の制御の達成基準」の話

1.4.3 コントラスト（最低限レベル）の達成基準

文字と背景のコントラスト比を確保し、読みやすさを担保します。

対応例
コントラストチェックツールを使用し、基準値を満たしているか数値で確認します。

Webアクセシビリティ達成基準「1.4.3 コントラスト（最低限レベル）の達成基準」の話

文字の可読性に関する達成基準

1.4.4 テキストのサイズ変更の達成基準

文字サイズを拡大しても、情報が欠けずに閲覧できることが求められます。

対応例
固定レイアウトを避け、拡大時に文字が隠れたり重なったりしないかを確認します。

Webアクセシビリティ達成基準「1.4.4 テキストのサイズ変更の達成基準」の話

1.4.5 文字画像の達成基準

文字を画像で表現する場合は、代替手段を用意する必要があります。

対応例
可能な限りテキストで表現し、装飾目的で使用する場合も重要な情報は画像内に閉じ込めません。

Webアクセシビリティ達成基準「1.4.5 文字画像の達成基準」の話

まとめ

今回振り返った達成基準は、どれもWeb制作の基本に近い内容です。
一つひとつは難しくありませんが、意識していないと対応漏れが起きやすい点でもあります。

アクセシビリティ対応は特別な作業ではなく、丁寧な設計と実装の積み重ねです。
こうした基本を確実に押さえることが、Web制作会社としての技術力や信頼につながると考えています。