1. ウェブディレクターのための
Web A11Y 勉強会
#06 (2017-11-14)

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

3. 前回までのあらすじ
• ウェブアクセシビリティとは？
• ウェブアクセシビリティはなぜ必要なの？
• 支援技術を知ろう
• アクセシビリティ検証ツールいろいろ
• スクリーンリーダーを体験しよう!
• WCAG 2.0 の概略
• WCAG 2.0 (Level A) を読もう！
• 様々なコンテンツ (画像、
音声、動画…) に対する
情報保障
• 多様な UA への適応

4. • WCAG 2.0 (Level A) を読もう！
• 1.4.1 色の使用
• 1.4.2 音声の制御
• 2.1.1 キーボード
• 2.1.2 キーボードトラップなし
• ケーススタディ、お悩み相談
今日のメニュー
(知覚)
• 色を使うことの注意点
• 音声再生のコントロール
(操作)
• マウスが使えない人のキーボード操作
… について学びます。

5. WCAG 2.0 (Level A) を読もう！
(達成基準、解説書、達成方法集)

6. WCAG 2.0 の基本構成
おさらい
原則 (4)
ガイドライン (12)
達成基準 (61)
このうちレベル「A」のみが
本勉強会の対象です。
1. 知覚可能 (Perceivable)
2. 操作可能 (Operable)
3. 理解可能 (Understandable)
4. 堅牢 (Robust)

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

8. ガイドライン 1.4 判別可能
コンテンツを、利用者にとって見やすく、聞きやすいものにする
こと。これには、前景と背景を区別することも含む。

9. 達成基準 1.4.1
色の使用
色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別す
るための唯一の視覚的手段になっていない。 (レベル A)
達成基準 1.4.1 を理解する | WCAG 2.0解説書
http://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html

10. [用語] 達成基準 1.4.1 色の使用
(特にありません)

11. [まとめ] 達成基準 1.4.1 色の使用
色はデザイン上とても重要です。(感覚的な訴求力に優れ、ユーザビリティを高めることが
でき、また認知/学習などの障害を持つユーザーにとっても情報識別や理解の助けにな
る。) ただし、利用者の色覚特性や多様なウェブ閲覧環境に配慮し、色「だけ」で情報を
伝えないようにしましょう。
✓ テキスト (ラベル) を添える。(フォームの入力必須項目のラベルなど)
✓ 色以外の視覚的表現も併用する。(リンクの表現、図の「塗り」、など)

12. お名前 [必須]
電話番号
メールアドレス [必須]
送信

13. あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそ
ら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロ
ザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博
士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物の
なかで考えていると、みんなむかし風のなつかしい青い幻燈のように思
われます。では、わたくしはいつかの小さなみだしをつけながら、しず
かにあの年のイーハトーヴォの五月から十月までを書きつけましょう。
ポラーノの広場（宮沢賢治）

15. 達成基準 1.4.2
音声の制御
ウェブページ上にある音声が自動的に再生され、3秒より長く続く場合、そ
の音声を一時停止又は停止するメカニズム、もしくはシステム全体の音量
レベルに影響を与えずに音量レベルを調整できるメカニズムが利用でき
る。 (レベル A)
達成基準 1.4.2 を理解する | WCAG 2.0解説書
http://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-dis-audio.html

16. [用語] 達成基準 1.4.2 音声の制御
メカニズム
ウェブコンテンツの UI (ユーザーインターフェース) に用意された、利用者が制御できる
仕組み。

17. [まとめ] 達成基準 1.4.2 音声の制御
ウェブコンテンツの利用時に、音声が流れていてそれを停めることができないと、視
覚障害者 (スクリーンリーダーを併用してコンテンツを音声読み上げさせている利用
者) にとって、また一部の認知/学習の障害を持つ利用者にとって、情報取得の妨げに
なります。
✓ 音声が3秒以内に消えるコンテンツ/インタラクションにしましょう。
✓ ユーザーの任意で、コンテンツ上の音声停止 (または音量調整) をコントロールできるよう
な UI を設置しましょう。

