ウェブ制作会社のディレクターさんを対象にした、アクセシビリティ勉強会です。(全12回コースの第1回) 前半で WCAG 2.0 達成基準 (レベルAA) を学び、後半で「インクルーシブなペルソナ拡張」シートを用いた UI 評価ワークショップを行なっています。 インクルーシブなペルソナ拡張 : https://github.com/caztcha/Inclusive-Persona-Extension

1. ウェブディレクターのための
Web A11Y 勉強会
Season 2
#01 (2018-04-26)

2. 自己紹介
@caztcha
ウェブユーザビリティ / アクセシビリティ / 情報アーキテクチャ (IA)
HCD-Net 認定 人間中心設計専門家
ウェブアクセシビリティ基盤委員会 (WAIC) 翻訳ワーキンググループ
https://website-usability.info

3. この勉強会の目標
日々のウェブコンテンツ制作実務にお
いてアクセシビリティの担保を継続的
に回せること。そのための基礎作り。

4. サイトオーナー (発注者) が意識せずと
も自ずとアクセシビリティが担保されて
いる状態。
実現したいこと

5. アクセシビリティを理解し実践できる
ことをみなさんご自身の (ひいては、
デザインファームとしての)「強み」に。
みなさんにとってのメリット

6. 年間計画
4月
1. イントロダクション
2. WCAG 2.0 (Level AA) を読もう
• レベルAとAAの違い
• 1.2.4 キャプション (ライブ)
• 1.2.5 音声解説 (収録済)
3. UI ケーススタディ
5月
1. WCAG 2.0 (Level AA) を読もう
• 1.4.3 コントラスト (最低限)
• 1.4.4 テキストのサイズ変更
2. UI ケーススタディ
6月
1. WCAG 2.0 (Level AA) を読もう
• 1.4.5 文字画像
• 2.4.5 複数の手段
2. UI ケーススタディ
7月
1. WCAG 2.0 (Level AA) を読もう
• 2.4.6 見出し及びラベル
• 2.4.7 フォーカスの可視化
2. UI ケーススタディ
8月
1. WCAG 2.0 (Level AA) を読もう
• 3.1.2 一部分の言語
• 3.2.3 一貫したナビゲーション
• 3.2.4 一貫した識別性
2. UI ケーススタディ
9月
1. WCAG 2.0 (Level AA) を読もう
• 3.3.3 エラー修正の提案
• 3.3.4 エラー回避 (法的、金融、データ)
2. UI ケーススタディ

7. 年間計画
10月
1. WCAG 2.1 とは？
2. WCAG 2.1 追加達成基準 (Level A & AA) を読もう
• 1.3.4 Identify Common Purpose (AA)
• 1.4.10 Reflow (AA)
3. UI ケーススタディ
11月
1. WCAG 2.1 追加達成基準 (Level A & AA) を読もう
• 1.4.11 Non-text Contrast (AA)
• 1.4.12 Text Spacing (AA)
2. UI ケーススタディ
12月
1. WCAG 2.1 追加達成基準 (Level A & AA) を読もう
• 1.4.13 Content on Hover or Focus (AA)
• 2.4.11 Character Key Shortcuts (A)
2. UI ケーススタディ
1月
1. WCAG 2.1 追加達成基準 (Level A & AA) を読もう
• 2.4.12 Label in Name (A)
• 2.5.1 Pointer Gestures (A)
2. UI ケーススタディ
2月
1. WCAG 2.1 追加達成基準 (Level A & AA) を読もう
• 2.5.2 Pointer Cancellation (A)
• 2.6.1 Motion Actuation (A)
2. UI ケーススタディ
3月
1. WCAG 2.1 追加達成基準 (Level A & AA) を読もう
• 2.6.2 Orientation (AA)
• 3.2.6 Status Changes (AA)
2. UI ケーススタディ

8. WCAG 2.0 (Level AA) を読もう

9. レベル「AA」とは？

10. WCAG (Web Content Accessibility
Guidelines) の基本構成
原則 (4)
ガイドライン (12)
達成基準 (61)
1. 知覚可能 (Perceivable)
2. 操作可能 (Operable)
3. 理解可能 (Understandable)
4. 堅牢 (Robust)
3つのレベルに分かれている
• A (シングルエー)
• AA (ダブルエー)
• AAA (トリプルエー)

11. 達成基準レベル「A」と「AA」の違い
レベル A
支援技術を駆使してアクセスできるようになるレベル。
および「非干渉 (non-interference)」の担保。
レベル AA
達成できれば、支援技術なしでもアクセスできること
が多くなるレベル。

