🔰【やさしいWCAG】Web Content Accessibility Guidelines (WCAG) 2.1 を嚙み砕いてみるの会【執筆中】

この文書は執筆中です
週に一度作業時間を取って定期的に更新していきます。気長にお待ちください🙏
更新履歴はこちら

📝 はじめに

「WCAG ってわかりづらい…」という声がたくさん聞きます。
こうした技術的な文書は、日本語訳を読んでもあんまり頭に入ってこないですよね…💭

というわけで、できるだけやわらかく雰囲気で WCAG を理解するためにまとめてみました。

今回かみ砕いた Web Content Accessibility Guidelines、通称WCAGうぃーきゃぐは、Webコンテンツのためのアクセシビリティガイドラインです。この記事はそんな WCAG 2.1 の内容を簡単にかみ砕いたものです。

原文やウェブアクセシビリティ基盤委員会（WAIC）による日本語訳がありますので、WCAGのイメージがつかめたら併せてご覧ください。

• Web Content Accessibility Guidelines (WCAG) 2.1 原文最新版
• Web Content Accessibility Guidelines (WCAG) 2.1 日本語訳最新版

なお、以下のような前提知識が必要です。

• W3C = World Wide Web Consortium - Wikipedia
• 「W3C勧告」および「W3C勧告プロセス」の概要
• ワーキンググループ（Working Group） = 特定の問題を解決するために調査したり、技術について研究・議論するための組織。作業部会。作業班。
• 非規範的（規範的ではない） = non-normative - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

免責事項と表記上の注意
本記事は大まかに理解するために、かなり荒くかみ砕いたものです。
原文からいくつか省略されている内容があるため、原文も合わせてご確認ください。

• 開発者: 著者（Authors）、つまりWebコンテンツの制作者のことを「開発者」と表記します
• ルール：「達成基準」（詳しくは後述）のことを便宜上「ルール」と表記しますが、筆者はこれを本来のニュアンスとは異なる表現だと認識しています。本文書内の「ルール」は「こうなってるともっと良くなるよ！」というイメージを持っていただけるとよいかもしれません。慣れてきたら「達成基準」と呼びましょう。

💡 WCAG の歩き方
WCAGで定義されているルールは、次の4つに大別されます。

• 知覚可能（それに気づけるか）
• 操作可能（それが触れるか）
• 理解可能（その意味がわかるか）
• 堅牢（仕様通りに作ってるか）

まったくイメージがつかない！という場合はまず「1. Perceivable - 知覚可能」から見ていってもいいかも…？

それではWebコンテンツの品質向上のため、WCAG の雰囲気をつかんでいきましょう！
ここから本編です。

🥒 このガイドラインは何のためのものなの？¹

• みんなが使いやすいWebコンテンツの作り方がたくさん載っている
• 対象にしているデバイスは次の４つ
  • デスクトップ
  • ラップトップ
  • タブレット
  • モバイルデバイス
• 次のような障害を持っている人たちにも使いやすくするためのもの

名称	内容
blindness and low vision全盲又はロービジョン	目が見えない、視力が低い、色の見え方が多数派と異なる
deafness and hearing lossろう又は難聴	耳が聞こえない、聞こえづらい
limited movement運動制限	体が思ったように動かせない
speech disabilities発話困難	言葉を正常に発音できない、声での会話が難しい
photosensitivity光感受性発作	チカチカするものを見ると痙攣やてんかん発作などが起こってしまう
learning disabilities学習障害	「聞く」「話す」「読む」「書く」「計算・推論する」ことが難しい
cognitive limitations認知限界	認知限界

注意
ただし、これは障害のある人みんなの「こうしてほしい」に応えるためのものではありません。
あくまでも障害の有無にかかわらず、あらゆるユーザーにとって使いやすいWebコンテンツを作るためのものです。

💡 WCAG 2.1 はいろんな技術に応用できる！

WCAGは特定の技術に限定したガイドラインではありません。
特定の技術で基準を満たすための方法や、達成基準を理解するため解説書などは別に用意されています。

• How to Meet WCAG 2.1（クイックリファレンス） [原文]
• WCAG 2.1 解説書 [原文] [日本語]
• WCAG 2.1 達成方法集 [原文] [日本語]
• The WCAG Documents [原文]
• Web Content Accessibility Guidelines Overview（WCAG自体の紹介・技術資料・教育資料など）[原文]

💡 WCAG 2.1 は WCAG 2.0 の完全上位互換！

WCAG 2.1 は、2008年12月にW3Cが勧告した WCAG 2.0 を拡張したものです。
つまり、WCAG 2.1 に準拠すれば WCAG 2.0 にも準拠していると言えます。

💡 WCAG 2.0 はどうなるの？

WCAG 2.1 も 2.0 もW3C勧告のままです。
ただしW3Cは、できる限り最新の WCAG を使用することを推奨しています。

