前提
ほとんど同じ内容をQiitaに投稿している。こちらはスクリーンリーダーユーザー向けに、もちょっと情報を入れてある。これを読んで間違いとかもっと良い方法とかあったら、このページのコメントとかTwitterとかで教えていただけるとうれしい。
この記事は、画像の代替テキストに関する記事である。見えなかったり見えにくかったりする人の場合、多くは
NVDA
のような「スクリーンリーダー」と呼ばれるソフトウェアを利用してパソコンを使う。そのスクリーンリーダーの挙動とウェブサイトのちょっとした作り方の問題で起きた、かなり致命的な問題について書いている。
この記事を読んでいるウェブ制作に関わっているエンジニアの方、alt属性の使い方には気をつけてほしいなと願う。
背景
HTMLで画像を表示するには基本こうだ。
<img src="hogehoge.jpg">
しかし、見えなかったり見えにくかったりする人の場合、これではどんな画像が表示されているのかを知ることができない。そこで登場するのがalt属性だ。
<img src="hogehoge.jpg" alt="立っている3人">
ところが、世の中には説明が不要な画像というのもある。というか、スクリーンリーダーには無視してほしい画像だ。このような場合、alt属性を空にする。
<img src="hogehoge.jpg" alt="">
モバイルSuicaのログインサイトの問題
このサイトにはreCAPTCHAというもっと大きな問題が会って本来ならばこっちを改善すべきなんだけど、それを言ってても今すぐログインできるわけじゃないので、とにかくこうしたらログインできましたよっていう話をする。推奨されるものでもないし、これでできた！なんて言うつもりもないんだけど、問題提起の一つとしたい。
ログイン環境など
試してみたい人のために、私が使っている環境を先に書いておく。
- Windows 11 version 22H2 (OS build 22622.590)
- Google Chrome Version 105.0.5195.102
- NVDA 2022.2.1JP
- JAWS 2022.2204.40 (jpn)
試されるときは、NVDAをインストールするのが良いと思う、なにしろ無料だから。
ざっくり
一部を抜粋する。
<div class="igc_TrendyCaptchaImageArea">
<img src="WebCaptchaImage.axd?guid=8aad8d4c-c04e-4fd2-8946-7b375dd72656"
title="" alt="" height="60" width="175" class="igc_TrendyCaptchaImage" style="display: none !important;">
<img src="data:image/png;base64,....."
style="background-image: url("chrome-extension://bjjgbdlbgjeoankjijbmheneoekbghcg/images/eye_w32x16.gif") !important;
background-repeat: no-repeat !important; background-position: 0px 0px !important;">
<input type="hidden" id="WebCaptcha1__editor_clientState" name="WebCaptcha1__editor_clientState" value="|0|01||">
<input title="表示されている文字の入力" id="WebCaptcha1__editor" autocomplete="off" name="WebCaptcha1__editor" maxlength="20"
class="igc_TrendyCaptchaInput igte_TrendyEdit igte_TrendyNullText"
type="text"
style="border-color: black; width: 170px; background-image: url("chrome-extension://bjjgbdlbgjeoankjijbmheneoekbghcg/images/pen_w.gif") !important; background-repeat: no-repeat !important; background-position: 0px 0px !important;"
alt="表示されている文字の入力">
</div>
このソースでは、スクリーンリーダーは画像があることを認識できていない。要素は2つあるみたいで、1つ目はそもそも表示されていないのか？2つ目はalt属性すらない。
ではなぜ画像を認識してほしいのか。認識できてれば、画像の上で右クリックすれば保存ができるかもしれない。保存ができれば、
- 画像を保存して、例えば友人に送って読んでもらう。スクリーンショットだと個人情報を知られるおそれがある。
- 少しでも見えるのならば、画像を保存して拡大して表示して自分で読む
みたいなことをできる可能性があるからだ。
問題点
言わずもがなだが、reCAPTCHAがアクセシブルであればよい。例えば
GoogleのreCAPTCHA
とか、
hCaptcha
などのサービスを使ってくれればよかった。あるいはそのようなサービスを設計してくれてもよい。が、そうも言ってられない。とにかくユーザは1秒でも早くログインしたいのだ。
次の問題は、画像に対する代替テキストの意味をおそらくモバイルSuicaのウェブサイト開発者側が理解していない。これは利用者や分かっている人たちからの啓発活動も重要であるし、心ある人たちが頑張ってくれている。
次はスクリーンリーダーだ。画像を無視するかどうかの最終判断はユーザがやるべきだ。困ったときにまさか開発者ツールを使って書き換えろなんて普通は言えない。殆どの場合無視してても良いが、このようなケースでは無視できない。
ということで、各所でこの問題について考えてもらえると嬉しいなと思う。
どうやって突破するか
自力で突破したい人でおそらく最も簡単なのは、Chrome拡張の
Rumola – bypass CAPTCHA
などを導入することだ。これなら、勝手に画像を解析してくれて、それっぽいフィールドに結果を入力してくれる。
JRのサイトでは、下手にキー操作すると入力してくれた結果を消してくれちゃうので、入力完了の音声通知があったらそ～～っとブラウズモードにして入力された文字を確認して一瞬覚えておく。
で、メールアドレスとかパスワードとかを入力した後に、覚えておいた結果を入力すればログインできる。
どうしても画像にNVDAのブラウズモードでアクセスしたいのならば、開発者ツールとかを使って、画像のalt属性に”reCAPTCHA”とか適当な文字列を入れてやる。これでNVDAでも画像の存在がわかるようになる。たぶんこれで保存できる。
画像が保存できたならば、友人に送って読んでもらうもよし、自分で拡大してなんとかすもよし、印刷してオプタコンでもよし！
最後に
できればこんなことで悩みたくはないよねえ。誰のためにサービスをやっているのか、誰からなにを守りたいのか、もう少しバランスよく考えてほしいな。泥棒に入られたくないからって、全面コンクリートの部屋に住むのはいやでしょ？窓をつければセキュリティレベルは下がるんですよ、でも殆どの部屋には窓があるのです。