2017年3月3日 Web + Windows ナレーター + NVDA 広島フロントエンド勉強会

1. スクリーンリーダーと
点字ディスプレイの話
Web + Windows ナレーター + NVDA
西本卓也 @24motz
2017-03-03 広島フロントエンド勉強会
1

2. Python Boot Camp in 広島
• 3月11日（土曜）午後
• 会場：広島駅から徒歩10分くらい
• 夜は懇親会
• 講師
• 鈴木たかのりさん（ビープラウド／PyConJP）
• 内容
• Pythonの環境構築
• 文法の基本
• ライブラリの利用、スクレイピング
• ハッシュタグ #pycamp 申し込みは connpass
2

3. Windowsキーを使う操作
• Win+B
• Win+T
• Win+D
• Win+M
• Win+数字
• Win+R
• Win+スペース
• Win+X, Win+A, Win+S, Win+Q
3

4. Windowsのキー操作の基本
• 矢印キー, Tab, Shift+Tab
• Windowsキー, Ctrl+Esc
• Enter, Esc, スペース, Home, End
• F6
• Alt, Alt+スペース
• Alt+F4
• Shift+F10（アプリケーションキー）
• Ctrl+C, Ctrl+X, Ctrl+V, Ctrl+Z
4

5. なにかを実行する操作
• ダイアログ
• Enter で OK / Esc でキャンセル
• フォーカスの項目
• Enter
• メニュー項目を選ぶ
• スペース
• ボタンを押す
• DOM の click イベント
• Ctrl+Alt+Enter （Windowsナレーター）
• Insert+Enter （NVDA）
• 1 次的な（デフォルト）アクションを実行する（activate）
• デバイス非依存
5

6. Web開発とアクセシビリティ
• 品質・本質・未来
• 理想を通じて現実の問題を解決
• 特集：実装例でわかる！実践アクセシビリティ
• WEB+DB PRESS Vol.95
• 小出淳子、黒澤剛志
• 株式会社 ボーンデジタル
• 書籍：デザイニングWebアクセシビリティ
• 太田良典、伊原力也
• 書籍：コーディングWebアクセシビリティ
• ヘイドン・ピカリング（翻訳 太田良典、伊原力也）
6

7. Windows 簡単操作 : ナレーター
• ナレーターとNVDA
• 無料で使える（平等）
• 正しい役割分担（規格やAPIに準拠）
• 標準的なWindows操作（ユニバーサル）
• ナレーターと iOS VoiceOver
• プリインストール（平等）
• タッチ対応
• 「お金を出して買うスクリーンリーダー」と比較
• アプリの不備を補うことの価値？
• ナレーターは機能不足と言われ続けた
7

8. ナレーターの進化
• Windows 7
• 日本語音声エンジンがなかった（別途無償配布）
• Windows 8
• 日本語音声エンジン Haruka
• タッチ対応 / Windows RT
• 日本語入力の候補の説明 (8.1)
• Windows 10
• モバイルと新しい音声 (TH2)
• スキャンモード (RS1)
• 点字ディスプレイ (RS2)
• WinPE/WinRE (RS2)
8

9. ナレーターの基本操作
• ナレーターの開始と終了
• Win+Enter → Ctrl+Win+Enter に変更
• 読み上げの停止 = Ctrl
• ヘルプ = Ctrl+Alt+F1
• ナレーター制御キーは CapsLock ではなく Ctrl+Alt
• VMware ユーザーは注意
• 開発者モード：視覚障害の疑似体験
• Ctrl+Alt+Shift+F12
• NVDAの開発者向けアドオン : FocusHighlight
9

10. ビューを単位とする移動
• ビューの切り替え
• Ctrl+Alt+上矢印 / Ctrl+Alt+下矢印
• 前後に移動
• Ctrl+Alt+左矢印 / Ctrl+Alt+右矢印
• ビューの選択肢
• 項目（オブジェクト）
• 段落、行（コウ）、単語、すべての文字、表（ヒョウ）
• リンク、見出し、ランドマーク、フォームフィールド
• VoiceOver のローターに似ている？
10

11. スキャンモード
• NVDAでは「ブラウズモード」
• モード（キーボードモード）切り替え
• Ctrl+Alt+スペース を2回押す（？）
• 「オフ」と「スキャン」交互に
• 1文字ナビゲーション
• 見出し = H / Shift+H
• ランドマーク = D / Shift+D
• 意味をマークアップすること
• 操作、状態把握、堅牢：特に動的なUI要素
11

12. 点字ディスプレイ対応
• 文字を読む：音声だけでは不十分
• 「ブライユ点字（ベータ）」
• 次のものがインストールされます
• BRLTTY : GNU GPLv3 → ドライバ
• Liblouis : GNU LGPLv2.1 → 点訳エンジン
• これらは Android TalkBack / NVDA でも使用
• BRLTTY 最新版は日本のKGS社の製品にも対応
• Liblouis は日本語に対応していない
• NVDA 日本語版は独自実装エンジンを別途搭載
12

13. NVDA日本語版 www.nvda.jp
• Windows 離れ？
• ナレーターとNVDAをあわせて広めたい
13