171111 nishimoto-nvdajp-v2

アクセシビリティ検証ツールとしてのNVDA入門

西本卓也 nishimotz / 24motz

1

NVDA

• NonVisual Desktop Access• オープンソース

• Windows 対応スクリーンリーダー

• 3か月ごとにリリース

• 本家• オーストラリアの非営利法人 NV Access

• コミュニティ（GitHub）

• 使っていますか？

• そもそも Windows 使ってますか？

2

NVDA日本語チーム

• www.nvda.jp

• NVDA日本語版• 音声と点字

• アドオン

• ガイドブック

• 普及活動• イベントの開催

• 現状：サブのスクリーンリーダーとして• メインの環境でうまくいかないとき

3

Braille display

4

Windows 10 の普及

5

NVDA日本語版の更新状況

6

NVDA日本語版の各バージョン

2016.2jp+

2016.2.1jp

2017.3jp

7

NVDAで検証する意義

• 開発者も利用者も無料（相手にお願いしやすい）

• やってみないとわからない• サードパーティのライブラリやフレームワーク

• 動的なコンテンツ

• ブラウザの挙動が変わる• スクリーンリーダーが「ブラウザ対応モード」で動作

• ブラウザが「スクリーンリーダー対応モード」で動作

• 他のスクリーンリーダーに対応させる準備になる

8

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

コンテンツアプリ OS

スクリーンリーダー

音声・点字

9

現実は？

• 不具合や不備



音声・点字

10

ユーザーは？

• 本来の操作性？

• 使いこなせない？



音声・点字

11

隠す → 変化に弱い


音声・点字


12

スクレイピング／文字認識

画面拡大／UI拡張

正しい役割分担

• アクセシビリティAPI

• Web標準

• 高品質・高性能



音声・点字

13

画面拡大

NVDAの構造

• OSだけに深く依存

• プラグイン


Python

音声・点字

DRV

AM

GP

14

C++

マルウェアとは？

• マシンリーダビリティ

• 可用性と安全性• 暗号化

• DRM


Malicious Software

15

👽

NVDAの思想

• 平等（対等）• 無料

• 本来のWindowsやアプリの操作を活かす

• ユニバーサル• 配布パッケージ

• 操作

• 正しい役割分担• 過剰にコンテンツやアプリに介入しない

• 標準化（ナレーターや VoiceOver で使えるアプリ）

16

Webブラウザの操作

• 入力イベントの送信先？• ブラウザ / OS

• NVDA自身が処理

• フォーカス• Tab / Shift+Tab

• NVDA制御キー+Tab

17

コンテンツブラウザ OS

NVDA

A B C D

フォーカスモード

• キーイベントはブラウザへ• コンテンツの操作

• ブラウザ自身の操作も• 上下矢印でスクロール

18


NVDA

A B C D

ブラウズモード

• キーイベントはNVDAへ• NVDAがブラウザを制御する

• 読み取り場所• レビューカーソル

• ナビゲーターオブジェクト

19


NVDA

A B C D

ブラウズモードの機能

• 矢印キーが「読み取り場所の移動」• テーブルでは行や列による移動も

• 必要に応じて自動的に• フォーカスモードと同じ操作が可能

• Tab / スペース / Enter など

• フォーカスモードに切り替わる• エディットフィールド、コンボボックス

• 1文字ナビゲーション（見出しジャンプなど）

• 要素リスト、ページ内検索

20

1文字ナビゲーションの例

• D: ランドマーク（Shift+Dで逆方向、以下同じ）

• H: 見出し

• I: リスト項目

• E: エディットフィールド

• B: ボタン

• C: コンボボックス

• X: チェックボックス

• G: 画像

21

要素リスト

• NVDA+F7

• Webブラウザの場合• リンク

• 見出し

• フォームフィールド

• ボタン

• ランドマーク

• 階層構造

22

FocusHighlightアドオン

• フォーカス：赤の太い実線

• フォーカスモード：青の太い点線

• フォーカスとナビゲーターオブジェクトが別の場所

• フォーカス：赤の細い実線

• ナビゲーターオブジェクト：緑の細い一点鎖線

23

クレジットカード決済サイトの試作

• ターゲット• Windows 10 + NVDA

• IE11 / Chrome / Firefox

• Googleアカウント認証

• 決済サービス• テストモード

• クレジットカード情報のトークン化（ブラウザ）

• トークンによる決済の実行（サーバー）

24

検証したこと

• 決済サービス提供の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

ユニバーサルな操作性

• ブラウズモードが使えるアプリの例• Internet Explorer

• Edge

• Firefox

• Chrome

• Acrobat Reader

• Kindle for PC

• Word, Excel, Outlook

• アプリを超えて同じ概念と作法

26

検証ツールとしてのおすすめ設定

• 使用しない• ログオン画面でNVDAを使用

• マウスカーソル位置のテキストの報告

• 書式情報 : 不要なものをチェックなしに

• NVDA制御キー• Insert : あれば使う

• Esc / 無変換 / 変換 : 日本語版のみ

• CapsLock : 日本語キーボードで動作しない

• 本来の操作＝すばやく2回押す

• NVDA起動時にスピーチビューアーを表示

27

www.nvda.jp

28

Windows 環境ありますか？

• 仮想マシンしかない• ホスト環境は MacBook 系？

• Insert キー？ NVDA 日本語版なら Esc キーで代用可

• ファンクションキーを使います

• ない• 仮想 Windows マシンを作りましょう

• 90日評価版がある

29

開発者のための NVDA (2017)

30

NVDA日本語版 Developer Edition

31

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

32

展開先の選択 → 「参照」

33

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

34

展開 → コピー中 → 終了

35

nvdajp フォルダを開く

36

nvda.exe ファイルを探す

37

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

38

送る → デスクトップ

39

nvda.exe - ショートカット

40

ようこそ画面

41

Esc + Q「NVDAの終了」ダイアログ

• OK をクリックすると終了

42

起動を簡単に

• ショートカットのプロパティ• Ctrl + Alt + N で起動させる

43

Windows 10 評価版を使う

• modern.ie

• 現在は Microsoft Edge Dev

• 手順例• Oracle VM VirtualBox

• ホスト環境は日本語キーボード

44

Microsoft Edge Dev

45

Download virtual machines

46

仮想マシンをインポート

47

Audio : Intel HD Audio

48

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

49

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

50

Japanese 106/109 key を選べる

51

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

52

Technology

171111 nishimoto-nvdajp-v2