190516 nishimoto
Download as pptx, pdf0 likes3,496 views
アクセシビリティの祭典 2019 スクリーンリーダーで使いやすいサービスやアプリを作りたい技術者の声 西本 卓也 NVDA日本語チーム 代表 https://accfes.com/2019/session/session2.php 2019年5月16日 おことわり：動画と一部画像を削除しています。
190516 nishimoto
- 1. スクリーンリーダーで使いやすい サービスやアプリを作りたい技術者の声 西本 卓也 @nishimotz / @24motz NVDA日本語チーム 代表 / 株式会社シュアルタ 1
- 2. 2
- 3. かずと君 ? 2010年に家族が「無料のスクリーンリーダー」を見つける ? 当時、小学校3年生 ? NVDA日本語版「やっと日本語の入力と出力ができた」ばかり ? その後、思い切ってNVDAに乗り換える ? インターネットでNVDAのイベント配信を聞く ? 一般のソフトを使いたい ? 今日のお題 ? NVDAで「あれっ」と思うこと 3
- 4. 自己紹介：西本 ? 広島 → 早稲田大学 → 京都工芸繊維大学 → 東京大学 ? 機械学習、認知科学、障害者支援 → 博士（工学） ? スクリーンリーダー NVDA 日本語版 ? 広島（2011年から） ? リモートワーク／ソフトウェア受託開発 ? 株式会社シュアルタ（2018年から） ? 信号処理／自然言語／Web／組み込み／モバイル／クラウド ? 活動 ? WAIC ／ Python ／ こどもプログラミング 4
- 5. NVDA: Non-Visual Desktop Access ? オープンソースの Windows 対応スクリーンリーダー ? オーストラリアの NPO と世界のコミュニティ ? 3ヶ月ごとにリリース、新しい技術や環境への対応 ? NVDA日本語チーム : www.nvda.jp ? 日本語版の配布 ? 本家版の開発と翻訳 ? FocusHighlight アドオン ? 利用者?技術者?開発者に対する普及啓発（11月 サイトワールド） ? NVDAチートシート配布中 5
- 7. 質問① 7
- 8. 8
- 9. 何をやっていたのか ? Chrome を NVDA で使っている ? キーボード（矢印キー）で移動して Web サイトを読む 9
- 11. Web a11y の役割分担 ? NVDAが作る世界 ? 変化に強い コンテンツ アプリ OS スクリーンリーダー 音声?点字 11 画面拡大 ??
- 12. フォーカスモード（ガシャ） ? キーイベントはブラウザへ ? コンテンツの操作 ? ブラウザ自身の操作も ? 上下矢印でスクロール ? ふつうのPC操作と同じ ? マウスなしでWindows 12 コンテンツ ブラウザ OS NVDA A B C D??
- 13. ブラウズモード（ポン） ? キーイベントはNVDAへ ? NVDAがブラウザを制御する ? 読み取り場所 ? レビューカーソル ? ナビゲーターオブジェクト 13 コンテンツ ブラウザ OS NVDA A B C D??
- 14. ブラウズモードの機能 ? 上下の矢印キー : 読み取り場所の移動 ? Tab / スペース / Enter など : フォーカスモードと同じ機能 ? 自動的にフォーカスモードに切り替わる ? エディットフィールド、コンボボックス ? 1文字ナビゲーション（見出しジャンプなど） ? NVDA+F7 : 要素リスト 14
- 15. 1文字ナビゲーションの例 ? D: ランドマーク（Shift+Dで逆方向、以下同じ） ? H: 見出し ? I: リスト項目 ? E: エディットフィールド ? B: ボタン ? C: コンボボックス ? X: チェックボックス ? G: 画像 15
- 16. クリック可能？ ? Firefox : リンク ? Chrome : クリック可能 ? 「リンク」であるべき ? Enter または スペース ? リンクを開く 16
- 18. 18
- 20. <a> を display: table している 20
- 21. 「クリック可能」＝「実行」可能 ? DOM の click イベントに反応できる ? 通常はボタンやリンクの「既定のアクション」として実装 ? だが onclick 属性さえあれば「マウスとタップに反応」できる ? NVDA では ? 「既定のアクション」がない要素を「実行」できる ? フォーカスできない要素を NVDA+Enter で「実行」できる ? ロールがあれば「クリック可能」を省略して「リンク」などと読む ? NVDAの「悲鳴」 ? CSS によって「リンクではなくなった」と Chrome が解釈 ? 「書式とドキュメント情報」で報告をオフにできる 21
- 23. 資料 ? WEB+DB PRESS Vol.95 ? 黒澤さんの記事 ? 《「実行」は、入力デバイスごとの場合分けが不要な操作》 23
- 24. 質問② 24
- 25. 25
- 26. 何をやっていたのか？ ? Internet Explorer 11 + NVDA で「ツイキャス」を使う ? Flash が使われている 26
- 28. NVDAの「埋め込みオブジェクト」対応 ? 対象 ? Oracle Java Applet ? Adobe Flash Player ? HTML5 Video (MediaElements.js) ? NVDA ブラウズモード ? O / Shift+O : 1文字ナビゲーション ? Enter : オブジェクトの中に入る ? オブジェクトの中に入ると ? アプリのように Tab / Shift+Tab でフォーカス移動 ? NVDA+Ctrl+スペース : 元のドキュメントに移動 ブラウズモードのドキュメント 28 埋め込みオブジェクト
- 29. アンケート ボタン しか見えないが ? 画像を変更 ボタン ? アンケート ボタン ? 録画を保存する ボタン ? このライブを削除する ボタン ? 録画はあとで公開 ボタン 29
- 30. 考察 ? たしかに ? 埋め込みオブジェクトで Enter できない（気がする） ? オブジェクトの中のボタンは Tab で見つかる（確実ではないが） ? だが ? IE11 + Flash + スクリーンリーダーは配慮されている ? スクリーンリーダーユーザーにしか見えないボタンがある ? 許してあげよう（許してください） ? IE11 だし ? Flash だし 30
- 31. 質問③ 31
- 32. 32
- 33. 何をやっていたのか？ ? Chrome + NVDA +「日本語表現インフォ」 ? 辞書検索サイト ? 動的コンテンツとして広告が入る ? 広告で繰り返し「追加マークあり」と読まれる 33
- 35. NVDA 追加マークあり = inserted ? identifies inserted content ? reported when text is marked as having been inserted 35
- 36. <ins> 要素 : 製作者の意図？ 36
- 37. ins 要素とは ? 文書に 追加 されたテキストの範囲を表します 37
- 38. 「追加マークあり」の使われ方 ? ROLE_INSERTED_CONTENT ? IAccessible2 で標準化 ? NVDA : 同じ種類の情報は同じように読み上げる ? Webでもアプリでも ? 一貫性 38
- 42. 「追加マークあり」の経緯 ? 変化したら差分を報告する ? 逆方向の移動や1文字ナビゲーションで破綻したくない ? NVDA 2015.4 ? IE / MSHTML で <ins> / <del> などを報告 ? NVDA 2016.2 ? Microsoft Word で文章校正結果の報告 ? 書式とドキュメント情報の設定 ? 校閲者による更新の報告 ? 無効にすると「日本語表現インフォ」に効果あり 42
- 43. 変更履歴機能がWebアプリに ? IAccessible2 の開発 ? 現在は github.com/LinuxA11y/IAccessible2 ? Firefox と Chrome の開発者が議論 ? あっという間に <ins> 対応 ? NVDA 2018.3 ? Google Chrome において Webページの中で挿入や削除のマークアップを報告するように ? Firefox + NVDA も対応済み ? Firefox 66.0.5 で確認 43
- 44. 44
- 45. 「挿入マークあり」にするべき ? insert = 追加（根拠はたぶんMDN） ? Microsoft ランゲージポータル : insert = 挿入 / add = 追加 ? 「マーク」は意訳（議論は歓迎） 45
- 46. 質問④ 46
- 47. 47
- 48. 何をやっていたのか？ ? Chrome + NVDA ? Google 検索 ? エディットに移動 : 自動的にフォーカスモードに（ガシャ） ? Enter : 検索が実行されて次のページへ ? ページ更新 : 自動的にブラウズモードに（ポン） ? 開いたページの自動読み上げ ? YouTube サイトで実行すると ? ページが変わっているのに、ブラウズモードに戻らない？ ? NVDA+T : 現在のウィンドウのタイトルの報告 48
- 49. 答え④ 慣れましょう！ 49
- 50. 実はページ遷移してない ? どうやら www.youtube.com は SPA ? Single-Page Application ? 入力して Enter を押すとページ遷移する ように見える ? タイトルやURLは更新される ? 新しいHTMLページが取得されていない ? /results?search_query=NVDA → application/json ? NVDA は「ポン」にならない ? 直前のエディットフィールドでフォーカスモードになったまま ? Microsoft Edge + ナレーターでも状況は同じ 50
- 51. 51
- 52. 52
- 53. NVDAのブラウズモード ? 設定できること ? 自動読み上げしない ? 「ガシャ」「ポン」のかわりに音声でモードを報告 ? ブラウズモードに自動的に切り替えない ? NVDA 2019.2 で追加されるオプション ? アクセシビリティ検証におすすめ？ ? FocusHighlight 6.0 ? ブラウズモードでない場合は常にフォーカスモード ? 色や太さのカスタマイズ機能を実装中 ? 将来のNVDAにハイライト機能を標準搭載 53
- 54. 54
- 55. NVDAで検証する意義 ? 開発者も利用者も無料 ? 相手にお願いしやすい ? やってみないとわからない ? サードパーティのライブラリやフレームワーク ? 動的なコンテンツ ? 他のスクリーンリーダーに対応させる準備になる ? 標準化を推進 ? 開発者と利用者が Web の「概念」を共有する手段 ? 開発や翻訳への参加を歓迎 55
- 56. アクセシビリティのこれから ? 頻繁にリリースされるアプリやサービス ? アクセシビリティを頑張ってもすぐに壊れる？ ? 展望 ? 機械学習?人工知能?クラウド ? オープンソース?検証ツール?自動化 ? 組み込まれていく ? 新しい技術、正しい開発手法、ビジネス習慣 56