「アクセシビリティの祭典 2019」登壇

2019年5月16日、Global Accessibility Awareness Day に合わせて神戸で開催された「アクセシビリティの祭典」にて、今年もセッション登壇と NVDA の紹介ブース出展をさせていただきました。

リンクなど

アクセシビリティの祭典2019 公式サイト

Togetterまとめ

西本のセッション「スクリーンリーダーで使いやすいサービスやアプリを作りたい技術者の声」スライド

おことわり:動画と一部画像を削除しています。


セッション登壇のふりかえり

どうしてこういうタイトルになったのか、疑問ですよね。その疑問に答える時間すらなかったですね。。

最初に打診をうけたときから「若い人と一緒に登壇してもらう予定」と聞いていたのですが、まったく打ち合わせや準備が進まないまま3月になり4月になり、事前告知や情報保障のためにタイトルや内容を出すタイミングがやってきました。

私は「質問を受けて答える」というセッションのわき役のつもりでいたので、どんな質問が出てくるかわからないタイミングで私がタイトルを出すことになり、もしかしたら「私がひとりでエモい話をする」ことになるかも、と考えていました。

私は NVDA というスクリーンリーダーの開発にコミュニティとしてかかわる一方で、スクリーンリーダーとは関係なく、ソフトウェア技術者として仕事をすることもあります。

ですが、可能な限り、私が関わる仕事は「アクセシビリティを配慮した仕事」でありたいと思っています。

そうでないと恥ずかしいというか、気持ち悪いからですね。。

なので私自身が「スクリーンリーダーで使いやすいサービスやアプリを作りたい技術者」です、と言いつつ、この「仮のタイトル」を運営の皆さんに伝えて、それがそのまま最終的なタイトルになりました。

もし企画が変わってしまって、このタイトルに沿って私が自分の集めている情報や自分の試行錯誤したことなどを喋れば、(あまり盛り上がらなかったと思うけど)いちおう40分は喋れるつもりでした。
今年の CSUN でも、どっちかというと政治的な話ではなく、テクニカルな話ばかり聞いてきましたからね。。

ひととおり情報が公開されたあとで、4月末から連休が始まり、そのさなかに「かずと君」との打ち合わせをしました。

そこで本人から直接伝えられた質問は、セッションで紹介した通りなのですが、「たぶんこういう理由ですね」などと打ち合わせの途中で私が答えたことは、数日かけて詳しく調べてみたら、見込み違いだったものもありました。
どれもちょっと技術的に深い内容で、「ユーザーはこんなことをこんな風に気にしながら NVDA を使ってるんだなあ」と感じさせる興味深いテーマでした。

私が回答を作っているあいだに神戸ではビデオの収録が行われました。

届いたビデオを確認しながら私がしゃべる内容と分量を調整したら、「サービスやアプリの開発者としての自分のネタをしゃべる時間はない」ということがわかりました。

結果的にタイトルはそのままだけど「かずと君からのNVDAのマニアックな質問に答えつつ、スクリーンリーダーを知らない人にもなんとかついていけるように配慮したセッション」として準備を進めました。

当日はどうやら「技術者の声」とタイトルにつけたことが幸い(災い?)したのか、スクリーンリーダーのマニアでない人はブースを見に行ってしまったようですね。
Twitter を読み返しても、わかってくれる人がニヤニヤしながら盛り上がってくださったようです。

「スクリーンリーダーで使いやすいサービスやアプリを作りたい技術者の声」は、私の登壇中に Twitter でつぶやいてくださった皆様の声でした。たぶん。
盛り上げていただいてありがとうございました。

なお、神戸で収録されたビデオが届いて、最後のファイルを見るまで、私は、自分が打ち合わせをしていた相手が ミュージシャン「かしわもちかずと」さんであることに気づいていませんでした。。

セッションは学校の授業で参加できなかったという彼は懇親会で素晴らしい演奏をしてくれました。ありがとうございました。

ブース出展のふりかえり

NVDA は使ったことがあるけど、よくわからなかった。怖い。もう触りたくないと思った。

ブラウズモードってなんですか? 必要あるんですか?

などと声をかけてくださった Web 製作関連の人がいらっしゃったので、丁寧にご説明をしました。

「わかりました。もういちど頑張ってみます」と言って立ち去って行かれました。

無料でダウンロードできるツールとはいえ、やっぱり対面でご説明する場はあったほうがいいんだなあと感じました。

NVDA を知らないという人とも、そうでない人とも、たくさんお話ができてよかったです。

いつの間にかブースで時間を使ってしまい、あまりセッションを聞けませんでしたが。。

配布物やポスターなど、あまり丁寧に準備できていないのが課題だと思いました。

これからもよろしくお願いします。

技術書典6で売り子を手伝いました

東京で開催された「技術書典6」に参加してきました。

ただの来場者として雰囲気を知ってお目当てのサークルを見に行こうと思っていたのですが、当日の朝になって、「広島電子工作娯楽部」のブースを手伝って欲しいという話が来て、サークル通行証で設営から入場することになりました。
おかげで、単に来場者として会場にいるよりも、ずっと落ち着いてイベントを楽しむことができました。

基板を作ってみよう

「広島電子工作娯楽部」では「基板を作ってみよう」という新刊を著者が売っているそばで、荷物を見張ったり在庫と売上金を数えたりしていました。

私も基板は作ってみたかったので「やらないといつまでたってもできないです」「たとえ失敗しても『失敗という名の成功』が得られます」「基板が作れると表面実装が怖くなくなります。部品の選択肢が増えると世界が変わります」などなど、著者のセールストークに私も心の中で頷きながら座っていました。

約140部が終了1時間前くらいには完売。来場者1万人という規模もすごかったですが、売り手の熱意と、本の内容のクオリティに支えられた成果だったと思います。

技術書典に広島から参加したサークルとしては初めての実績だったのではないでしょうか。

アクセシビリティ

前回の技術書典5では「こんのいぬ」さんが「これからはじめるWebアクセシビリティ」を販売しておられて、私は後日それを知って電子版を購入しています。

