昨日、アクセシビリティ情報サイトAccSellさん主催で行われた『ユーザーと一緒に試してみよう! ～あの○○はどこまで使えるのか～』という大変有意義なイベントに参加してきました。内容は、
- 最新版Windows10に搭載されたアイトラッカー（視線追跡装置）のデモ／体験
- 全盲ユーザーがスクリーンリーダー（テキスト読み上げソフト）を用いてECサイトでお買い物をする様子のデモ
- 弱視ユーザーがWindowsの画面反転や拡大機能を用いてECサイトでお買い物をする様子のデモ
となっていました。特に視覚障害者のお二方はご自身がWeb技術に精通しており、「アクセシビリティ対応はこうあるべき」という解説も交えながらで大変参考になりました。日本を代表するECサイトを視覚障害ユーザが利用してどんなことが起きていたか簡単に振り返ってみたいと思います（それぞれ当該サイトは普段ほとんど利用したことがない、ということでした）。ちょっとWeb制作者向けの用語が飛び交うかも知れませんがご容赦ください。
■全盲の中根さん（AccSell）がバレンタインのお返しマカロンを探す
スクリーンリーダー（以下リーダー）はNVDAというフリーのWindows向けソフトが使われていました。まずなにが辛いって、トップページで「マカロン」とワードを入れて検索した時に、上位5件は広告商品が占めます。それはまぁそれで商売なので仕方ないところはあるのですが、そもそもマカロン関係ない椅子とかカラーコンタクトとかが挙がっています。晴眼者向けには背景色などを微妙に変えてたり、小さく「広告」とか「PR」とか書いてあるので、わかっている人は普段からさくっと読み飛ばしているでしょう。ところがこれがスクリーンリーダーだとわからないんですね。もちろん全ての文字を読み上げさせて聞いていけば気付けるんでしょうが、効率のために見出しタグのついたところのみを飛び石的に読んでいくので、小さい文字は読まれることがない。結果として「マカロン」で検索したのに椅子だのカラコンだのの見出しがいくつも出てくる。これはわかってないとちょっとした恐怖だろうなと思いました。
また初回ユーザ登録のフォームも埋めて見せてくれたのですが、よくあるCAPTCHA認証を検出すると有料プラグインが反応してなにやら英語でしゃべりだします。一部のCAPTCHA認証だと視覚障害者向けに音声を読み上げてくれるものもありますが、それ以外のものも含めてなのか、ともあれ対処してくれるプラグインがあるようです。しかし買い切りではなく回数あたりいくらという課金モデルなんだそうで、視覚障害者はCAPTCHA認証使う度にお金を払っているのか、ということを知りショックでした。CAPTCHAは不正利用防止に現状仕方ない面もあるのですがしわ寄せが障害者に行っているというのが悲しいですね（悪いのはCAPTCHA認証を採用したサイトではなくスパマーです）。
クレジットカード番号欄でよく4桁ずつ4枠にわかれていて、親切にも数字を4桁入れるとフォーカスが次の欄に自動遷移するものがありますが、あれは見えてない人にとっては混乱の元だそうです。また読み仮名欄に「かな」と書いてあった場合、リーダーは「かな」と声で読みますがそれだと「かな」なのか「カナ」なのか区別がつかない。そういう時は別途「詳細読み上げ」という機能を有効にするれば「カナ（カタカナ）」とどう書かれているかも含めて読み上げてくれるそうですが、最初から明示してある、もしくはそもそも平仮名でも片仮名でも受け付けるようになってれば済むことですよね。各種注意書きも大抵は欄の後ろに書かれていて、面的に俯瞰することができないリーダーでは、欄に記入して次へ進む時に気付く、というのもあるあるだとか。そもそも記入イベントでトリガしてJavaScriptで表示したエラーメッセージなのか最初から出ていたものなのかも区別が難しい。これらは知ってさえいればちょっとした配慮で直せることも多く、こういうした情報はもっとWebデザイナーの間に知れ渡るといいなと思います。
■弱視の伊敷さん（Cocktailz）がバレンタインのお返しマカロンを探す
続いて弱視の人はどうしているかですが、まず弱視の方は白地に黒よりも黒地に白文字の方が眩しくなくて見やすいという方が多く（伊敷さん曰くそうでない方もいるとのこと）、画面を反転させます。私も夜ベッドにもぐってスマホ読書をする時に反転機能を使うのでよくわかりますが、これ写真の色味も全部反転してしまうので挿絵とかヒドいことになるんですよね。パステルカラーのマカロンもみんな真っ黒や真っ青で食欲わかない色味になってました（笑）。ちなみにiOS11でスマート反転という写真やイラストだけは反転しないようにするアクセシビリティ設定が追加されましたが、あれもまだまだ機能しない場面が多い様に思います。制作者側で「これは反転しなくていい部分」というタグ付けが必要だったりするんでしょうか。Webの世界でもそういう技術や配慮が普及するといいですね。
次に視力が弱いということは識別できる解像度が低いということなので、とても大きく拡大しないとなにが見えているのか判別することができません。磨りガラス越しに見ているようなものでしょうか。伊敷さんの場合は500%〜600%くらいの拡大率をよく使うようです。逆に言えば一度に見える範囲がとっても狭いということです。商品が決まった後、カートに入れるボタンを見つけるまでに大変苦労されていました。ECサイトは関連広告や商品アピールを盛り込みまくってページがとんでもなく長くなることが多く、我々でも縦スクロールが面倒くさいと感じることが多々ありますが、その苦労が縦横で指数関数的に増大するのかなと。
また入力フォームでは枠線の色がちょっとでも薄くなってるともう見えないということです。先のクレジットカード欄を例にすると、例えばこんな画面があったとします。
これはSafariのデフォルトスタイルで枠線が薄いグレーですが、カード番号欄が４つあるので４桁ずつ入れればいいんだな、というのは我々は瞬時に理解できます。しかし、もし枠線が見えなかったらこうです。
フォーカスが当たってテキストカーソルが点滅している枠だけがかろうじて見えます。実際伊敷さんもテキストカーソルで判別していると言われてました。「コントラストが低いものは読みづらい以前に存在自体に気付けない」という指摘が刺さりました。「なにかある」ということ自体に気付けないと「そこをもっと拡大してみよう」とすら思わない、ということですね。
あと、WindowsもMacも現段階のOSレベルの画面拡大機能は単純なビットマップの拡大です。Macではアンチエイリアスもかけられますがさほど有効ではないように見えます。つまり小さい文字はガタガタに潰れてしまっていて、せっかく拡大しても解像度が上がらないということになります。ブラウザーの拡大機能ならばフォントは綺麗に拡大されるのにそちらは使わないのか聞いてみたんですが、やはりメーラーとか他のソフトもまとめて利用するので、ブラウザの中だけ拡大できてもあまり使いやすくはないようです。ここらはOSレベルの問題で個々の開発者やデザイナーがどうにかできるものでもないかも知れませんが、難しい課題だなと思いました（たぶんレイアウトを保ちつつフォントサイズを変えて再レンダリングするのはとても根が深いことなんでしょう。ブラウザでは改行位置とか変わっても良いという前提なのでできてるんじゃないかと）。
■ページ全体の俯瞰しやすさが大切
両者を通じて感じたのは見知らぬサイト（ページ）のレイアウトを把握するのはとても負荷が高く時間がかかる作業だということです。 目を瞑って全ての内容を頭から読み聞かせられたり、手のひらで筒を作ってそれを覗いた視界だけでページを閲覧することを想像してみると良いでしょう。なので、画面のここにはこういうことが書いてあるというガイドとして見出しなどの設計がとても重要だなと思いました。リーダーで特定の見出し階層だけ飛び石で見ていくので、見た目の文字サイズだけでなくH1〜H6タグの論理的な使い分けなどセマンティックなマークアップも非常に重要です（当日記もすごく昔の記事にはいきなりH3から始まってるものが残ってる気がします。ごめんなさい…）。
ともあれ、新規サイトへの対応負荷が高いということは、逆に一度慣れたサイトにロックインしやすいということでもあります。アクセシビリティ対応するとそういうお客さんのリピートを誘えますよ！とアピールしておきたいです。
また最後に中根さんが言われていましたが、今回のお二方はあくまで例としてとらえて欲しいということです。同じ全盲、弱視でも症状も違えば対処方法も違うのだと。このお二人は比較的プロい方達で、実際にはこの何倍も時間をかけてる方、そもそも諦めている方もたくさんいるであろうことは留意しなければならないでしょう。