Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

171111 nishimoto-nvdajp-v2

1,649 views

Published on

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

西本卓也(NVDA日本語チーム)
https://www.nvda.jp/

Japan Accessibility Conference(JAC)Vol.1
https://japan-a11y-conf.com/
最終版

Published in: Technology
  • Be the first to comment

  • Be the first to like this

171111 nishimoto-nvdajp-v2

  1. 1. アクセシビリティ 検証ツールとしてのNVDA入門 西本 卓也 nishimotz / 24motz 1
  2. 2. NVDA • NonVisual Desktop Access • オープンソース • Windows 対応スクリーンリーダー • 3か月ごとにリリース • 本家 • オーストラリアの非営利法人 NV Access • コミュニティ(GitHub) • 使っていますか? • そもそも Windows 使ってますか? 2
  3. 3. NVDA日本語チーム • www.nvda.jp • NVDA日本語版 • 音声と点字 • アドオン • ガイドブック • 普及活動 • イベントの開催 • 現状:サブのスクリーンリーダーとして • メインの環境でうまくいかないとき 3
  4. 4. Braille display 4
  5. 5. Windows 10 の普及 5
  6. 6. NVDA日本語版の更新状況 6
  7. 7. NVDA日本語版の各バージョン 2016.2jp + 2016.2.1jp 2017.3jp 7
  8. 8. NVDAで検証する意義 • 開発者も利用者も無料(相手にお願いしやすい) • やってみないとわからない • サードパーティのライブラリやフレームワーク • 動的なコンテンツ • ブラウザの挙動が変わる • スクリーンリーダーが「ブラウザ対応モード」で動作 • ブラウザが「スクリーンリーダー対応モード」で動作 • 他のスクリーンリーダーに対応させる準備になる 8
  9. 9. スクリーンリーダーとは? コンテンツ アプリ OS スクリーンリーダー 音声・点字 9
  10. 10. 現実は? • 不具合や不備 コンテンツ アプリ OS スクリーンリーダー 音声・点字 10
  11. 11. ユーザーは? • 本来の操作性? • 使いこなせない? コンテンツ アプリ OS スクリーンリーダー 音声・点字 11
  12. 12. 隠す → 変化に弱い コンテンツ アプリ OS 音声・点字 スクリーンリーダー 12 スクレイピング/文字認識 画面拡大/UI拡張
  13. 13. 正しい役割分担 • アクセシビリティAPI • Web標準 • 高品質・高性能 コンテンツ アプリ OS スクリーンリーダー 音声・点字 13 画面拡大
  14. 14. NVDAの構造 • OSだけに深く依存 • プラグイン コンテンツ アプリ OS Python 音声・点字 DRV AM GP 14 C++
  15. 15. マルウェアとは? • マシンリーダビリティ • 可用性と安全性 • 暗号化 • DRM コンテンツ アプリ OS Malicious Software 15 👽
  16. 16. NVDAの思想 • 平等(対等) • 無料 • 本来のWindowsやアプリの操作を活かす • ユニバーサル • 配布パッケージ • 操作 • 正しい役割分担 • 過剰にコンテンツやアプリに介入しない • 標準化(ナレーターや VoiceOver で使えるアプリ) 16
  17. 17. Webブラウザの操作 • 入力イベントの送信先? • ブラウザ / OS • NVDA自身が処理 • フォーカス • Tab / Shift+Tab • NVDA制御キー+Tab 17 コンテンツ ブラウザ OS NVDA A B C D
  18. 18. フォーカスモード • キーイベントはブラウザへ • コンテンツの操作 • ブラウザ自身の操作も • 上下矢印でスクロール 18 コンテンツ ブラウザ OS NVDA A B C D
  19. 19. ブラウズモード • キーイベントはNVDAへ • NVDAがブラウザを制御する • 読み取り場所 • レビューカーソル • ナビゲーターオブジェクト 19 コンテンツ ブラウザ OS NVDA A B C D
  20. 20. ブラウズモードの機能 • 矢印キーが「読み取り場所の移動」 • テーブルでは行や列による移動も • 必要に応じて自動的に • フォーカスモードと同じ操作が可能 • Tab / スペース / Enter など • フォーカスモードに切り替わる • エディットフィールド、コンボボックス • 1文字ナビゲーション(見出しジャンプなど) • 要素リスト、ページ内検索 20
  21. 21. 1文字ナビゲーションの例 • D: ランドマーク(Shift+Dで逆方向、以下同じ) • H: 見出し • I: リスト項目 • E: エディットフィールド • B: ボタン • C: コンボボックス • X: チェックボックス • G: 画像 21
  22. 22. 要素リスト • NVDA+F7 • Webブラウザの場合 • リンク • 見出し • フォームフィールド • ボタン • ランドマーク • 階層構造 22
  23. 23. FocusHighlightアドオン • フォーカス:赤の太い実線 • フォーカスモード:青の太い点線 • フォーカスとナビゲーターオブジェクトが別の場所 • フォーカス:赤の細い実線 • ナビゲーターオブジェクト:緑の細い一点鎖線 23
  24. 24. クレジットカード決済サイトの試作 • ターゲット • Windows 10 + NVDA • IE11 / Chrome / Firefox • Googleアカウント認証 • 決済サービス • テストモード • クレジットカード情報のトークン化(ブラウザ) • トークンによる決済の実行(サーバー) 24
  25. 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. 26. ユニバーサルな操作性 • ブラウズモードが使えるアプリの例 • Internet Explorer • Edge • Firefox • Chrome • Acrobat Reader • Kindle for PC • Word, Excel, Outlook • アプリを超えて同じ概念と作法 26
  27. 27. 検証ツールとしてのおすすめ設定 • 使用しない • ログオン画面でNVDAを使用 • マウスカーソル位置のテキストの報告 • 書式情報 : 不要なものをチェックなしに • NVDA制御キー • Insert : あれば使う • Esc / 無変換 / 変換 : 日本語版のみ • CapsLock : 日本語キーボードで動作しない • 本来の操作=すばやく2回押す • NVDA起動時にスピーチビューアーを表示 27
  28. 28. www.nvda.jp 28
  29. 29. Windows 環境ありますか? • 仮想マシンしかない • ホスト環境は MacBook 系? • Insert キー? NVDA 日本語版なら Esc キーで代用可 • ファンクションキーを使います • ない • 仮想 Windows マシンを作りましょう • 90日評価版がある 29
  30. 30. 開発者のための NVDA (2017) 30
  31. 31. NVDA日本語版 Developer Edition 31
  32. 32. 右クリック(Shift+F10)「すべて展開」 32
  33. 33. 展開先の選択 → 「参照」 33
  34. 34. クイックアクセス「ドキュメント」選択 34
  35. 35. 展開 → コピー中 → 終了 35
  36. 36. nvdajp フォルダを開く 36
  37. 37. nvda.exe ファイルを探す 37
  38. 38. nvda.exe でコンテクストメニュー 38
  39. 39. 送る → デスクトップ 39
  40. 40. nvda.exe - ショートカット 40
  41. 41. ようこそ画面 41
  42. 42. Esc + Q「NVDAの終了」ダイアログ • OK をクリックすると終了 42
  43. 43. 起動を簡単に • ショートカットのプロパティ • Ctrl + Alt + N で起動させる 43
  44. 44. Windows 10 評価版を使う • modern.ie • 現在は Microsoft Edge Dev • 手順例 • Oracle VM VirtualBox • ホスト環境は日本語キーボード 44
  45. 45. Microsoft Edge Dev 45
  46. 46. Download virtual machines 46
  47. 47. 仮想マシンをインポート 47
  48. 48. Audio : Intel HD Audio 48
  49. 49. タイムゾーン設定と言語の追加 49
  50. 50. 日本語をデフォルトにできる 50
  51. 51. Japanese 106/109 key を選べる 51
  52. 52. 日本語 Windows 10 環境できあがり 52

×