1. アクセシビリティ
検証ツールとしてのNVDA入門
西本 卓也 nishimotz / 24motz
1

2. NVDA
• NonVisual Desktop Access
• オープンソース
• Windows 対応スクリーンリーダー
• 3か月ごとにリリース
• 本家
• オーストラリアの非営利法人 NV Access
• コミュニティ（GitHub）
• 使っていますか？
• そもそも Windows 使ってますか？
2

3. NVDA日本語チーム
• www.nvda.jp
• NVDA日本語版
• 音声と点字
• アドオン
• ガイドブック
• 普及活動
• イベントの開催
• 現状：サブのスクリーンリーダーとして
• メインの環境でうまくいかないとき
3

4. Braille display
4

5. Windows 10 の普及
5

6. NVDA日本語版の更新状況
6

7. NVDA日本語版の各バージョン
2016.2jp
+
2016.2.1jp
2017.3jp
7

8. NVDAで検証する意義
• 開発者も利用者も無料（相手にお願いしやすい）
• やってみないとわからない
• サードパーティのライブラリやフレームワーク
• 動的なコンテンツ
• ブラウザの挙動が変わる
• スクリーンリーダーが「ブラウザ対応モード」で動作
• ブラウザが「スクリーンリーダー対応モード」で動作
• 他のスクリーンリーダーに対応させる準備になる
8

9. スクリーンリーダーとは？
コンテンツ アプリ OS
スクリーンリーダー
音声・点字
9

10. 現実は？
• 不具合や不備
コンテンツ アプリ OS
スクリーンリーダー
音声・点字
10

11. ユーザーは？
• 本来の操作性？
• 使いこなせない？
コンテンツ アプリ OS
スクリーンリーダー
音声・点字
11

12. 隠す → 変化に弱い
コンテンツ アプリ OS
音声・点字
スクリーンリーダー
12
スクレイピング／文字認識
画面拡大／UI拡張

13. 正しい役割分担
• アクセシビリティAPI
• Web標準
• 高品質・高性能
コンテンツ アプリ OS
スクリーンリーダー
音声・点字
13
画面拡大

14. NVDAの構造
• OSだけに深く依存
• プラグイン
コンテンツ アプリ OS
Python
音声・点字
DRV
AM
GP
14
C++

15. マルウェアとは？
• マシンリーダビリティ
• 可用性と安全性
• 暗号化
• DRM
コンテンツ アプリ OS
Malicious Software
15
👽

16. NVDAの思想
• 平等（対等）
• 無料
• 本来のWindowsやアプリの操作を活かす
• ユニバーサル
• 配布パッケージ
• 操作
• 正しい役割分担
• 過剰にコンテンツやアプリに介入しない
• 標準化（ナレーターや VoiceOver で使えるアプリ）
16

17. Webブラウザの操作
• 入力イベントの送信先？
• ブラウザ / OS
• NVDA自身が処理
• フォーカス
• Tab / Shift+Tab
• NVDA制御キー+Tab
17
コンテンツ ブラウザ OS
NVDA
A B C D

18. フォーカスモード
• キーイベントはブラウザへ
• コンテンツの操作
• ブラウザ自身の操作も
• 上下矢印でスクロール
18
コンテンツ ブラウザ OS
NVDA
A B C D

19. ブラウズモード
• キーイベントはNVDAへ
• NVDAがブラウザを制御する
• 読み取り場所
• レビューカーソル
• ナビゲーターオブジェクト
19
コンテンツ ブラウザ OS
NVDA
A B C D

20. ブラウズモードの機能
• 矢印キーが「読み取り場所の移動」
• テーブルでは行や列による移動も
• 必要に応じて自動的に
• フォーカスモードと同じ操作が可能
• Tab / スペース / Enter など
• フォーカスモードに切り替わる
• エディットフィールド、コンボボックス
• 1文字ナビゲーション（見出しジャンプなど）
• 要素リスト、ページ内検索
20

