171111 nishimoto-nvdajp-v2
•Download as PPTX, PDF•
1 like•3,888 views
アクセシビリティ検証ツールとしてのNVDA入門 西本卓也（NVDA日本語チーム） https://www.nvda.jp/ Japan Accessibility Conference（JAC）Vol.1 https://japan-a11y-conf.com/ 最終版
Recommended
More Related Content
Similar to 171111 nishimoto-nvdajp-v2
Similar to 171111 nishimoto-nvdajp-v2 (20)
More from Takuya Nishimoto
More from Takuya Nishimoto (20)
Recently uploaded
Recently uploaded (10)
171111 nishimoto-nvdajp-v2
- 1. アクセシビリティ 検証ツールとしてのNVDA入門 西本 卓也 nishimotz / 24motz 1
- 2. NVDA • NonVisual Desktop Access • オープンソース • Windows 対応スクリーンリーダー • 3か月ごとにリリース • 本家 • オーストラリアの非営利法人 NV Access • コミュニティ（GitHub） • 使っていますか？ • そもそも Windows 使ってますか？ 2
- 3. NVDA日本語チーム • www.nvda.jp • NVDA日本語版 • 音声と点字 • アドオン • ガイドブック • 普及活動 • イベントの開催 • 現状：サブのスクリーンリーダーとして • メインの環境でうまくいかないとき 3
- 8. NVDAで検証する意義 • 開発者も利用者も無料（相手にお願いしやすい） • やってみないとわからない • サードパーティのライブラリやフレームワーク • 動的なコンテンツ • ブラウザの挙動が変わる • スクリーンリーダーが「ブラウザ対応モード」で動作 • ブラウザが「スクリーンリーダー対応モード」で動作 • 他のスクリーンリーダーに対応させる準備になる 8
- 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
- 33. 展開先の選択 → 「参照」 33
- 35. 展開 → コピー中 → 終了 35
- 39. 送る → デスクトップ 39
- 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
- 47. 仮想マシンをインポート 47
- 48. Audio : Intel HD Audio 48
- 50. 日本語をデフォルトにできる 50
- 51. Japanese 106/109 key を選べる 51
- 52. 日本語 Windows 10 環境できあがり 52