アクセシビリティについての(それを読めないかも知れない人がいる前提の)紙の本を売るって、誰にどう伝わるんだろう、と懐疑的に思ったこともありました。

ですが、未知の世界との出会いを求めている、楽しんでいる、ということが分かってきました。

だったら関わる意義はあるのかな、と思い始めたのですが、今回、私自身のサークル申し込みは落選してしまいました。

お目当てのひとつは、スクリーンリーダー NVDA の同人誌でした。

無事に「ほしがたタイムカプセル」さんのブースで NVDA と DAISY の本を入手できました。

写真: ほしがたタイムカプセルさんのブース

タイトルの「NVDAではじめるヘッドレス・デスクトップ」というのはすごいインパクトですね。

購入した本を帰りの新幹線の中で読みましたが、書き手にいまはまだ視力があること、いずれ視力を失われる見込みであること、そしてご自分がソフトウェア技術者であること、さらにご自分がスクリーンリーダーのユーザーになろうとしておられること、などなど、さまざまな立場の視点が絶妙にミックスされていて、またアニメの知識からスクリーンリーダーの機能をユニークに比喩されているなど、とても興味深く読むことができました。

ブースではヘッドフォンとゲームパッドで Windows を使ってみよう、という体験の環境を用意しておられました。こういう新しい切り口で、1万人の人に NVDA を紹介してくださってありがとうございました。

買った本と全体的な振り返り

買った本の写真です。全部で1万円くらいでしょうか。。

技術書典6で買った本

さきほど書いた「Webアクセシビリティ」の本や、同じく前回の参加者さんが出された「ネコを支える技術」 など、あとで知って電子書籍で購入させていただいた本はあるのですが、あらためて、同人イベントに実際に足を運んで(主に)紙の本を買う、という経験を考え直す機会になりました。

NVDA (と技術書典の公式ガイドブック)以外の本は、買おうと思っていたわけではなく、たまたま目に入って、ちょっと読んでみようか、と気軽に購入したものばかりです。

「テーマが新しくなくても、視点が新しければ、ユニークなコンテンツは作れる」ということがわかります。

キーワードが分からなくて探せないもの、いつか情報収集しようと思いながら実行に移せてなかったもの、逆にキーワードから得られる情報が多すぎて何を読んでいいか分からないもの、古い情報が役立たなくなってしまうもの、などなど、イベントの場でこうして紙の本を見つけることには、まだまだいろんな意味があるようです。

そういえば私はふだんから「考え事をするために本屋に行って、背表紙を眺めながらあれこれ思いを巡らせて、本当に欲しい本はあとでネットで買う」みたいなこともよくやっています。

私は自分の仕事場のペーパーレスを目指していることもあり、紙の本をたくさん持ちたいわけでもないのですが、同人誌については「まあいいか」と感じています。
電子版で買い直せたら買い直すかも知れませんね。。

400以上の書き手が発信するコンテンツを1万人の参加者に6時間で伝える、と考えると、ポスターセッションよりももっと効率的なわけで、不思議でもあり、すごいなあと思った一日でした。

来場者も年齢・性別を問わず、いろんな人がいらっしゃいました。

ふつうの入場者としての参加だったら相当並んで会場に入ることになっていたと思うと、

「東京のすごいところは、とにかく人が多いこと」

「東京のつらいところは、とにかく人が多いこと」

ですね。。

CSUN国際会議2019に参加中

ひさしぶりに CSUN Assistive Technology Conference に来ています。

Twitter @24motz で聞いたことをメモしながら会場を回っています。

twilog でまとめています。

どのくらいひさしぶりかというと、2002年が前回の参加だったようです。17年ぶりですね。。当時はロスアンジェルス空港のすぐそばのホテル、その後会場がサンディエゴになり、今年からアナハイム。
ディズニーランドのすぐ近くにいて、ホテルの中をずっとうろうろしています。

今回の大きな目的は NVDA の開発をしている NV Access の人たちにひさしぶりに会って話をすることでした。

昨日、目的は果たすことができました。

NV Access のセッションの様子

あらためて NVDA 日本語版の状況を報告。

今年これから進められる Python 3 移行における日本語の文字コードの問題、 Windows 10 の新しい日本語入力メソッドへの対応の問題、など、日本の NVDA ユーザーにとっての不安材料を伝えました。

話し合った結果、これらの問題を確実に解決しながら前に進んでいけそうだという確信を持ちました。

詳しいことは、いずれお伝えしていきたいと思っています。

株式会社シュアルタとしては NVDA の法人向けサポート事業を準備中です。

数々のセッションや企業などの展示から、今後に向けたヒントや刺激をいろいろもらっています。

たくさんの盲導犬が会場中を所狭しと働いているのも、17年前と変わらない、ほほえましい光景です。

NVDA 2018.4jp と FocusHighlight の現状

無料(オープンソース)の Windows 用スクリーンリーダー NVDA (NonVisual Desktop Access) の 日本における開発コミュニティである NVDA 日本語チームは、 2018年12月17日に NVDA 2018.4jp をリリースしました。

インストーラーのダウンロードはこちらからどうぞ:

https://i.nvda.jp/

GitHub リリースも利用できます:

https://github.com/nvdajp/nvdajp/releases/tag/release-2018.4jp

Windows 10, 8.1, 8, 7(SP1) の32ビット版および 64ビット版に対応しています。
Windows 8 以降ではタッチ操作が利用できます。
NVDA 日本語版のライセンスは GPL v2 です。

NVDA は多くのアプリに対応し、 インストール不要で利用できるポータブル版、アドオンによる機能拡張など、さまざまな特長を備えています。

NVDA 日本語チームがリリースする NVDA 日本語版は、オーストラリアの非営利法人 NV Access がリリースする NVDA 本家版に日本語の音声エンジンと点訳エンジンを追加するなど、日本語 Windows 環境のための改良を行っています。

NVDA 2018.4 のハイライト