18. ご参考：「原則 1. 知覚可能」のガイドライン「1.4 判別可能」には、これ以外にも、達成基準レベル
AA ではありますが、基本的なアクセシビリティ改善につながる (設計の上流段階できちんと検討してお
きたい) 事項があります。
配色/コントラスト (達成基準 1.4.3)
文字色と背景色の間では、4.5:1 以上のコントラスト比を確保しましょう。ロービ
ジョンの利用者への配慮、屋外でのウェブ利用といった状況での可読性向上につなが
ります。
テキストのサイズ変更 (達成基準 1.4.4)
ユーザーの任意でコンテンツをズームできるようにしましょう。最近よく見る例とし
て、モバイル向けのコンテンツで、user-scalable=“no” を設定したりしていませんか？
文字画像 (1.4.5)
文字情報はなるべく、画像による文字ではなくテキストを採用しましょう。ユーザー
による拡大表示や配色変更への対応のほか、機械翻訳ができるという利点もあります。

19. 原則 2. 操作可能 (Operable)
ユーザインタフェース コンポーネント及びナビゲーションは操作
可能でなければならない。

20. ガイドライン 2.1 キーボード操作可能
すべての機能をキーボードから利用できるようにすること。

21. 達成基準 2.1.1
キーボード
コンテンツのすべての機能は、個々のキーストロークに特定のタイミ
ングを要することなく、キーボードインタフェースを通じて操作可能
である。ただし、その根本的な機能が利用者の動作による始点から終
点まで続く一連の軌跡に依存して実現されている場合は除く。 (レベ
ル A)
達成基準 2.1.1 を理解する | WCAG 2.0解説書
http://waic.jp/docs/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html

22. [用語] 達成基準 2.1.1 キーボード
個々のキーストロークに特定のタイミングを要する
キーボードのキーを押す操作について、ある決まったタイミングでの押下が条件となっ
ていたり、ある限られた時間内に所定の回数キーを押す必要があったりすること。
始点から終点まで続く一連の軌跡
ドラッグ操作など。

23. [まとめ] 達成基準 2.1.1 キーボード
画面を見ることができない全盲の人、マウスポインターを見つけるのが難しいロービジョ
ンの人、手指の障害や怪我などでマウスを使えない人、など、ウェブ利用を (マウスの代
わりに ) キーボード操作に依存する人たちがいます。あらゆるウェブコンテンツ/インタラ
クションは、ユーザーの任意のペースで、キーボード操作できるようにしましょう。
✓ ハンバーガーメニュー、アコーディオン、タブ、モーダルダイアログ、といったインタラクティ
ブな UI は特に、キーボード操作への配慮がおろそかになりやすいので、注意が必要です。
✓ 最近は、「スクロールハイジャック」でDOMツリーを小出し更新するページをよく見かけます
が (例)、これもキーボード操作に依存した利用者を排除してしまうので避けるべきです。
フォーカスの順序を不自然にしないこと (達成基準 2.4.3) やフォーカスの視覚的に明示す
ること (達成基準 2.4.7) も、併せて配慮しましょう。

24. 達成基準 2.1.2
キーボードトラップなし
キーボードインタフェースを用いてキーボードフォーカスをそのウェブページ
のあるコンポーネントに移動できる場合、キーボードインタフェースだけを用
いてそのコンポーネントからフォーカスを外すことが可能である。さらに、修
飾キーを伴わない矢印キー、 Tab キー、又はフォーカスを外すその他の標準
的な方法でフォーカスを外せない場合は、フォーカスを外す方法が利用者に通
知される。 (レベル A)
達成基準 2.1.2 を理解する | WCAG 2.0解説書
http://waic.jp/docs/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html

25. [用語] 達成基準 2.1.2 キーボードトラップなし
キーボードインターフェース
つまりキーボードのこと。
キーボードフォーカス
キーボード操作によるフォーカスのこと。

26. [まとめ] 達成基準 2.1.2 キーボードトラップなし
キーボード操作 ([Tab] キーによるフォーカス移動) においては、ユーザーの予想 (期待) に
反してフォーカスが「罠にはまって脱出できない」ことのないようにしましょう。
✓ サードパーティ製 UI の埋め込み (マップ、SNSタイムライン、など)
✓ 無限スクロール
✓ スクロールハイジャックによる DOM ツリーの小出し更新
オーバーレイするコンテンツ (モーダルダイアログなど) が開いているときに、キーボード
フォーカスが (視覚的に隠れている) 背景側コンテンツに移ってしまうケースも、よく見ら
れるので注意しましょう。

27. ケーススタディ、お悩み相談

28. Anyone?

29. 次回予告

30. • WCAG 2.0 (Level A) を読もう！
• 2.2.1 タイミング調整可能
• 2.2.2 一時停止、停止、非表示
• 2.3.1 3回の閃光、又は閾値以下
• ケーススタディ、お悩み相談
ユーザーに十分な時間を提供
することや、(光過敏性) 発作
の防止について学びます。

31. To be continued…