スクリーンリーダーで使いやすい サービスやアプリを作りたい技術者の声

Presentation on theme: "スクリーンリーダーで使いやすい サービスやアプリを作りたい技術者の声"— Presentation transcript:

1 スクリーンリーダーで使いやすい サービスやアプリを作りたい技術者の声
西本 卓也 @nishimotz NVDA日本語チーム 代表 / 株式会社シュアルタ

2 01.mp4

3 かずと君 2010年に家族が「無料のスクリーンリーダー」を見つける その後、思い切ってNVDAに乗り換える 今日のお題 当時、小学校3年生
一般のソフトを使いたい 今日のお題 NVDAで「あれっ」と思うこと

4 自己紹介：西本 広島 → 早稲田大学 → 京都工芸繊維大学 → 東京大学 スクリーンリーダー NVDA 日本語版 広島（2011年から）
機械学習、認知科学、障害者支援 → 博士（工学） スクリーンリーダー NVDA 日本語版 広島（2011年から） リモートワーク／ソフトウェア受託開発 株式会社シュアルタ（2018年から） 信号処理／自然言語／Web／組み込み／モバイル／クラウド 活動 WAIC ／ Python ／ こどもプログラミング

5 NVDA: Non-Visual Desktop Access
オープンソースの Windows 対応スクリーンリーダー オーストラリアの NPO と世界のコミュニティ 3ヶ月ごとにリリース、新しい技術や環境への対応 NVDA日本語チーム : 日本語版の配布 本家版の開発と翻訳 FocusHighlight アドオン 利用者・技術者・開発者に対する普及啓発（11月 サイトワールド） NVDAチートシート配布中

6 CSUN 2019 アナハイム

7 質問①

8 02.mp4

9 何をやっていたのか Chrome を NVDA で使っている キーボード（矢印キー）で移動して Web サイトを読む

10 「リンク」だと解釈されていません！ 「クリック可能」は NVDA の実力 そして悲鳴！
答え① 「リンク」だと解釈されていません！ 「クリック可能」は NVDA の実力 そして悲鳴！

11 Web a11y の役割分担 音声・点字 👪😎 NVDAが作る世界 変化に強い スクリーンリーダー コンテンツ アプリ OS 画面拡大

12 👪😎 フォーカスモード（ガシャ） ブラウザ OS コンテンツ A B C D NVDA キーイベントはブラウザへ ふつうのPC操作と同じ
コンテンツの操作 ブラウザ自身の操作も 上下矢印でスクロール ふつうのPC操作と同じ マウスなしでWindows NVDA コンテンツ ブラウザ OS

13 👪😎 ブラウズモード（ポン） ブラウザ OS コンテンツ A B C D NVDA キーイベントはNVDAへ 読み取り場所
レビューカーソル ナビゲーターオブジェクト NVDA コンテンツ ブラウザ OS

14 ブラウズモードの機能 上下の矢印キー : 読み取り場所の移動 Tab / スペース / Enter など : フォーカスモードと同じ機能
自動的にフォーカスモードに切り替わる エディットフィールド、コンボボックス 1文字ナビゲーション（見出しジャンプなど） NVDA+F7 : 要素リスト

15 1文字ナビゲーションの例 D: ランドマーク（Shift+Dで逆方向、以下同じ） H: 見出し I: リスト項目 E: エディットフィールド
B: ボタン C: コンボボックス X: チェックボックス G: 画像

16 クリック可能？ Firefox : リンク Chrome : クリック可能 「リンク」であるべき Enter または スペース リンクを開く

17 Firefox アクセシビリティプロパティ

18

19 Chrome "Role: LayoutTable"

20 <a> を display: table している

21 「クリック可能」＝「実行」可能 DOM の click イベントに反応できる NVDA では NVDAの「悲鳴」
通常はボタンやリンクの「既定のアクション」として実装 だが onclick 属性さえあれば「マウスとタップに反応」できる NVDA では 「既定のアクション」がない要素を「実行」できる フォーカスできない要素を NVDA+Enter で「実行」できる ロールがあれば「クリック可能」を省略して「リンク」などと読む NVDAの「悲鳴」 CSS によって「リンクではなくなった」と Chrome が解釈 「書式とドキュメント情報」で報告をオフにできる

22 <a role="link"> で回避

23 資料 WEB+DB PRESS Vol.95 黒澤さんの記事 《「実行」は、入力デバイスごとの場合分けが不要な操作》

24 質問②

25

26 何をやっていたのか？ Internet Explorer 11 + NVDA で「ツイキャス」を使う Flash が使われている

27 実はすでに、ものすごく配慮されている！ Chrome を使いましょう！
答え② 実はすでに、ものすごく配慮されている！ Chrome を使いましょう！

28 NVDAの「埋め込みオブジェクト」対応 対象 NVDA ブラウズモード オブジェクトの中に入ると Oracle Java Applet
Adobe Flash Player HTML5 Video (MediaElements.js) NVDA ブラウズモード O / Shift+O : 1文字ナビゲーション Enter : オブジェクトの中に入る オブジェクトの中に入ると アプリのように Tab / Shift+Tab でフォーカス移動 NVDA+Ctrl+スペース : 元のドキュメントに移動 ブラウズモードのドキュメント 埋め込みオブジェクト