・Mozilla Firefox の最近のバージョンにおける性能の改善
・音声エンジンに依存せず絵文字を読み上げる機能
・Outlook の返信済みや転送済みなどの報告
・Microsoft Word でカーソル位置からページの端までの距離を報告する機能

設定ダイアログの主な変更点

「音声」カテゴリ
「記号と絵文字の説明にUnicodeコンソーシアムのデータを使用」
が追加されました。

「オブジェクト表示」カテゴリ
「バルーン情報の報告」が「通知の報告」に変更されました。

NVDA 日本語チームによる 2018.4jp の主な変更点

・Excel でテーブルの行列の見出しが点字ディスプレイに表示されない不具合の修正
・単独で使われるアットマークの点字表記を「56-246」に変更
・「ヘルプを独自のウィンドウで開く」の既定値をチェックなしに変更

詳細

下記を参照してください。

NVDA 2018.4 最新情報
https://www.nvda.jp/nvda2018.4jp/ja/changes.html

日本語版 2018.4jp の更新内容
https://github.com/nvdajp/nvdajp/milestone/16?closed=1

Focus Highlight の現状

NVDA 2018.4 で行われた変更の影響で、Focus Highlight アドオンで Firefox や Chrome を使う場合に、ブラウズモードでフォーカスの位置しか表示されません。

以前は見出しジャンプで移動した見出し要素を緑の点線で確認できたりしていました。

調査したら、ナビゲーターオブジェクトが取得できないのではなく、ナビゲーターオブジェクトが移動したというイベントが取れなくなったため、画面表示が更新されないようです。

(ためしに、ハイライト位置を更新するキーコマンドを作って実行すると、うまく表示できている)

回避方法をいったん見つけたものの、 NVDA の再起動や終了が不安定になってしまったため、リリースに至っていません。

本来 NVDA に備わっていてほしい API が足りないことを、アドオン側で無理やり補ってきたのですが、いまや本家がAPIを整備してハイライト機能を実装しようとしているので、そちらに協力するほうがよさそうです。

そろそろ私のアドオンは潮時なのかも知れません。

追記(2018年12月19日)

FocusHighlight 5.5 をリリースしました。

コミュニティ add-on サイトなどの更新は依頼中です。

この機会に Windows Vista + IE9 や Windows XP + IE8 と一年前に対応を終了した NVDA 日本語版と、新しい Focus Highlight が、いちおうエラーを出さずに動くことなど確認しました。

Web 開発者さんが泣きながら古いバージョンの OS や NVDA やブラウザで動作確認をさせられていると思うと、頑張らずにはいられませんでした。。

NVDAのこれから

このエントリーは Webじゃないアクセシビリティ Advent Calendar 2018 の12日目の記事になります。

NVDA日本語チーム の西本です。ふだんは広島県広島市にいます。オープンソースのスクリーンリーダー NVDA の日本語対応に関わりながら、NVDA 日本語版のリリースを続けています。ウェブアクセシビリティ基盤委員会 WAIC WG2 にも参加しています。

今年は自分の会社 シュアルタ を設立しました。
NVDA に関するコンサルティングや受託開発を、株式会社シュアルタでお受けするのでよろしくお願いします。

後述するように NVDA と Windows アクセシビリティを取り巻く環境は2019年にも大きく変化します。
視覚障害者の雇用などで NVDA を活用したい企業や団体などの法人に向けて、コンサルティング契約により NVDA の技術サポートを提供します。
現在は申込受付の準備中です。
詳細は info@shuaruta.com にお問い合わせください。

Windows と Edge のこれから

Webアクセシビリティ Advent Calendar 2018 の4日目として NVDAのブラウズモード という記事を書いて、「Microsoft が Chromium 技術で作ったデスクトップアプリ」の紹介をしたら、直後に Microsoft Edge が Chromium に移行するという発表がありました。
momdoさんの日本語訳

そこまで Chromium 大好きになってたのか。。

Windows 10 がリリースされた直後に NVDA は Microsoft Edge をちゃんとサポートできていない、という宣言をしたのが懐かしいですね。
最大の理由は Internet Explorer 11 がサポートしてきたアクセシビリティAPIを Edge が廃止して UI Automation という技術に移行してしまったから、なのですが、その後、長い間をかけて Microsoft と NV Access は Edge が NVDA でちゃんと動き、性能的にも問題がないようになった、というのが2017年の終わりごろでした。

Chromium になった Edge は、もはや Chrome や VS Code や Skype のようにきちんと NVDA で操作できるようになるのだろうな、と思ったら、今度は Microsoft が Chromium の UI Automation 移行を進める、という話になっています。ということは Edge と Chrome にちゃんと対応できたばかりの NVDA は、また新たな作業が必要になるかも。。

Windows スクリーンリーダーのワクワク・ドキドキ・ハラハラの日々はなかなか終わりそうにありません。

NVDAのこれから

Python 2 のサポートが2019年末に終了する、ということがわかっていたにも関わらず NVDA はいまだに Python 2.7 に依存しています。

あれやこれやのアップデートに対応する作業に NVDA が追われることがなければ、もっと前向きな作業ができたのではないか、と言われそうですが、私は「もともとスクリーンリーダーというのはそういう運命のもの」だと思っています。

つまり OS やアプリやコンテンツが「理想的に作られていない」ことで起きる不具合を「取り繕う」のが、スクリーンリーダーの(本質とまでは言わないけれど)「重要な価値」になってしまっています。

なので「スクリーンリーダーの未来は?」と聞かれると、「スクリーンリーダーがなくなる」は言い過ぎとしても「スクリーンリーダーが単純になるのが理想の未来」と私は答えます。

話を戻すと、NVDA は来年 2019.1 から 2019.4 までの4回のリリースを行うあいだに、互換性を切り捨てて大きく変わり、Python 3.7 あるいは Python 3.8 を積んでパワーアップした NVDA に生まれ変わります。

ですが、そのパワーアップは、ユーザーには「何の得にもならない」と思われる可能性が高いです。

