0Pricing
Frontend Academy · レッスン

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フィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. WCAG のレベル:A・AA・AAA
  2. 基盤としてのセマンティック HTML
  3. ARIA のロールと属性
  4. キーボード操作とフォーカス管理
← Frontend Academyに戻る