スクリーン・リーダーでNoteを試す：アカウント設定編
以下、ブログに掲載した記事をそのまま転載します。
これまで、Noteに記事を投稿する場合と、投稿された記事を読む場合について、スクリーン・リーダーでの使い勝手を紹介した。
今回は、アカウント設定の画面、特にチェックボックスに注目する。
例によって結論から書くと、全然ダメである。
そして末尾に実際に使っている様子を張り付けておく。
アカウント設定画面への動線を見つけられるか？
そもそも、まずアカウント設定画面への動線を見つけられない人がそれなりにいそうな気がする。
視覚情報無しに説明するのは難しいのだけど、画面の先頭に近い所にある、NVDAでは「クリック可能ボタン」と読むボタンを押して出てくるメニューの中に、この画面へのリンクがある。
経験知が少ないと
1. このなんだかよく分からないボタンを押してみようと思わない可能性が高い
2. ボタンを押した後に、メニューみたいなリンクのリストが表示されたことに気づかない可能性がある
といったところが難しさにつながると思う。
解決策としては
1. ボタンに「メニュー」なりなんなり、適切なテキスト・ラベルを付ける
2. ボタンが押されたらフォーカスを最初のメニュー項目に移動する
あたりが考えられるだろう。
チェックボックスが使えない
さて、それで今回のお題、チェックボックス。
アカウント設定画面のほとんどの項目がチェックボックスで制御できるものだから、これを使えるかどうかは重大な問題だ。
そもそも存在が分からない
が、そもそもチェックボックスがそこにあることがスクリーン・リーダーでは分からない。
普通に読み上げさせていくと、例えば
メール通知設定
フォローされた時
クリック可能
と読み上げるだけだ。
文脈からこの「クリック可能」と読まれる部分にチェックボックスみたいなものがあるのだろうと推測するしかない。
チェックの状態が分からない
「クリック可能」と読むだけだから、今このチェックボックスがチェックされているのかどうかも分からない。
普通のチェックボックスなら、スペースバーを押せば状態が変わって、その結果をスクリーン・リーダーで確認することも当然できる。
でも、この「クリック可能」野郎はスペースバーを押したところで「クリック可能」としか言わない。
普通のチェックボックスとは違う手法で実装されているのだから、スペースバーで状態が変わるという確信が持てない。
だから、自分の望む設定ができたかどうかをこの画面上で知ることはできないのだ。
iOSアプリではどうか
NoteのiOSアプリで設定画面を見ると、設定できる項目はWeb版とは異なっているが、一部の設定についてはスマホからも変更できることが分かる。
ところが、この画面のチェックボックス、VoiceOverが読み上げてくれる状態が必ずしも正しくないらしく、結局全く宛にできないというのがとりあえずの結論だ。
チェックボックスを無理矢理操作する
ではあきらめましょう、というのが普通だ。
僕もよっぽど使いたいサービスとかでない限り、自分の好みの設定をするのにも苦労するようなサービスを使い続けようとは思わない。
ちなみにNoteについては、この記事を書くことにしたので仕方なくあきらめずに試してみたという感じだ。
ともあれ、以下のような方法で、チェックボックスの操作をして、状態を確認することは可能だ。
操作はスペースバーで可能なこともあるらしい
いろいろ試した結果、スペースバーでチェックの状態を変えられることも多いらしい。
ところが、何度か操作していると、状態が変わらないこともよくある。
そういう場合はNVDAキー（デフォルトはIns）+テンキーのEnterを押すと変わる場合もあるみたいだ。
でも結局、確信を持ちたければ以下に書く方法で確認するしかないだろう。
チェックボックスの実態を探す
さて、こういう状況になってしまうと、ブラウザーに搭載されている開発者ツールを使わないとどうしようもないと思う。
僕は慣れているのでGoogle Chromeの開発者ツールで試したけど、Mozilla Firefoxの開発者ツールでも同様のことはNVDAで可能なはずだ。
こういう場合に僕がまずなにをするかというと、このチェックボックスの実態を探すという作業だ。
開発者ツールで、先の「フォローされた時」というテキストの周囲を探ってみる。
すると、チェックボックスを表示するのに使われるinput要素を発見した。
そしてこのinput要素には、true-value="true"というのがあるので、おそらくはチェックされている状態なんだろうと推測する。
さらにこの部分のスタイルを確認すると、display:noneが指定されている、つまり非表示になるようになっていることが分かる。
そこで、CSSを変更してdisplay:noneを削除してから、開発者ツールを閉じてみる。
すると、ページ中のすべてのチェックボックスが、スクリーン・リーダーにもチェックボックスとして認識される状態に変わっている。
そして「フォローされた時」の直後にあるチェックボックスはチェックされていることが分かる。
そこで、このチェックボックスの上でスペースバーを押してチェックを外してみる。
その上で再び開発者ツールで確認してみる。
ところが、確かにスクリーン・リーダーはチェックが外されたと認識していたのに、input要素のtrue-valueはtrueのままのようだ。
これでは本当にチェックが外れたかどうか確信が持てない。
確かに設定を確定するための送信ボタンがない画面だし、そもそもチェックボックスは非表示なので、このinput要素の属性値がどうなっていても、あまり意味はないのだろう。
などということを、Web技術を意識しない一般的なユーザーは考えない。
それであれこれ試した結果、問題のinput要素の1階層上にあるdiv要素のclass属性の値が、チェックの状態によって変わっているらしいことが分かった。
チェックが付いているときには、is-checkedという値が追加されているようなのだ。
おそらくはこの値の有無で、「クリック可能」と読み上げられた領域に表示する画像を切り替えるようなCSSになっているのだろう。知らんけど。
ということで、開発者ツールを使えば、このチェックボックスは操作できる。
つまり、開発者ツールを使わないと操作できない。
結論
普通は使えない。
以上
おまけ：「だれもが」っていうこと
ところで、最近「noteのミッション・ビジョン・バリュー」というのを見つけた。
組織にとってミッションは大事！！
早速読んでみると、ミッションとして
だれもが創作をはじめ、続けられるようにする。
とある。
テキスト投稿の難易度の高さ、設定画面の使えなさなんかを考えると、スクリーン・リーダーのユーザーは想定されているとは思えない。
だれもがと高らかに言ってるのに。
貴方は「だれもが」に自分が含まれていないと感じたことがあるだろうか？
僕はある。
「だれもが」ってそんなに軽い言葉じゃないんだぜ。
ちょっと言い訳
なんてことを書くと、「おまえの勤務先のサービスはどうなんだ！？」と怒られそうなので、少しだけ言い訳めいたことを書いておく。
僕の勤務先でも、ビジョンの中に「だれでも」という言葉が入っている。
だから、スクリーン・リーダー・ユーザーとしての僕にとって使いにくいサービスが存在しているという事実については、すごく大きな問題だと思っていて、僕自身は徐々にそこを改善できるようになにができるのか、日々考えながら仕事をしている。
社内に協力してくれる人も増えてきている感触もあるので、時間はかかるかもしれないけど、少しずつ改善を進められると確信している。
外から見てもそれが明らかなように、常に情報発信にも取り組んでいるつもりだ。
時に厳しい目で見守っていただきたい。
では、最後に今回の一連の操作の様子をどうぞ。