Windows XP のサポートが終わったときにも、Firefox で WebVisum が動かなくなったときにも、ガラケーで Web サイトが閲覧できなくなったときにも、むかしの Visual Basic で書かれたアプリが動かなくなったときにも、同じような話がありました。

今度は NVDA にその試練が降りかかる番ですね。。
たぶん NVDA 2018.4 やその日本語版を、アップグレードしないで何年か使い続けたい、という要望が出るだろうなあと覚悟をしています。
まあ、そういう使い方をする PC を割り切って温存するのは「アリ」かも知れません。。

ユーザーが直接得をしない「新しい技術への移行」は、そうは言っても、標準化、ソフトウェア開発、セキュリティ、オープンソース、など多くの企業やコミュニティの活動が関わって作られた「大きな流れ」であり、逆らうことは「孤立」を意味します。

そして「孤立」は「コンピューターとインターネットを学びたい、楽しみたい、活用したい」というスクリーンリーダー利用者には「残念な」選択だと思います。

実はまだ NVDA コミュニティは NVDA を Python 3 に移行させるための技術的課題を完全にはクリアできていません。

私の手元で動いている Python 3.7.1 版 NVDA は、今日やっとフォーカスハイライトが動いたところですが、まだ重要な機能がボロボロと欠けている状態です。

大丈夫なのか、ほんとにやれるのかよ、と心配しています。

来年は NVDA 日本語版よりも、まず本家 NVDA コミュニティのチャレンジを支えたい、と思っています。

NVDA 日本語アルファ版の新しい仕様

ここからはメーリングリストに投稿した内容です。

現在 NVDA 2018.4 のリリース候補版が出ていて、NVDA 日本語ベータ版 nvda_2018.4jp-beta-181210j はその変更が反映された、事実上の日本語リリース候補版になっています。
来週中に 2018.4jp の正式版もリリースできると思います。

本家は NVDA 2019.1 に向けた作業を進めており、日本語アルファ版では 2019.1 に向けた変更をテストしています。

最新の日本語アルファ版で、NVDA のアドオンについて大きな変更があるので、お知らせしておきます。

以下の説明を読んで、不都合と思う場合は、前もってリリース版やベータ版に移行することをお勧めします。

2019.1 以降の NVDA は、原則として、アドオン開発者によって互換性が確認されたアドオンだけをインストールできます。

アドオン開発者は、互換性を確認していることを知らせるために、アドオンを作り直して公開する必要があります。
先日リリースした focusHighlight 5.4 ではこの問題を修正しています。

NVDA 2019.1 系の日本語アルファ版をインストールするときに、従来のアドオンがインストールされていると、
「アドオンの互換性について了解しました」
というボタンが表示される場合があります。

ですが、そのボタンを押してインストールを実行するだけだと、互換性のないアドオンはすべて無効化されてしまいます。

インストールを実行する前に「アドオンの互換性の確認」というボタンからダイアログを開き、それぞれのアドオンについて「有効にする」のチェックボックスをチェックすれば、従来のアドオンを使い続けることができます。

この作業は、すべてのアドオンについて必要です。
(NVDA をインストールし直すたびに必要かどうかは再調査中です)

アドオンをたくさんインストールしている場合や、頻繁に NVDA 日本語アルファ版を更新している人には、かなり面倒ではないかと思います。

場合によってはベータ版や安定版に切り替えたほうがよい、というのはそういう理由です。

この数日、本家では、この仕組みのリリースで大きな混乱がありましたが、メーリングリストなどの議論を読んでいるかぎりでは、アドオンの互換性チェックを見直すつもりはなさそうです。

NVDA が依存している Python を2019年末までに 2 から 3 に切り替えて、そのほかの NVDA の内部の改良を進めるために、アドオン開発者に対応をしてもらう必要があり、その準備としてこの機能が必要だと考えられているためです。

NVDA 日本語版についても、こういう仕組みになったことを早く知っていただこうと考えています。

インストール時のアドオンの操作についてのメッセージは、日本語アルファ版では日本語に翻訳しました。
通常よりも早いタイミングで翻訳作業をしたので、不完全な部分があるかも知れません。

従来動いていたアドオンが「手動で有効化」すれば動くかどうかは、アドオンごとに状況が異なりますが、2019.1 で動いているとしても、アドオンそのものが更新されなければ、2019.4 や 2020.1 で動かない可能性が高いです。

新しい日本語アルファ版を試してもらい、どのアドオンで不都合なことが起きるかを調べながら、NVDA 日本語チームの取り組むべきことを検討したいと思います。

アドオン開発者のための補足

アドオン開発者のための公式の説明は developerGuide に書かれています。

https://github.com/nvaccess/nvda/blob/master/developerGuide.t2t

具体的には manifest ファイルに

minimumNVDAVersion = 2017.4
lastTestedNVDAVersion = 2018.3

のように記載します。
前者を「最小要件の NVDA バージョン」
後者を「動作確認済みの NVDA バージョン」
と日本語では表記しています。

未来のバージョン番号を 2019.2 のように書いてもエラーにはなりません。
(が、最新のアルファ版のバージョンにしておくべきという本家のMLでの議論あり)

2019.1 と書くと本家版 2019.1 とも互換性があり、NVDA 日本語版 2019.1jp とも互換性がある、と解釈される見込みです。
(日本語版でしか動かない、みたいなチェックは想定していません)

本家のコミュニティで公開されているアドオンのテンプレート
https://github.com/nvdaaddons/AddonTemplate
こちらには
updateChannel
という項目もありますが、これは本家の addonUpdater で使われる項目で、不要な場合は None にしておきます。

focusHighlight の buildVars.py も紹介しておきます。

https://github.com/nvdajp/focusHighlight/blob/master/buildVars.py

NVDAとアドオン開発者のための補足の補足

ユーザーには何の役にも立たないように見えるであろう「NVDA の Python 3 移行」ですが、NVDA の現在と未来の開発者が幸せになれる、というメリットが、めぐりめぐって NVDA のユーザーを幸せにする、という展望があります。

例えば、いままで NVDA が日本語環境でうまく動いていない不具合の多くは「Windows で日本語の文字コードが使われている場合だけで起きる問題」の見落としでした。