🥒 この文書はどういう状態なの？²

• Accessibility Guidelines Working Group が作成した WCAG 2.1 のW3C勧告バージョン！
• W3C関係者・ソフトウェア開発者がレビュー済み！
• 参考資料としてつかえるし、他の文書から引用したりしてOK！
• 一部CSSの仕様変更が WCAG に影響してないか注目しつづけてるよ！
• WCAGへのご意見はGitHub上のIssueで！（メールでも可）

将来的に、この文書がほかの文書にとって代わられるかもしれません
W3Cが発行している文書の最新版は https://www.w3.org/TR/ で確認できます。

💡 W3C勧告におけるW3Cの役割って？
さまざまなWebの仕組みがもっともっと連携しやすくするために、
Web標準の仕様をいろんな人に興味を持ってもらい、広く普及させていくこと。

🥒 イントロダクション³

この節は非規半的です。

0.1 WCAG 2 のこれまで⁴

このガイドラインは、ありとあらゆる個人・組織・政府の「こうしたい！」が満たせるような、各国共通の基準を作るために世界中の人々が協力して生まれました。

そのおかげで、さまざまな障害を持つ方がWebコンテンツを使いやすくなるようなりましたが、今現在もすべてのニーズに対応できるわけではありません。
とはいえ、このガイドラインのおかげで高齢者を含めたすべてのユーザにとって、Webコンテンツを使いやすくできるようになったのです。

WCAG を作っていく中でワーキンググループは、認知・言語・学習障害についてのルールを考えている時に、さまざまな課題に直面しました。
「どうやってテストするのか？」「どうやって実装するのか？」それに加えて、国際的な課題などを考えていく必要があったのです。

それらを考えるにはあまりにも時間が足りなかったので、将来の WCAG のバージョンでそういった内容について考えていくことにしました。
そうして、WCAG 2.0 は WCAG 1.0 をベースに、WCAG 2.1 は WCAG 2.0 をベースに拡張していく形で、ますますよいものに改善されてきました。

より詳細なWCAGの紹介については Web Content Accessibility Guidelines (WCAG) Overview を読んでください。

💡 WCAGのルールに沿って作れているかって、どうやって確かめるの？
WCAG は「機械的な自動テスト」と「人間による評価」の組み合わせでチェックできるように設計されています。

💡 コンテンツだけがアクセシブルであればいいわけじゃない！
WebアクセシビリティはWebコンテンツだけではなく、ブラウザなどのユーザエージェントがアクセシブルかどうかも重要です。そして、Webコンテンツを作るためのツールも非常に重要な役割を担っています。

• Essential Components of Web Accessibility
• User Agent Accessibility Guidelines (UAAG) Overview
• Authoring Tool Accessibility Guidelines (ATAG) Overview

0.2 WCAG 2 ってどういう風に読めばいいの？⁵

このガイドラインはとても幅広い個人や組織に必要とされています。
Webデザイナーや開発者・政策立案者・企業などの物資調達部・教師・学生さんなどなど、より多くのニーズに応えるためにいくつかのレイヤーに分かれてガイダンスをまとめました。

💡 開発者さんはできるだけ全部読むべし…
すべてのガイダンスは、コンテンツをアクセシブルにする方法を伝えるためにお互いに参照しあっています。
助言的な内容も含めて、可能な限り目を通して、Webコンテンツをガイドラインに適応させましょう。

Principles - 原則

もっと上位のレイヤーとして、4大原則があります。
これらはWebアクセシビリティを考えるうえで非常に重要な原則です。

• 知覚可能（それに気づけるか）
• 操作可能（それが触れるか）
• 理解可能（その意味がわかるか）
• 堅牢（仕様通りに作ってるか）

アクセシビリティの四つの原則を理解する（Understanding the Four Principles of Accessibility）も合わせて参照してみてください。

Guidelines - ガイドライン

4大原則それぞれの下に、全部で13個のガイドライン（目指すべき目標）があります。
ガイドラインそのものはテストできるものではないですが、開発者が理解しやすくなるようにルールをカテゴリごとにまとめています。

例：

Guideline 1.1 Text Alternatives
Guideline 1.2 Time-based Media

ガイドライン 1.1 テキストによる代替
ガイドライン 1.2 時間依存メディア

Success Criteria - ルール（達成基準）

各ガイドラインの下に、アクセシブルにするためのルールが並んでいます。
どのルールに従うべきかわからなくなったときは、ガイドラインからルールをたどって考えるようにしてみましょう。

例：

Success Criterion 1.1.1 Non-text Content
Success Criterion 1.3.1 Info and Relationships

達成基準 1.1.1 非テキストコンテンツ
達成基準 1.3.1 情報及び関係性

ルールはそれぞれ3段階のレベルを持っています。

