Web Content Accessibility Guidelines (WCAG) 2.0はウェブコンテンツのアクセシビリティを向上させるための国際的なガイドラインです。
アクセシビリティの適合レベルとしてA、AA、AAAの3つのレベルを提供しており、それぞれ異なる要件が含まれています。
ここでは、それぞれのレベルの詳細とその要件を解説します。
レベルA
レベルAは、最も基本的なアクセシビリティ要件を満たすための基準です。このレベルの要件は、コンテンツが最低限のアクセシビリティを提供するために必要なものです。
主な要件
画像の代替テキスト
すべての画像に適切な代替テキストを提供すること。
<img src="image.jpg" alt="説明文">動画のキャプション
動画コンテンツにはキャプションを提供すること。
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="captions.vtt" kind="captions" srclang="ja" label="日本語キャプション">
</video>キーボード操作のサポート
すべての機能はキーボード操作が可能であること。
<button>クリック</button>レベルAA
レベルAAは、レベルAの要件に加え、より多くのユーザーがコンテンツにアクセスできるようにするための追加の要件が含まれています。このレベルは、ほとんどの組織が目指すべき標準です。
主な要件
コントラスト比
テキストと背景のコントラスト比が少なくとも4.5:1であること。
.text {
color: #000000;
background-color: #FFFFFF;
}レスポンシブデザイン
コンテンツが異なる画面サイズやデバイスで適切に表示されること。
@media (max-width: 600px) {
.container {
width: 100%;
}
}フォームのラベル
すべてのフォーム要素にはラベルを提供すること。
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username">注意点
レベルAAはテキストのコントラスト比に関する要件を含んでいますがロゴ画像やブランドのロゴには適用されません。
ただし可能な限りアクセシビリティを向上させるためにコントラスト比を考慮することが推奨されます。
レベルAAA
レベルAAAは、最も厳しいアクセシビリティ要件を満たすための基準です。
このレベルはすべてのユーザーが最大限にアクセス可能となることを目指していますが、すべてのウェブサイトで達成するのは現実的には難しいです。
主な要件
拡張テキスト
テキストのコントラスト比が少なくとも7:1であること。
.high-contrast-text {
color: #1A1A1A;
background-color: #FFFFFF;
}字幕と音声解説
すべての動画に字幕と音声解説を提供すること。
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="captions.vtt" kind="captions" srclang="ja" label="日本語キャプション">
<track src="description.vtt" kind="descriptions" srclang="ja" label="日本語音声解説">
</video>言語の識別
すべてのテキストの言語が識別されていること。
<p lang="ja">こんにちは</p>まとめ
WCAG 2.0の各レベル（A、AA、AAA）は異なるアクセシビリティ要件を提供し、それぞれが異なる程度のアクセシビリティを保証します。
ウェブデザイン技能検定を目指す方はこれらの基準を理解し実際のウェブデザインに適用するスキルを身につけることが重要です。
特にレベルAAは、多くの組織が目指すべき標準であり、実際のプロジェクトで広く適用されています。