Python 3 への移行で、そのような不具合が起こりにくくなる、と私は期待しています。

おまけ:今年出演したポッドキャスト(再掲)

サイトワールド2018特集 第6回 NVDA日本語チーム(日本視覚障害者ICTネットワーク JBICT ポッドキャスト)

AccSell ポッドキャスト第140回: 「こういうもの俺自分で作らなくて良い時代になったんだ」

わしポ 9: Kinsai PyCon mini Hiroshima (nishimotz)

NVDAのブラウズモード

このエントリーは Webアクセシビリティ Advent Calendar 2018 の4日目の記事になります。

NVDA日本語チーム の西本です。ふだんは広島県広島市にいます。オープンソースのスクリーンリーダー NVDA の日本語対応に関わりながら、NVDA 日本語版のリリースを続けています。ウェブアクセシビリティ基盤委員会 WAIC WG2 にも参加しています。

今年は自分の会社 シュアルタ を設立しました。以前から NVDA に関わる研究や調査・開発にフリーランスの立場で関わっていましたが、今後は NVDA に関するコンサルティングや受託開発を、株式会社シュアルタでお受けするのでよろしくお願いします。

NVDAのブラウズモード

ブラウズモードさえなければ NVDA の操作は基本的に Windows の操作です。Windows やWebブラウザに備わっている機能の不足を補っているのがNVDAの「ブラウズモード」です。

一方でブラウズモードが理解できないと「Windows がおかしくなった」ようにさえ思えます。

NVDA のブラウズモードについては、講習会用の教材として(図がなくて申し訳ないですが)「NVDA日本語版ガイドブック」を公開しています。

ブラウズモードの理解に「フォーカスハイライト」アドオンが役立つという話は2016年の記事に書きました。

今年「アクセシビリティの祭典」にあわせて作った「NVDAチートシート」も「ブラウズモードの仕様をいかに可視化するか」が大きな目的でした。

NVDAチートシートの一部

11月にサイトワールド2018で開催した「NVDA体験会」でも、ブラウズモードの説明のセッションを担当しました。そのときに、他のスタッフから「最近の Skype は NVDA のブラウズモードで操作すると便利だ」と教えてもらいました。

ご存知のとおり、最近はデスクトップアプリを Web 技術(いわゆる Electron )で開発することが増えています。

NVDA では「ブラウズモードは Web コンテンツだけではなく PDF や HTML メールや電子書籍なども対象にしていて、それらをできるだけ一貫性のある方法で操作できる」ことを目指しています。

ここでは「Webアクセシビリティ」とはちょっと離れてしまいますが、ブラウズモードで覗いてみるとちょっと興味深いアプリを2つ紹介します。

Visual Studio Code 1.29.1

最初は Visual Studio Code です。

Visual Studio Code

Electron が使われていること、オープンソースで開発されていること、などが知られています。また、アクセシビリティに配慮されており、NVDA に対応しています。スクリーンリーダーで使いこなすのはなかなか大変と思いますが、まあ私も使いこなせてるとは言えませんね。。

VS Code には「スクリーンリーダー互換モード」のようなスイッチがあります。これが有効になっていないと、テキストエディタの行単位の読み上げがあまりちゃんと動きません。モードが自動切り替えに設定されている場合は、NVDAが動いているかどうかを判断して、モードを切り替えますか?みたいに聞いてきたりします。

スクリーンリーダー互換モードをずっと有効にしていると、行の折り返し表示が期待通りに機能しません。どうやら、論理行と物理行を一致させることを前提にスクリーンリーダー対応を実現しているようです。

さて、その設定ですが、Settings の画面の中にコンボボックスがあります。

フォーカスハイライトが赤くなるのは、ブラウズモードだからですね。。

Visual Studio Code の「アクセシビリティ サポート」設定

ブラウズモードなら「要素リスト」が使えるはずなので NVDA+F7 を押してみます。フォームフィールドの表示に切り替えると、

Editor Accessibility Support コンボボックス・折りたたみ on

のように、この設定項目が現れます。

Visual Studio Code の設定画面で NVDA の「要素リスト」ダイアログから「フォームフィールド」を表示

この要素リストで「ランドマーク」に切り替えると、「コンテンツ情報」「ナビゲーション」「メイン」のランドマークがあり、メインの中にさらに「Settings フォーム」という項目も見つかります。ランドマークの「フォーム」は解説に書いてあるけど、あまり見たことなかったです。。

Visual Studio Code の設定画面で NVDA の「要素リスト」ダイアログから「ランドマーク」を表示

VS Code はフォルダーを開くとその中のファイルを複数開いて切り替えながら編集ができます。そのファイルを探したり切り替えたりする画面要素はテキストを編集する部分の左側にあり、「エクスプローラー」という名前になっていて、ツリービューのような表示になっています。その状態で「要素リスト」を開くと、下記のような画面になります。

種別「見出し」では「開いているエディタ」「フォルダ名(その内容を表示できる)」「アウトライン(プログラミング言語のクラスやメソッドや変数の定義などをツリー表示できる)」の項目が見つかります。ということは、見出しジャンプできたり、要素リストから移動できるわけですね。。

Visual Studio Code のファイルエクスプローラーで NVDA の「要素リスト」ダイアログから「見出し」を表示

Skype 8.34.0.78

Skype for Windows も最近のバージョンは Electron で作られています

たしかに NVDA+スペース でブラウズモードとフォーカスモードに切り替わるし、テキスト入力のところに移動すると「ガシャ」と音がして、自動的にフォーカスモードに切り替わったりします。

Skypeチャット画面 全体がフォーカスハイライトの赤い枠で囲まれている

要素リストで「見出し」を確認すると、チャット画面の日付が見出しになっていました。この例では「2017年5月7日」と「今日」という2つの見出しがあります。

要素リスト「見出し」

ブラウズモードで H と Shift+H を押すと、日付の区切り線のようなところにジャンプできます。

以下は「2017年5月7日」に移動したところ。

