Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

171111 nishimoto-nvdajp-v2

2.098 visualizaciones

Publicado el

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

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

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

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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

×