2019/01/15（火）に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/01/15」でのスライドです。【簡単マニュアルのPDF版は以下】 ・PC：http://bit.ly/readable_SR4 ・スマホ：http://bit.ly/readable_SR2

1. スクリーンリーダーをいろいろ触ってみよう

2. 自己紹介
2

3. 3
澤田 望
パーマ
メガネ
（老眼）
ガリガリ
中年講師

4. 4
岡山で独立（2014～） Webアクセシビリティ検証／
イラスト制作／
岡山情報ビジネス学院 非常勤講師
などなど
キヤノン （～2013） サイトデザイン監修／
Webアクセシビリティ対応
WAIC （2011～） （ウェブアクセシビリティ基盤委員会）
コラムを担当

5. 本日の目標
5

6. • スクリーンリーダーとは？
• 耳で聞いて理解するためには何が必要なのか？
• サイトをスクリーンリーダーで確認出来るようになる。
6

7. スクリーンリーダーとは？
7

8. https://www.mitsue.co.jp/case/design/a_007.html より
8

9. 9
見えていない人

10. まずは、似てるのを見てみよう。
10

11. コンテンツ読み上げ機能
11
スクリーンリーダー
≠

12. 12http://www.pref.okayama.jp/ より

13. 13
リンクできるページとできないページがある

14. 他のサイトに移ったら使えない？
14

15. 読み上げ機能が必要な利用者は、
このサイトまでどうやって来たの？
15

16. もしかして...この機能
16

17. 17http://www.pref.okayama.jp/ より
使われてないかも？

18. コンテンツ読み上げ機能は、
18

19. いらない！
19
※個人の感想です。

20. 20
※デスクトップやアプリや電子書籍も
（ちゃんと読めるかどうかは別問題）
コンテンツ
読み上げ機能
音声ブラウザー スクリーンリーダー
読み上げ対象
サイト
登録サイトのみ すべてのサイト すべてのサイト
読み上げ対象
テキスト
ブラウザーのみ ブラウザーのみ
画面上すべての
テキスト※
スクリーンリーダーと似たものの違い

21. 利用者のリテラシー
支援技術
CSS
コンテンツ
JavaScript
HTML
UA
OS
ハードウェア
21
Webアクセシビリティのレイヤー
スクリーンリーダー
コンテンツ読み上げ機能
音声ブラウザー

22. いろいろなスクリーンリーダー
22

23. 標準／無料
23https://www.apple.com/jp/accessibility/mac/vision/ より

24. 24http://www.aok-net.com/screenreader/ より
41,040円（税込）

25. 153,360円（税込）
25http://www.extra.co.jp/jaws/ より

26. 26https://support.microsoft.com/ja-jp/help/17173/windows-10-hear-text-read-aloud より
標準／無料

27. 無料
27https://www.nvda.jp/ より

28. 無料
28https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback&hl=ja より

29. 違いを聞いてみよう。
29

30. スクリーンリーダーになってみよう
30

31. 31
bit.ly/readable_SR1
読むページ
スクリーンリーダー役
1. ビジュアルブラウザーを見て1行読み上げる
2. 聞き役が「次へ」と言ったら次の行を読み上げる
聞き役
1. 何も見ず、聞いた内容をホワイトボードに書く
2. 1行分書き終わったら「次へ」で進む

32. このページのタイトルは？
32
Q

33. 湯だめはどの分類？
33
Q

34. 生姜が乗っているのはどちらの写真？
34
Q

35. ランドマーク「footer」には何がある？
35
Q

36. 1. どんな情報を聞けば、ページの情報を信頼して受け取れるのか？
2. どんな情報を聞けば、ページを俯瞰（全体の構成をざっと把握）する
ことができるのか？（そもそも無理なのか？）
3. 見る情報と聞く情報とで、情報量に差はないか？
36
気にしておきたいポイント

37. 正解はスクリーンリーダーで聞いてみよう。
37

38. PCのスクリーンリーダーを触ってみよう
38

39. 39
連続読み上げ ／ 一時停止 ／ 停止
VO + A ／ control
（VO カーソルが読み上げ対象全体を囲っている状態で）
NVDA + A ／ Shift ／ Ctrl
（再度読み上げたい場合は再読み込み ／ テンキー + ）
起動 ／ 終了
修飾（制御）キーの割り当て
基本的な使い方
VoiceOver（Mac + Safari） 操 作 NVDA（Windows ラップトップ + Firefox）
PC のスクリーンリーダーを触ってみよう
システム環境設定 > アクセシビリティ > VoiceOver
VO カーソル を移動し、操作対象を読み上げ
前 ／ 次の操作対象に移動VO + ← ／ → ↑ ／ ↓ （行） Ctrl + ← ／ → （英単語 ／ 日本語は文字）
NVDA + F7要素リストローター：VO + U
VO キー： control + option ／ caps lock
⌘ + F5 起動 ／ 終了ショートカット
NVDA アプリケーションを起動 ／ 終了
ナビゲーターオブジェクト を移動し、操作対象を読み上げ（基本的に自動）
クリック ／ ボタン押下VO + スペース スペース
ランドマーク間の移動ローターでランドマークを選択 D （Shift で逆方向）
見出し間の移動VO + ⌘ + H （shift で逆方向） H （Shift で逆方向）
NVDA キー： Ins ／ Esc ／ 無変換 ／ 変換 ／ Caps Lock （英語キーボード）
Ctrl + Alt + N ／ NVDA + Q
階層を上 ／ 下に移動VO + shift + ↑ ／ ↓ NVDA + Shift + ↑ ／ ↓

