WCAG のレベル:A・AA・AAA
Web Content Accessibility Guidelines を読み、4 つの原則(POUR)を理解し、ほとんどの製品で求められる適合レベルを把握します。
「WCAG のレベル:A・AA・AAA」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
アクセシビリティが重要な理由
世界人口の約15%には何らかの障害があります。アクセシブルなサイトは、スクリーンリーダーの利用者、キーボードだけで操作する利用者、弱視の利用者、低速なネットワークを利用する利用者など、すべての人にとって使いやすくなります。アクセシビリティは、多くの法域で法的要件でもあります。
WCAG — Web Content Accessibility Guidelines
WCAGは、Webコンテンツをアクセシブルにするための要件を定めたW3Cの標準です。現行バージョンはWCAG 2.2(2023年10月)です。後継となるWCAG 3は初期草案の段階です。
4つの原則(POUR)
WCAGは、知覚可能、操作可能、理解可能、堅牢という4つの原則を中心に構成されています。すべての達成基準は、いずれかの原則に分類されます。
知覚可能
情報は、ユーザーが知覚できる方法で提示できなければなりません。画像の代替テキスト、動画のキャプション、十分な色のコントラスト、機能を損なわずに最大200%まで拡大できるテキストなどが該当します。
操作可能
すべての機能をキーボードで操作できなければなりません。マウスだけに依存する操作を避け、コンテンツを読むための十分な時間を確保し、発作を引き起こす可能性のある点滅コンテンツを使用せず、明確なナビゲーション手段を用意します。
理解可能
コンテンツと操作は理解できなければなりません。読みやすい言語を宣言し、予測可能なナビゲーションパターンを使用し、解決策を示す明確なエラーメッセージを表示し、ラベルを一貫させます。
堅牢
コンテンツは、現在および将来の支援技術で動作しなければなりません。妥当なHTMLを使用し、ARIAのベストプラクティスに従い、名前・役割・値をプログラムから判別できるようにします。
WCAG適合レベル
レベルA:最低限のレベル(必須)。レベルAA:標準的な目標(多くの法律で求められるレベル)。レベルAAA:最高レベル。ただしサイト全体に適用するのは現実的ではないため、重要なページにのみ適用します。
目標にすべきレベル
ほとんどのプロジェクトでは、WCAG 2.1 AAまたは2.2 AAを目標にします。これは、欧州アクセシビリティ法(EAA)、米国のSection 508、多くの企業の調達ルールで義務付けられているレベルです。
レベル別の例
レベルA:画像の代替テキスト、キーボードで操作可能。レベルAA:テキストのコントラスト比4.5:1、色だけで情報を伝えない、フォーカスを表示、200%まで拡大可能。レベルAAA:コントラスト比7:1、動画の手話、状況に応じたヘルプ。
AA準拠のための簡単な改善
1)すべての画像に代替テキストを追加します。2)セマンティックHTML(button、nav、h1-h6)を使用します。3)色のコントラストが4.5:1を満たすようにします。4)キーボードだけでサイトをテストします。5)すべてのフォーム入力にラベルを追加します。6)視認できるフォーカスインジケーターを使用します。
クイックチェック
ほとんどのWebサイトやアプリケーションで一般的に法的目標とされるWCAG適合レベルはどれですか?
WCAGの復習
WCAG 2.2が現行の標準です。4つの原則は、知覚可能(Perceivable)、操作可能(Operable)、理解可能(Understandable)、堅牢(Robust)の頭文字を取ったPOURです。適合レベルはA(基本)、AA(法的対応の目標)、AAA(最高レベル)の3段階です。法令遵守にはAAを目標にします。すぐに実施できる対策は、代替テキスト、セマンティックHTML、コントラスト比4.5:1、キーボード操作のテスト、ラベル付きの入力欄、フォーカスの可視化です。
よくある質問
「WCAG のレベル:A・AA・AAA」レッスンは無料ですか?
はい。「WCAG のレベル:A・AA・AAA」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「WCAG のレベル:A・AA・AAA」で何を学びますか?
Web Content Accessibility Guidelines を読み、4 つの原則(POUR)を理解し、ほとんどの製品で求められる適合レベルを把握します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか?
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「WCAG のレベル:A・AA・AAA」レッスンにはどのくらい時間がかかりますか?
ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか?
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- WCAG のレベル:A・AA・AAA
- 基盤としてのセマンティック HTML
- ARIA のロールと属性
- キーボード操作とフォーカス管理