190516 nishimoto
•Transferir como PPTX, PDF•
0 gostou•3,492 visualizações
アクセシビリティの祭典 2019 スクリーンリーダーで使いやすいサービスやアプリを作りたい技術者の声 西本 卓也 NVDA日本語チーム 代表 https://accfes.com/2019/session/session2.php 2019年5月16日 おことわり：動画と一部画像を削除しています。
Recomendados
Mais conteúdo relacionado
Semelhante a 190516 nishimoto
Semelhante a 190516 nishimoto (20)
Mais de Takuya Nishimoto
Mais de Takuya Nishimoto (20)
Último
Último (9)
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
Notas do Editor
- 01.mp4
- 02.mp4
- https://github.com/nvaccess/nvda/issues/7239
- https://github.com/LinuxA11y/IAccessible2/issues/4
- https://osdn.net/projects/nvdajp/ticket/35562 https://github.com/nvaccess/nvda/issues/4920