40. 40
bit.ly/readable_SR1
読むページ
1.このページのタイトルは？
2.湯だめはどの分類？
3.生姜が乗っているのはどちらの写真？
4.ランドマーク「footer」には何がある？
Q

41. 41
VoiceOver（Mac版）のツボ
1.VoiceOverカーソルを表示
（どこを読んでいるか視認できる）
2.キャプションパネルを表示
（どう読んでいるか視認できる）
3.アプリケーションとドキュメント内要素の親子関係を意識
4.無理をしない
（確認したいページを開くまでではVoiceOverを起動しない）

42. 42
「操作対象」は親子構造
• ツールバー
• 閉じるボタン／他
• 戻る／進むボタン
• アドレス入力欄
• タブバー
• 閉じるボタン
• タブ
• コンテンツ表示エリア
• ナビゲーション
• ボタン
• ボタン
• 表
• リスト

43. 43
NVDAのツボ
1. フォーカスインジケーターを表示（FocusHighlightアドオン）
（どこを読んでいるか視認できる）
2. スピーチビューアーを表示（設定）
（どう読んでいるか視認できる）
3. Macの仮想環境やBoot Campで使用する場合は
キーアサインを変更する必要あり（NVDAキー用）
4. 無理をしない
（確認したいページを開くまでではNVDAを起動しない）

44. Googleで検索してみよう！
44

45. 45

46. VoiceOverをもっと練習したい人には、
練習用のプログラムがあります。
46

47. 47

48. 48

49. NVDAをもっと練習したい人には、
マニュアルがたくさんあります。
49

50. 50https://www.nvda.jp/ より

51. 51https://weba11y.jp/know-how/global/using-nvda-to-evaluate-web-accessibility/ より

52. スマホのスクリーンリーダーを触ってみよう
52

53. 53
起動 ／ 終了
ショートカット設定
基本的な使い方
スクロール
10 キーでのキーボード入力
フリック入力
VoiceOver（iOS） 操 作
※ スクリーンリーダーを起動すると、普段のジェスチャーは使えなくなるので注意
Android Accessibility Suite（TalkBack）
モードの切り替え
（1 本指フリック ↓ 時）
スマホのスクリーンリーダーを触ってみよう
設定 > 一般 > アクセシビリティ > VoiceOver
タップで選んで、ダブルタップで実行
3 本指スワイプ ↑↑↑ ／ ↓↓↓
画面から指を離す際に入力実行
次候補で変換候補を選び、確定をダブルタップ
ローター：2 本指でツマミを回す感じ
⤵
テンキーの長押し
設定 > 一般 > アクセシビリティ > ショートカット
ホーム ボタン × 3 回
3 本指トリプルタップ（ON ／ OFF）
起動 ／ 終了ショートカット
画面を暗くする
設定 > ユーザー補助 > 見る > TalkBack
フリック入力不可
タップで選んで、ダブルタップで実行
前 ／ 次の操作対象に移動1 本指フリック ← ／ → 1 本指フリック ← ／ →
画面から指を離す際に入力実行（同じ行の連続かな入力はカーソル移動要）
変換候補の確定はシングルタップ
2 本指スワイプ ↑↑ ／ ↓↓
ローカル コンテキスト メニュー（1 本指スワイプ ↑ + →）から選択
連続読み上げ ／ 停止2 本指スワイプ（先頭から：↓↓ ／ 現項目から：↑↑）／ タップ
グローバル コンテキスト メニュー（1 本指スワイプ ↓ + →）から選択 ／ タップ
シェイク（設定 > ユーザー補助 > 見る > TalkBack > 設定 > シェイクして連続読み上げを開始）
グローバル コンテキスト メニュー（1 本指スワイプ ↓ + →）から選択
音量 ＋ ー ボタン：同時× 3 回
1. 設定 > ユーザー補助 > 見る > TalkBack > TalkBack のクイックアクセス
2. 設定 > ユーザー補助 > ユーザー補助機能のショートカット
（Ver.8）音量 ＋ ー ボタン：同時に 3 秒間長押し
（Ver.7） 電源 ボタン長押し > 電源確認ダイアログ > 画面を 2 本指長押し

54. 好きなページを聞いてみよう！
54

55. まとめ
55

56. • 聞いても理解出来る構造にしよう
• 無理をしない
• 表示／動作チェック時の環境の一つ
として追加しよう
56
まとめ

57. 次回は3月4日（月）の予定です！
57

58. 58https://waic.jp/news/20181226/ より

59. 59
@SawadaStdDesign
また来週！