• AAAとりぷるえー（最高レベル）
• AAだぶるえー
• Aしんぐるえー（最低レベル）

たとえば、適合レベルAのルールすべてを達成できたWebコンテンツは「WCAG 2.1 適合レベルAの基準を満たしている」と言えます。あわせて適合レベルを理解する（Understanding Levels of Conformance）も合わせて参照してみてください。

最高レベルに準拠したからアクセシブルとは限らない！
適合レベルAAAを満たしたコンテンツであっても、ユーザが抱える障害の種類や程度、組み合わせによってはアクセシブルであるとは限らないことを忘れてはなりません。特に認知・言語・学習障害を持つユーザにとって、アクセシブルではない場合があります。
開発者はそうした人々にとっても、Webコンテンツが可能な限りアクセシブルになるにはどうすればいいか十分よく考えなければなりません。また、実際に障害当事者の方々から、アクセシブルにするための改善案を受け取るようにしていきましょう。

Sufficient and Advisory Techniques - 「十分な達成方法」と「参考達成方法」（と「失敗例」）

各ルールには詳細な説明が用意されています。
管理上は「WCAG 2.1 解説書（Understanding）」という別の文書になっていますが、各ルールについて次のような項目が並んでいます。

• 十分な達成方法：ルールに十分適合できる方法
• 参考達成方法：ルールに適合したうえで、さらにアクセシブルにするための方法
• 失敗例：ワーキンググループが考えるあるある失敗例

例（原文より）：

• 2. Operable
  • Guideline 2.5 Input Modalities
    • Success Criterion 2.5.3 Label in Name
      • Understanding Success Criterion 2.5.3: Label in Name
        • Sufficient Techniques
          • G208: Including the text of the visible label as part of the accessible name
          • G211: Matching the accessible name to the visible label
        • Advisory Techniques
          • G162: Positioning labels to maximize predictability of relationships
          • If an icon has no accompanying text, consider using its hover text as its accessible name (Potential future technique)
        • Failures
          • F96: Failure due to the accessible name not containing the visible label text
          • Accessible name contains the visible label text, but the words of the visible label are not in the same order as they are in the visible label text (Potential future technique)
          • Accessible name contains the visible label text, but one or more other words are interspersed in the label (Potential future technique)

例（WAIC版日本語訳より）：

• 2. 操作可能
  • ガイドライン 2.5 入力モダリティ
    • 達成基準 2.5.3 名前 (name) のラベル
      • 達成基準 2.5.3: 名前 (name) のラベルを理解する
        • 十分な達成方法
          • G208: アクセシブルな名前 (accessible name) の一部として可視ラベルのテキストを含める
          • G211: アクセシブルな名前 (accessible name) を視覚的なラベルと一致させる
        • 参考達成方法
          • G162: 関係性を最大限に予測できるようにするためにラベルを配置する
          • アイコンに付随するテキストがない場合、アクセシブルな名前 (accessible name) としてそのホバーテキストを用いることを検討する。
        • 失敗例
          • F96: 達成基準 2.5.3 の失敗例 - "アクセシブルな名前 (accessible name)" が可視ラベルのテキストを含んでいない。
          • アクセシブルな名前 (accessible name) が可視ラベルのテキストを含んでいるが、語順が可視ラベルのテキストと同一でない。
          • アクセシブルな名前 (accessible name) が可視ラベルのテキストを含んでいるが、一つ以上の語がラベルの中に挿入されている。

0.3 WCAG 2.1 には関連文書がある⁶

関連文書と呼ばれるものはさまざま重要な役割を果たします。
たとえば、W3C勧告済みの WCAG が後から登場した新しい技術に対して、どのように適用されるのかを説明していくためにも使われています。

参照：💡 WCAG 2.1 はいろんな技術に応用できる！

0.4 WCAG 2.1 の要件⁷

WCAG 2.1 は WCAG 2.0 の継承した Requirements for Web Content Accessibility Guidelines 2.1を満たしています。
この要件は、ガイドラインの全体的なフレームワークを構成して、後方互換性を確保しています。

新しく増やすルールなどを WCAG 2.0 に沿ったつくりにするために、あまり形式的ではない独自の基準での採用方法をとりましたが、これは WCAG 2.1 に含めることができるものを制限する結果になりました。
しかし、その採用方法は WCAG 2 のドットリリース（小数点バージョン）の性質を守る上では重要なことでした。

0.5 WCAG 2.0 との違いは？⁸

WCAG 2.1 は3種類のユーザグループにとって、より使いやすくするためにガイドラインの改善を行うことを目的に始まりました。

• 認知障害または学習障害
• ロービジョンのユーザ
• モバイルデバイス上での障害

