このエントリーは Webアクセシビリティ Advent Calendar 2018 の4日目の記事になります。
NVDA日本語チーム の西本です。ふだんは広島県広島市にいます。オープンソースのスクリーンリーダー NVDA の日本語対応に関わりながら、NVDA 日本語版のリリースを続けています。ウェブアクセシビリティ基盤委員会 WAIC WG2 にも参加しています。
今年は自分の会社 シュアルタ を設立しました。以前から NVDA に関わる研究や調査・開発にフリーランスの立場で関わっていましたが、今後は NVDA に関するコンサルティングや受託開発を、株式会社シュアルタでお受けするのでよろしくお願いします。
NVDAのブラウズモード
ブラウズモードさえなければ NVDA の操作は基本的に Windows の操作です。Windows やWebブラウザに備わっている機能の不足を補っているのがNVDAの「ブラウズモード」です。
一方でブラウズモードが理解できないと「Windows がおかしくなった」ようにさえ思えます。
NVDA のブラウズモードについては、講習会用の教材として（図がなくて申し訳ないですが）「NVDA日本語版ガイドブック」を公開しています。
ブラウズモードの理解に「フォーカスハイライト」アドオンが役立つという話は2016年の記事に書きました。
今年「アクセシビリティの祭典」にあわせて作った「NVDAチートシート」も「ブラウズモードの仕様をいかに可視化するか」が大きな目的でした。
11月にサイトワールド2018で開催した「NVDA体験会」でも、ブラウズモードの説明のセッションを担当しました。そのときに、他のスタッフから「最近の Skype は NVDA のブラウズモードで操作すると便利だ」と教えてもらいました。
ご存知のとおり、最近はデスクトップアプリを Web 技術（いわゆる Electron ）で開発することが増えています。
NVDA では「ブラウズモードは Web コンテンツだけではなく PDF や HTML メールや電子書籍なども対象にしていて、それらをできるだけ一貫性のある方法で操作できる」ことを目指しています。
ここでは「Webアクセシビリティ」とはちょっと離れてしまいますが、ブラウズモードで覗いてみるとちょっと興味深いアプリを2つ紹介します。
Visual Studio Code 1.29.1
最初は Visual Studio Code です。
Electron が使われていること、オープンソースで開発されていること、などが知られています。また、アクセシビリティに配慮されており、NVDA に対応しています。スクリーンリーダーで使いこなすのはなかなか大変と思いますが、まあ私も使いこなせてるとは言えませんね。。
VS Code には「スクリーンリーダー互換モード」のようなスイッチがあります。これが有効になっていないと、テキストエディタの行単位の読み上げがあまりちゃんと動きません。モードが自動切り替えに設定されている場合は、NVDAが動いているかどうかを判断して、モードを切り替えますか？みたいに聞いてきたりします。
スクリーンリーダー互換モードをずっと有効にしていると、行の折り返し表示が期待通りに機能しません。どうやら、論理行と物理行を一致させることを前提にスクリーンリーダー対応を実現しているようです。
さて、その設定ですが、Settings の画面の中にコンボボックスがあります。
フォーカスハイライトが赤くなるのは、ブラウズモードだからですね。。
ブラウズモードなら「要素リスト」が使えるはずなので NVDA+F7 を押してみます。フォームフィールドの表示に切り替えると、
Editor Accessibility Support コンボボックス・折りたたみ on
のように、この設定項目が現れます。
この要素リストで「ランドマーク」に切り替えると、「コンテンツ情報」「ナビゲーション」「メイン」のランドマークがあり、メインの中にさらに「Settings フォーム」という項目も見つかります。ランドマークの「フォーム」は解説に書いてあるけど、あまり見たことなかったです。。
VS Code はフォルダーを開くとその中のファイルを複数開いて切り替えながら編集ができます。そのファイルを探したり切り替えたりする画面要素はテキストを編集する部分の左側にあり、「エクスプローラー」という名前になっていて、ツリービューのような表示になっています。その状態で「要素リスト」を開くと、下記のような画面になります。
種別「見出し」では「開いているエディタ」「フォルダ名（その内容を表示できる）」「アウトライン（プログラミング言語のクラスやメソッドや変数の定義などをツリー表示できる）」の項目が見つかります。ということは、見出しジャンプできたり、要素リストから移動できるわけですね。。
Skype 8.34.0.78
Skype for Windows も最近のバージョンは Electron で作られています。
たしかに NVDA+スペース でブラウズモードとフォーカスモードに切り替わるし、テキスト入力のところに移動すると「ガシャ」と音がして、自動的にフォーカスモードに切り替わったりします。
要素リストで「見出し」を確認すると、チャット画面の日付が見出しになっていました。この例では「2017年5月7日」と「今日」という2つの見出しがあります。
ブラウズモードで H と Shift+H を押すと、日付の区切り線のようなところにジャンプできます。
以下は「2017年5月7日」に移動したところ。
以下は「今日」に移動したところ。
Web コンテンツであれば「見出し」にはレベルがあって、レベル2の見出しには数字 2 を押すとジャンプできるのですが、この Skype チャットの日付は「レベル1から6」のどれにも当てはまらない「レベルなしの見出し」でした。いずれ詳しく調べてみたいと思います。興味深いですね。。
ブラウズモードで E を押すと「エディットフィールドにジャンプ」ができるので、この Skype のチャット画面では、チャット入力コントロール（ここに入力と書かれている場所）にジャンプできます。
文字を実際に入力するためにはフォーカスモードに戻す必要があります。
上下の矢印キーでエディットに移動するとフォーカスモードに自動的に切り替わるのですが、1文字ナビゲーションの E で移動すると、ブラウズモードのままになりますね。。
以上、ブラウズモードで Web コンテンツっぽい操作ができるアプリの実例を紹介しました。
仕事では iOS で WebView を使うアプリの開発もするのですが「Web 技術をアクセシブルに使う」と VoiceOver でだいたいちゃんと使えます。
見えないところも、きれいに正しく作れたらいいですよね。。
アプリやコンテンツのアクセシビリティ検証に NVDA を使ってくださる皆様、イベントのサポートや寄付などのご支援をしてくださる皆様、ありがとうございます。これからも NVDA 日本語チームをよろしくお願いします。
おまけ：今年出演したポッドキャスト
サイトワールド2018特集 第6回 NVDA日本語チーム（日本視覚障害者ICTネットワーク JBICT ポッドキャスト）
AccSell ポッドキャスト第140回: 「こういうもの俺自分で作らなくて良い時代になったんだ」
わしポ 9: Kinsai PyCon mini Hiroshima (nishimotz)