Skypeチャット画面 日付2017年5月7日のところがフォーカスハイライトの赤い枠で囲まれている

以下は「今日」に移動したところ。

Skypeチャット画面 今日のところがフォーカスハイライトの赤い枠で囲まれている

Web コンテンツであれば「見出し」にはレベルがあって、レベル2の見出しには数字 2 を押すとジャンプできるのですが、この Skype チャットの日付は「レベル1から6」のどれにも当てはまらない「レベルなしの見出し」でした。いずれ詳しく調べてみたいと思います。興味深いですね。。

ブラウズモードで E を押すと「エディットフィールドにジャンプ」ができるので、この Skype のチャット画面では、チャット入力コントロール(ここに入力と書かれている場所)にジャンプできます。

Skypeチャット画面 ここに入力という箇所がフォーカスハイライトの赤い枠で囲まれている

文字を実際に入力するためにはフォーカスモードに戻す必要があります。

Skypeチャット画面 ここに入力という箇所がフォーカスハイライトの青い点線の枠で囲まれている

上下の矢印キーでエディットに移動するとフォーカスモードに自動的に切り替わるのですが、1文字ナビゲーションの E で移動すると、ブラウズモードのままになりますね。。

以上、ブラウズモードで Web コンテンツっぽい操作ができるアプリの実例を紹介しました。

仕事では iOS で WebView を使うアプリの開発もするのですが「Web 技術をアクセシブルに使う」と VoiceOver でだいたいちゃんと使えます。

見えないところも、きれいに正しく作れたらいいですよね。。

アプリやコンテンツのアクセシビリティ検証に NVDA を使ってくださる皆様、イベントのサポートや寄付などのご支援をしてくださる皆様、ありがとうございます。これからも NVDA 日本語チームをよろしくお願いします。

おまけ:今年出演したポッドキャスト

サイトワールド2018特集 第6回 NVDA日本語チーム(日本視覚障害者ICTネットワーク JBICT ポッドキャスト)

AccSell ポッドキャスト第140回: 「こういうもの俺自分で作らなくて良い時代になったんだ」

わしポ 9: Kinsai PyCon mini Hiroshima (nishimotz)

PyCon mini Hiroshima 2018 終了

PyCon mini Hiroshima 2018 が無事に終了しました。
有料イベントになったにも関わらず、60人以上の人にご参加いただくことができました。

私は実行委員長として、また企業・団体パトロンの株式会社シュアルタとして、そして「舞え!ひろしま Kaggler」講演者として、あわただしい一日でした。

まだまだ記録とか精算とか報告作成とかやっている途中です。

Togetter まとめ

いつものように最後にスタッフみんなでご挨拶した写真。

まだ広島で Python 流行ってないの?と言わせてるみたいなスローガンでしたが、今回は「広島で流行らせよう!」というテーマをすこしずつ実践できていけそうな、そんな一日でした。

今後ともよろしくお願いします。

アクセシビリティの祭典 2018 と NVDA チートシート

2018年5月17日(木曜)に神戸で開催される「アクセシビリティの祭典 2018」に、NVDA 日本語チームとして出展を行い、また「視覚障害を持つ方の最新事情」セッションに登壇します。

配布資料を準備していたのですが、もっと役に立つものを提供したいと思い、現在「NVDA Cheat Sheet」の制作をすすめています。

当日、会場でお披露目する予定で、それまで内容は公開しません。

基本的には視力のある人が NVDA の機能や操作体系をざっと把握できるような A4 サイズ1枚の資料です。
昨年のオープンソースカンファレンス広島で名刺サイズのカードを作って、ほんの少しだけ配布したのですが、どうやら A4 サイズなら、いろいろな説明が盛り込めそうです。

内容は、過去にまとめた 開発者のためのNVDA (2015) および 開発者のための NVDA (2017) の資料と、NVDA 日本語版ガイドブック で説明したことを踏まえて選びました。

目標は時代工房さんの JIS X 8341-3:2016, WCAG 2.0 早見表 なのですが、今回のイベントで配布しながら実演や説明に使ってみて、改良点を見つけて、すこしずつバージョンアップしていきたいと考えています。

セッションでは、18年前に「視覚障害者のためのキーボード練習ソフト」の開発を通じて知り合った 園 順一さんとひさしぶりにご一緒させていただきます。
お話をするのが今から楽しみです。どうぞよろしくお願いします。

NVDA 行く年くる年

この記事は Web Accessibility Advent Calender 2017 の10日目の記事です。

オープンソースの Windows 用スクリーンリーダー NVDA に関するこの1年の活動を振り返るポエムで乗り切ろうと思ったのですが、ゆうべ広島フロントエンド勉強会で喋ったら気が変わってしまいました。

11月11日 JAC Vol.1 の講演「アクセシビリティ検証ツールとしてのNVDA入門」での失敗をフォローします。

決済サイト試作の入力バリデーション画面例

アクセシブルな決済システムの試作

アクセシビリティで難しそう、めんどくさそう、スクリーンリーダーで実際に検証しないと不安なポイントはやっぱりセキュリティだろう。

試してみたくなったのがクレジット決済 API を使うサイトの開発だった。

11月11日に見せようとした試作サイトは、以下のような方針で開発した。

決済サービスの選択

  • テストモード、つまり、ダミーのカード情報を送信して実際にWebアプリのテストができること
  • カード情報を Web アプリが保存しなくてよい、できれば受け取る必要すらないこと(情報漏洩のリスクを回避)
  • Python から簡単に使えること(個人的な好みです)

実際に使った決済サービスの仕様

  • JavaScript ライブラリがあり、ブラウザが決済APIサーバと直接通信を行い、カードと紐付いたトークン情報だけが返ってくる
  • そのトークン情報を Web アプリが受け取って、実際の課金を行うことが(Python ライブラリから)できる

つまり、ブラウザの中で「ユーザーにカード情報を入力させて、決済サーバに送って、カードのトークンを受け取る」という処理を、画面遷移せずに完結させたい、ということになる。