29 アンケート ボタン しか見えないが 画像を変更 ボタン アンケート ボタン 録画を保存する ボタン このライブを削除する ボタン
画像を変更 ボタン アンケート ボタン 録画を保存する ボタン このライブを削除する ボタン 録画はあとで公開 ボタン

30 考察 たしかに だが 許してあげよう（許してください） 埋め込みオブジェクトで Enter できない（気がする）
オブジェクトの中のボタンは Tab で見つかる（確実ではないが） だが IE11 + Flash + スクリーンリーダーは配慮されている スクリーンリーダーユーザーにしか見えないボタンがある 許してあげよう（許してください） IE11 だし Flash だし

31 質問③

32

33 何をやっていたのか？ Chrome + NVDA +「日本語表現インフォ」 辞書検索サイト 広告で繰り返し「追加マークあり」と読まれる
動的コンテンツとして広告が入る 広告で繰り返し「追加マークあり」と読まれる

34 「校閲者による更新の報告」をオフに！ 「挿入マークあり」になるかも！
答え③ 「校閲者による更新の報告」をオフに！ 「挿入マークあり」になるかも！

35 NVDA 追加マークあり = inserted
identifies inserted content reported when text is marked as having been inserted

36 <ins> 要素 : 製作者の意図？

37 ins 要素とは 文書に 追加 されたテキストの範囲を表します

38 「追加マークあり」の使われ方 ROLE_INSERTED_CONTENT NVDA : 同じ種類の情報は同じように読み上げる
IAccessible2 で標準化 NVDA : 同じ種類の情報は同じように読み上げる Webでもアプリでも 一貫性

39 Microsoft Word「変更履歴の記録」
追加マーク

40 上から下に1行ずつ移動 こんにちは。 これは2行目です。 追加マークあり これは2行目と3行目の間に追加された行です。 追加マークなし
これは3行目です。 ブランク

41 下から上に1行ずつ移動 これは3行目です。 追加マークあり これは2行目と3行目の間に追加された行です。 追加マークなし これは2行目です。
こんにちは。

42 「追加マークあり」の経緯 変化したら差分を報告する NVDA 2015.4 NVDA 2016.2 書式とドキュメント情報の設定
逆方向の移動や1文字ナビゲーションで破綻したくない NVDA IE / MSHTML で <ins> / <del> などを報告 NVDA Microsoft Word で文章校正結果の報告 書式とドキュメント情報の設定 校閲者による更新の報告 無効にすると「日本語表現インフォ」に効果あり

43 変更履歴機能がWebアプリに IAccessible2 の開発 Firefox と Chrome の開発者が議論 NVDA 2018.3
現在は github.com/LinuxA11y/IAccessible2 Firefox と Chrome の開発者が議論 あっという間に <ins> 対応 NVDA Google Chrome において Webページの中で挿入や削除のマークアップを報告するように Firefox + NVDA も対応済み Firefox で確認

44 https://github.com/LinuxA11y/IAccessible2/issues/4

45 「挿入マークあり」にするべき insert = 追加（根拠はたぶんMDN）
Microsoft ランゲージポータル : insert = 挿入 / add = 追加 「マーク」は意訳（議論は歓迎）

46 質問④

47

48 何をやっていたのか？ Chrome + NVDA Google 検索 YouTube サイトで実行すると
エディットに移動 : 自動的にフォーカスモードに（ガシャ） Enter : 検索が実行されて次のページへ ページ更新 : 自動的にブラウズモードに（ポン） 開いたページの自動読み上げ YouTube サイトで実行すると ページが変わっているのに、ブラウズモードに戻らない？ NVDA+T : 現在のウィンドウのタイトルの報告

49 答え④ 慣れましょう！

50 実はページ遷移してない どうやら www.youtube.com は SPA 入力して Enter を押すとページ遷移する ように見える
Single-Page Application 入力して Enter を押すとページ遷移する ように見える タイトルやURLは更新される 新しいHTMLページが取得されていない /results?search_query=NVDA → application/json NVDA は「ポン」にならない 直前のエディットフィールドでフォーカスモードになったまま Microsoft Edge + ナレーターでも状況は同じ

51

52

53 NVDAのブラウズモード 設定できること ブラウズモードに自動的に切り替えない FocusHighlight 6.0
自動読み上げしない 「ガシャ」「ポン」のかわりに音声でモードを報告 ブラウズモードに自動的に切り替えない NVDA で追加されるオプション アクセシビリティ検証におすすめ？ FocusHighlight 6.0 ブラウズモードでない場合は常にフォーカスモード 色や太さのカスタマイズ機能を実装中 将来のNVDAにハイライト機能を標準搭載

54

55 NVDAで検証する意義 開発者も利用者も無料 やってみないとわからない 他のスクリーンリーダーに対応させる準備になる
相手にお願いしやすい やってみないとわからない サードパーティのライブラリやフレームワーク 動的なコンテンツ 他のスクリーンリーダーに対応させる準備になる 標準化を推進 開発者と利用者が Web の「概念」を共有する手段 開発や翻訳への参加を歓迎

56 アクセシビリティのこれから 頻繁にリリースされるアプリやサービス アクセシビリティを頑張ってもすぐに壊れる？ 展望 組み込まれていく
機械学習・人工知能・クラウド オープンソース・検証ツール・自動化 組み込まれていく 新しい技術、正しい開発手法、ビジネス習慣

57 PowerPoint 代替テキストの自動生成

58 Android リリース前レポート

59 NVDA 日本語版のユーザー数

60 Thanks to かずと君