12. 非干渉 (non-interference)
WCAG 達成基準 (いずれもレベル A) のうち、以下の4つは「非干渉」に該当する、重要な達成基準です (ご参考 :
WCAG2.0 適合要件 ‒ 5.非干渉)。これらの達成基準を満たしていない場合、他の達成基準との間で「干渉」を引き起こし
てしまい、利用者がそのウェブページ全体を使用できなくなる恐れがあるため、特に注意が必要です。
1.4.2 音声の制御
✓ 音声が自動再生されて停止できないと、スクリーンリーダーの音声をかき消してしまい、視覚障害者は何もできな
くなります。
2.1.2 キーボードトラップなし
✓ キーボードフォーカスが「脱出不可能」に陥ると、キーボード操作に依存したユーザーは、他の部分にアクセスで
きなくなります。
2.2.2 一時停止、停止、非表示
✓ 画面の一部に動き続ける要素があると、認知や学習に障害のある (注意力の欠如を抱える) ユーザーなどは、動く要
素に気を取られて他の部分を読むことができなくなります。
2.3.1 3回の閃光、又は閾値以下
✓ 画面の一部が閃光を放つと、光過敏性発作を起こしたユーザーは他の箇所にアクセスできなくなります。
ご参考

13. …というわけで、実際に
レベル「AA」を読んでみましょう。

14. 原則 1. 知覚可能 (Perceivable)
情報及びユーザインタフェース コンポーネントは、利用者が知覚
できる方法で利用者に提示可能でなければならない。
おさらい

15. ガイドライン 1.2 時間依存メディア
時間依存メディアには代替コンテンツを提供すること。
「時間依存メディア」とは、
時間軸で変化するコンテン
ツのこと。動画や音声コン
テンツの総称。
おさらい

16. 達成基準 1.2.4
キャプション (ライブ)
同期したメディアに含まれているすべてのライブの音声コンテンツに対して
キャプションが提供されている。(レベル AA)
達成基準 1.2.4 を理解する | WCAG 2.0解説書
https://waic.jp/docs/UNDERSTANDING-WCAG20/media-equiv-real-time-captions.html

17. [用語] 達成基準 1.2.4 キャプション (ライブ)
同期したメディア
映像と音声が同期して一緒に再生される動画コンテンツのこと。
ライブ
収録済みではなく、リアルタイムで送信されること。
キャプション
動画の音声トラックに対応した字幕のこと。

18. [まとめ] 達成基準 1.2.4 キャプション (ライブ)
音声付きの動画コンテンツには、収録済のものだけでなく「ライブ」なものに対して
も、聴覚障害への配慮として、キャプション (字幕) を併せて提供しましょう。
✓オープンキャプション (常に表示される字幕) とクローズドキャプション (利用者の
任意で表示/非表示できる字幕) があります。

19. リアルタイムの字幕生成…
実際、法律などで WCAG 2.0 AA への適合が求められているケースでも、
この達成基準は例外とされることが多いです。
(近い将来、音声認識や画像解析といった AI によって、簡単に自動生成できそう！
収録済の動画であれば、YouTube が自動字幕付与機能を実現している。)
どう実現する？
誰かがライブで高速で
タイピング？

20. 達成基準 1.2.5
音声解説 (収録済)
同期したメディアに含まれているすべての収録済の映像コンテンツに対して、
音声解説が提供されている。(レベル AA)
達成基準 1.2.5 を理解する | WCAG 2.0解説書
https://waic.jp/docs/UNDERSTANDING-WCAG20/media-equiv-audio-desc-only.html

21. [用語] 達成基準 1.2.5 音声解説 (収録済)
同期したメディア
映像と音声が同期して一緒に再生される動画コンテンツのこと。
収録済
ライブではない、あらかじめ録画/録音されている状態のこと。
音声解説
主音声だけでは理解できない重要で視覚的な詳細を説明するために、
音声トラックに追加されたナレーション。

22. [まとめ] 達成基準 1.2.5 音声解説 (収録済)
音声付きの動画コンテンツには、視覚障害への配慮として、音声解説 (副音声でのナレー
ション) を併せて提供しましょう。

23. 音声解説トラックの制作…
実際、法律などで WCAG 2.0 AA への適合が求められているケースでも、
この達成基準は例外とされることが多いです。
(将来は、画像解析や音声認識といった AI によって、低コストで制作できるかも！)
各動画に副音声を
付けるの、コスト面
から厳しそう…

24. UI ケーススタディ

25. お配りした「ペルソナ拡張シート」を使って、みんなでウェブページの UI を評価してみましょう。

26. 1. 各自、それぞれ1枚、お好きな「ペルソナシート」を選びます。
2. 選んだシートの観点に立って、対象ページを使ってみましょう。
3. ひとことずつ、「気づき」を発表してください。
• 批判 (●●ができていないからアクセシビリティ的に不備) ではなく。
• こうすれば、こういう利用状況を持つユーザーの体験が向上するのでは？と
いう姿勢で。
• 具体的な改善方法がわからなくても「なんとなくここが気になる」でも OK
です。

27. 次回予告

28. • WCAG 2.0 (Level AA) を読もう
• 1.4.3 コントラスト (最低限)
• 1.4.4 テキストのサイズ変更
• UI ケーススタディ
ガイドライン 1.4「判別
可能」の中にある AA
達成基準を読みます。

29. To be continued…