これは、セキュリティのために「動的なコンテンツを作らざるを得ない」ということで、アクセシビリティの題材としてはよさそうだと思った。

11月11日の前に作っていたもの

コードの抜粋はこちら

環境は Google App Engine for Python + Flask

(1) ログインする前の画面

ログインしてください、という表示になり、ログインのリンクがある。
実際にログインで使っているのは Google アカウント認証。

これが使いたかったので GAE を選んだ。本人確認されたユーザーのメールアドレスを取得。Google のログイン画面はスクリーンリーダーでちゃんと使えるはず。

ログインする前とログインしたあとの画面は Jinja2 (Python のテンプレートエンジン)で分岐している。

(2) ログインした直後の画面

ログインすると最初の画面が入力フォームになっている。

上から順に、以下のものがある。

  • テキスト「カード情報を入力して「確認」を押してください」
  • 4個の入力フィールド:カード番号、有効期限(年)、有効期限(月)、CVC番号
  • 「確認」ボタン(有効状態)
  • 「購入」ボタン(無効状態)
  • 「キャンセル」ボタン(無効状態)

ただし、デモなので、入力フィールドには決済サービスのテスト用カード番号があらかじめ入れてある。

確認ボタンを押すと URL が遷移するのではなく、JavaScript の処理が実行されて、コンテンツが動的に変化する。

(3) カード情報が正しくない場合の「確認」結果

「カード番号が正しくありません」などが表示され、入力フィールドの修正と「確認」ボタンしか有効にならない。

何が正しくないかというメッセージはテキスト( aria-live=”assertive” 属性の div )として表示され、スクリーンリーダーで読み上げられる。

つまり動的コンテンツだがバリデーション結果をアクセシブルに提示できる。

(4) カード情報が受理された場合の「確認」結果

「カード情報が確認できました。「購入する」を押すと***円のお支払いが完了します。」

のように表示され、「購入」ボタンと「キャンセル」ボタンが有効になり、入力フィールドと「確認」ボタンが無効になる。

購入ボタンを押すとカードのトークンが submit されて URL が遷移する。Python アプリで決済 API をたたいて結果を取得、次のページに「購入完了」みたいな表示を出す。

「キャンセル」を押すと、入力フィールドの値がふたたび変更可能になる。

本番でやったドジなこと

確認ボタンを押して入力フィールドが無効になった状態で、「じゃあ今度は値をわざと変更して正しくない入力内容にしてみましょう」とか言いながら、無効になっている入力フィールドのテキストを書き換えようとしてうまくいかず、デモを中断してしまった。

そのあとで考えたこと

aria-live=”assertive” とか、フォーカスの制御とか、invalid とか、いろいろ盛り込んだのだが。。

そもそも「自分がうっかり間違えるような UI 設計がよくない」と考え直した。

最近作り直したもの

(1) ログインする前の画面

ログインしてください、という表示になり、ログインのリンクがある。

(2) ログインした直後の画面

ログインすると最初の画面が入力フォームになっている。

上から順に、以下のものがある。

  • テキストA「カード情報を入力して「確認」を押してください」
  • 4個の入力フィールド:カード番号、有効期限(年)、有効期限(月)、CVC番号
  • 「確認」ボタン(有効状態)

(3) カード情報が正しくない場合の「確認」結果

テキストA「カード番号が正しくありません」などが表示され、入力フィールドの修正と「確認」ボタンが使える状態のまま

(4) カード情報が受理された場合の「確認」結果

  • テキストB「カード情報が確認できました。「購入する」を押すと***円のお支払いが完了します。」
  • 「購入」ボタン
  • 「キャンセル」ボタン

その他のものは非表示になる。

「キャンセル」を押すと、テキストAと入力フィールドだけの表示に戻る。

振り返って思うこと

なんのことはない、これはひとつの HTML ファイルにダイアログAとダイアログBがあって、交互に表示・非表示になる、一種のモーダルである。

たぶん最初の「非表示・無効」だらけの画面を作っていたときには、「この操作を実際に行うと、次にどういう段階に進むのか」みたいな見通しを伝えたかった。
だから、あとから有効になるけどいま無効なものをたくさん作ってしまった。
その流れで「さっきは有効だったけどいまは無効になった」ものも、たくさん残してしまった。

だが、けっきょくのところ「ひとつひとつの段階で迷わせない」「無関係なものを見せない」ということのほうが大事だったと思われる。

カード情報が確認できたときに、もういちどカード番号を表示する、みたいなことは、本当はやった方がいいのか、やっぱり不要なのか。。

こまかいこと

今回のデモでは invalid の判定には2種類ある。

(1) HTML の required と pattern を使う処理
(2) 決済APIサーバーのエラーメッセージに基づく処理

後者の場合には、JavaScript のコールバックで

<div id="input_guide" class="alert alert-primary" role="status" aria-live="assertive"></div>
<div class="col-12">
  <label for="card_number">カード番号</label>
  <input type="text" id="card_number" class="form-control" aria-describedby="card_number_help" value="5555555555554444" required aria-required="true" pattern="[0-9]{13,16}" />
  <small id="card_number_help" class="form-text text-muted">半角数字 <span aria-hidden="true">省略できません</span></small>
</div>
if (response.error.code === 'invalid_number') {
  $('#card_number').attr('aria-invalid', true).focus();
  $('#input_guide').text('カード番号が正しくありません').addClass('alert-warning').removeClass('alert-success');
}

みたいなことをする(jQuery を使っている)。

JavaScript 2行目の最後の .focus() がなければライブリージョンの「カード番号が正しくありません」が読み上げられる。

一方で、この .focus() をつけてしまうと card_number 要素の読み上げしか聞くことができない。

NVDA 2018.1jp-beta-171206x + Firefox ESR 52.5.2 でスピーチビューアを使って確認すると:

ブラウズモード
カード番号が正しくありません 
カード番号  エディット  正しくない入力内容  必須  オートコンプリート  半角数字 省略できません
55555555555544 選択
フォーカスモード