21. 1文字ナビゲーションの例
• D: ランドマーク（Shift+Dで逆方向、以下同じ）
• H: 見出し
• I: リスト項目
• E: エディットフィールド
• B: ボタン
• C: コンボボックス
• X: チェックボックス
• G: 画像
21

22. 要素リスト
• NVDA+F7
• Webブラウザの場合
• リンク
• 見出し
• フォームフィールド
• ボタン
• ランドマーク
• 階層構造
22

23. FocusHighlightアドオン
• フォーカス：赤の太い実線
• フォーカスモード：青の太い点線
• フォーカスとナビゲーターオブジェクトが別の場所
• フォーカス：赤の細い実線
• ナビゲーターオブジェクト：緑の細い一点鎖線
23

24. クレジットカード決済サイトの試作
• ターゲット
• Windows 10 + NVDA
• IE11 / Chrome / Firefox
• Googleアカウント認証
• 決済サービス
• テストモード
• クレジットカード情報のトークン化（ブラウザ）
• トークンによる決済の実行（サーバー）
24

25. 検証したこと
• 決済サービス提供のJSライブラリ
• モーダルダイアログ（タブあり）
• 決済サーバとの通信だけを行う
• アカウント認証
• Bootstrap 4 + jQuery 3 + WAI-ARIA
• role : main, contentinfo, status
• 属性 : live, for, descrivedby, invalid, disabled, readonly, hidden
• CSS : display:none
• iOS + VoiceOver + Safari でも動作確認
25

26. ユニバーサルな操作性
• ブラウズモードが使えるアプリの例
• Internet Explorer
• Edge
• Firefox
• Chrome
• Acrobat Reader
• Kindle for PC
• Word, Excel, Outlook
• アプリを超えて同じ概念と作法
26

27. 検証ツールとしてのおすすめ設定
• 使用しない
• ログオン画面でNVDAを使用
• マウスカーソル位置のテキストの報告
• 書式情報 : 不要なものをチェックなしに
• NVDA制御キー
• Insert : あれば使う
• Esc / 無変換 / 変換 : 日本語版のみ
• CapsLock : 日本語キーボードで動作しない
• 本来の操作＝すばやく2回押す
• NVDA起動時にスピーチビューアーを表示
27

28. www.nvda.jp
28

29. Windows 環境ありますか？
• 仮想マシンしかない
• ホスト環境は MacBook 系？
• Insert キー？ NVDA 日本語版なら Esc キーで代用可
• ファンクションキーを使います
• ない
• 仮想 Windows マシンを作りましょう
• 90日評価版がある
29

30. 開発者のための NVDA (2017)
30

31. NVDA日本語版 Developer Edition
31

32. 右クリック(Shift+F10)「すべて展開」
32

33. 展開先の選択 → 「参照」
33

34. クイックアクセス「ドキュメント」選択
34

35. 展開 → コピー中 → 終了
35

36. nvdajp フォルダを開く
36

37. nvda.exe ファイルを探す
37

38. nvda.exe でコンテクストメニュー
38

39. 送る → デスクトップ
39

40. nvda.exe - ショートカット
40

41. ようこそ画面
41

42. Esc + Q「NVDAの終了」ダイアログ
• OK をクリックすると終了
42

43. 起動を簡単に
• ショートカットのプロパティ
• Ctrl + Alt + N で起動させる
43

44. Windows 10 評価版を使う
• modern.ie
• 現在は Microsoft Edge Dev
• 手順例
• Oracle VM VirtualBox
• ホスト環境は日本語キーボード
44

45. Microsoft Edge Dev
45

46. Download virtual machines
46

47. 仮想マシンをインポート
47

48. Audio : Intel HD Audio
48

49. タイムゾーン設定と言語の追加
49

50. 日本語をデフォルトにできる
50

51. Japanese 106/109 key を選べる
51

52. 日本語 Windows 10 環境できあがり
52