WCAG 2.1 は WCAG 2.0 をベースに拡張されたガイドラインなので、WCAG 2.0 に適合したWebコンテンツならそのまま WCAG 2.1 に適合できるように修正していくことができます。
WCAG 2.0 および WCAG 2.1 の両方のガイドラインを見ている方は、次のような違いに注意してください。

0.5.1 WCAG 2.1 で追加された新しいルールたち⁹

WCAG 2.1 では次のルールが追加されています。これらのほとんどで新しい用語使われていますが、新しい用語も用語集に追加されています。

• 1.3.4 表示の向き - Orientation (AA)
• 1.3.5 入力目的の特定 - Identify Input Purpose (AA)
• 1.3.6 目的の特定 - Identify Purpose (AAA)
• 1.4.10 リフロー - Reflow (AA)
• 1.4.11 非テキストのコントラスト - Non-Text Contrast (AA)
• 1.4.12 テキストの間隔 - Text Spacing (AA)
• 1.4.13 ホバー又はフォーカスで表示されるコンテンツ - Content on Hover or Focus (AA)
• 2.1.4 文字キーのショートカット - Character Key Shortcuts (A)
• 2.2.6 タイムアウト - Timeouts (AAA)
• 2.3.3 インタラクションによるアニメーション - Animation from Interactions (AAA)
• 2.5.1 ポインタのジェスチャ - Pointer Gestures (A)
• 2.5.2 ポインタのキャンセル - Pointer Cancellation (A)
• 2.5.3 名前 (name) のラベル - Label in Name (A)
• 2.5.4 動きによる起動 - Motion Actuation (A)
• 2.5.5 ターゲットのサイズ - Target Size (AAA)
• 2.5.6 入力メカニズム非依存 - Concurrent Input Mechanisms (AAA)
• 4.1.3 ステータスメッセージ - Status Messages (AA)

できるだけ WCAG 2.1 を採用しよう
公的な義務としてWCAG 2.0 に準拠するように求めらていたとしても、アクセシビリティを向上させるために WCAG 2.1 を採用するようにワーキンググループは求めています。

0.5.2 WCAG 2.0 までに用意されていたルールのナンバリングはそのまま！¹⁰

• WCAG 2.0 までは、各ルールが適合レベル順にまとまっていた
• 新しいルールを適合レベル順に追加してしまうと、WCAG 2.0 時点とナンバリングにズレが生じてしまう
• WCAG 2.1 で増えた新しいルールはすべて各ガイドラインの最後に追加された

例

2.1 キーボード操作可能
  2.1.1 キーボード（A）
  2.1.2 キーボードトラップなし（A）
  2.1.3 キーボード (例外なし)（AAA）
+ 2.1.4 文字キーのショートカット（A）

💡 適合レベルごとにルールを一覧で見たい！
How to Meet WCAG 2.1（クイックリファレンス）のFilter機能を使えば、適合レベルごとにルールを確認できます。

0.5.3 WCAG 2.1 に安心して適合できる！¹¹

• WCAG 2.1 に適合するWebサイトは、WCAG 2.0 にも適応する
• WCAG 2.0 を参照する独自のアクセシビリティポリシーを持ったWebサイトでも安心して WCAG 2.1 に移行できる
• 安心して現代的なユーザーのニーズにより多く応えることができる

0.6 さらなるアクセシビリティガイドラインの後続版の登場について¹²

ワーキンググループは WCAG 2.1 と並行して別の主要バージョン（WCAG 3）を作っています。
これにより、WCAG 2 のドットリリース（小数点バージョン）では現実的ではないような内容を持った、より実質的なWebアクセシビリティガイドラインを作ることができると期待されています。

新しい主要バージョンの作成作業は、研究に重点を置いたユーザ中心設計が採用されています。
この方法ではガイドラインの策定に何年もかかるため、WCAG 2.0 のW3C勧告以降に現れた新しい環境や状況に対応ために暫定措置が必要でした。そうして生まれたのが WCAG 2.1 です。

また、ワーキンググループは新しい主要バージョンが完成するまでの間に WCAG 2.2 に続く新しい暫定バージョンを公開していく可能性があります。

🥒 1. Perceivable - 知覚可能

WIP

1. 原文：Abstract ↩

2. 原文：Status of This Document ↩

3. 原文：Introduction ↩

4. 原文：0.1 Background on WCAG 2 ↩

5. 原文：0.2 WCAG 2 Layers of Guidance ↩

6. 原文：0.3 WCAG 2.1 Supporting Documents ↩

7. 原文：0.4 Requirements for WCAG 2.1 ↩

8. 原文：0.5 Comparison with WCAG 2.0 ↩

9. 原文：0.5.1 New Features in WCAG 2.1 ↩

10. 原文：0.5.2 Numbering in WCAG 2.1 ↩

11. 原文：0.5.3 Conformance to WCAG 2.1 ↩

12. 原文：0.6 Later Versions of Accessibility Guidelines ↩