つまり、ライブリージョンの読み上げの直後にフォーカス位置の読み上げイベントが発生して、直前の読み上げを止めてしまうのだ。

(「フォーカスモードとブラウズモードの切り替えを音で報告」はチェックなし。後述の追記2を参照のこと)

実は最初のバージョンはこれが気に入らなくて(だって live region のデモにならないから)フォーカスを移動しなかったのだが、考えてみるとライブリージョンを読むことよりもフォーカスをエラー箇所に移動してあげることのほうがずっと親切で、ユニバーサルな気がする。

さらに、フォーカスを読み上げるときに「正しくない入力内容」もちゃんと読み上げているのだ。

本当にスクリーンリーダーで検証するべき「アクセシビリティのディティール」というのはこういうことなんだろうな、と思っている。

ここから追記

追記:NVDA の live region の実装がおかしいのではないか、と言われそうな気もするので(そうかも知れないけど)ちゃんと制御できるケースも紹介しておく。

$('#card_number').attr('aria-invalid', true);
$('#get_token_btn').focus();
$('#input_guide').text('カード番号が正しくありません').addClass('alert-warning').removeClass('alert-success');

こんなふうにボタンにフォーカスを移動して、直後に live region の内容を更新すれば、「カード番号が正しくありません」をちゃんと聞くことができる。
(このテクニックは最初のバージョンで使っていた)

追記2:さらに調べたら、NVDA の「フォーカスの変化を追跡する自動フォーカスモード」をチェックなしにすると、エディットにフォーカスが移動したときに live region を最後まで読み上げて、それからフォーカスを読み上げるようになった。

ボタンとエディットで挙動が違うのだから、もしやと思ったら、やっぱりそういうことだったか。。

おことわり

勘のいい人は shop.nishimotz.net というサイトを見つけたかも知れませんが、このサイトは「本当に何かを販売して決済を行うサイト」に作り替える予定の場所です。

明日は tosssaurus さんの「社内じんわりアクセシビリティ普及活動報告」だそうです。お楽しみに。

JAC vol.1 & NVDAワールド 2017 & NVDA開発者会

もんどさんのブログを読んで、私も書くことにしました。

Japan Accessibility Conference

Japan Accessibility Conference vol.1
2017年11月11日(土曜)
会場:ヤフー株式会社 紀尾井タワー セミナールーム

にて「アクセシビリティ検証ツールとしてのNVDA入門」という講演をします。

2015年に「Web製作者のためのNVDA入門」というイベントの講師をしたのですが、今回はハンズオンでもなく、時間も限られているので、いちおう下記のような予定です。

視覚に障害があるユーザーがPCを使う上で不可欠なものがスクリーンリーダーです。
無料で利用できる Windows 用スクリーンリーダー NVDA をご紹介します。

  • スクリーンリーダーとはどのようなものなのか、
  • スクリーンリーダーで Web ブラウザをどう操作するのか、
  • アクセシビリティ検証ツールとして NVDA をどう使えばよいか

をご説明します。

この講演は5月ごろから打診をいただいていたので、このイベントにあわせて NVDA 2017.3jp に導入した新機能もありますし、お馴染みの FocusHighlight アドオンも(RubyKaigi 2017で実演に使いましたが)新しいバージョンをリリースしたいと思っています。

なので、11月11日に話を聞いてくださった人には、これまでよりもスムーズに「アクセシビリティ検証ツールとしてのNVDA」をお試しいただけると思います。

(おわかりのとおり WordPress を使っているので、私のセッションの裏番組も気になります。。)

NVDAワールド2017

一方で、前述のイベントがこの日程になることがわかっていたため、11月1日から3日まで開催されるサイトワールドの翌日ではなく前日に開催することにした

NVDAワールド2017
2017年10月31日(火曜)
会場:日本マイクロソフト
(東京都港区港南2-16-3 品川グランドセントラルタワー)

は参加申し込みの締め切り(10月23日)まであと2週間になりました。

こちらの私のセッションは「ビジネスツールとしてのNVDA」というテーマにしました。
前述のカンファレンスの発表と内容が重複しない、はずです。。

概要:2013年に NV Access が視覚障害者コミュニティの支援で PowerPoint 対応を実現して以来、NVDA は視覚に障害がある人の就労手段としてグローバルに支持されています。

本セッションではビジネスツールとしての NVDA の機能を紹介しつつ、最近の NV Access や開発コミュニティ、 NVDA 日本語チームの活動を報告します。

NVDA の Microsoft Office 対応や Windows 10 対応の最新情報を、この機会にまとめてお伝えしたいと思います。

NVDA開発者会

最後に、NVDAワールド2017開催日の午前に行う予定の「NVDA 開発者会」について補足します。

いま NVDA 本家の開発コミュニティではいろいろな新しい動きがあって、NVDA の開発に興味がある人に伝えるべきことはとても増えています。

2017.4 で Windows XP/Vista 対応を打ち切ることが決まり、新しい動きは本格化しました。

開発に使われている Visual Studio のバージョンを 2015 から 2017 に上げること、各種の依存パッケージを更新すること、そして NVDA を Python 2.7 から Python 3 に移行させる作業が、これから2019年ごろまでに行われます。

今回の開発者会では、まず Windows 環境で Python 2.7 と Python 3.6 を共存させる方法をご紹介します。
これから1年か2年くらいの間 NVDA に関わるために必要な知識だと思うからです。

それから、おそらく当日までに本家の移行が完了しているはずなので、Visual Studio 2017 Community を使う前提で NVDA (本家版および日本語版)のソースコードからの実行方法やビルド方法を紹介する予定です。

日本語に対応していないことが課題になっている eSpeak や libLouis など音声合成エンジンや点訳エンジンなどの現状、ソースコードからの実行やテストの方法、開発コミュニティの動向などの情報も、時間の制約はありますがお伝えしたいと思います。

点字ディスプレイなどふだん私が検証できない機材は、その場に持参いただければ、不具合の調査などができると思います。

開発者会には NVDAワールド 2017 の connpass 申し込みで「開発者枠」でお申し込みください。