視覚障害者のウェブ利用の誤解
こんにちは、ザ・ディープダイブです。さて、今回はですね、視覚に障害のある方が、インターネットをどう使っているか、というテーマで
えーと、結構こうだろうって思い込みありますよね。そういう、まあ、迷信というか、誤解について掘り下げていきたいと思います。
元にしたのは、ある開発者さんのブログ記事なんですけど、実際にスクリーンリーダーを使ってみた体験、とか
ウェブエイムの調査データ、あとユーザーさんのコメントとか、いろいろまとまってて、今回はこの記事からですね
ウェブアクセシビリティについて、えー、もしかしたら皆さんの常識を覆すような、そんなポイントを探っていきます。
あの、良かれと思ってやっていることが、もしかしたら、うーん、逆効果になっているかもしれないと、そういう可能性ちょっと怖いですよね。
まず最初のポイントからいきましょうか。リンクのタイトル属性、ありますよね。これ、スクリーンリーダーは読み上げられるって思われがちですけど、実際はどうなんですか?
あー、それよく言われますね。でも、えーと、実は多くのスクリーンリーダーはですね、標準の設定だと、そのタイトル属性って読み上げないんですよ。
えー、そうなんですか?
この記事書いた開発者の方も試してみて結構驚いたみたいで、だから、リンク先の情報っていうのはタイトルに頼っちゃダメで、ちゃんとリンクテキスト自体で明確に伝える必要があるということなんですね。
なるほど。
タイトルに重要な情報を入れちゃうと、読まれなかったりとか、あとタッチデバイスだとそもそも表示されなかったりとか、かえって情報が伝わらないリスクがあると。
HTMLの専門家でジェフリー・ゼルドマンさんって方が、ダメ使っちゃダメって強く言ってるのもそういう背景なんですよ。
なるほど。じゃあリンクテキスト自体をこちらとかじゃなくて、思わぬくりのこの上詰まりみたいに具体的に書く方がよっこど親切ってことですね。
まさにおっしゃる通りです。それが直接的で一番確実です。
ふむふむ。
じゃあ次に、これも結構根強い誤解かもしれないんですけど、目の不自由な人は特別なテキストだけを表示するブラウザーを使ってるんじゃないかっていう。
あーそれ聞いたことあります。なんとなくそういうイメージが。
ですよね。でもこれも現実とはかなり違うんです。
スクリーンリーダーっていうのは、その特定のブラウザーのことじゃなくてですね、OS全体、画面上のあらゆるものを読み上げるソフトウェアなんです。
OS全体ですか。なるほど。
だからWebAMっていうところの調査データを見ると、視覚障害のあるユーザーさんの多くは、もう本当に普通に皆さんが使ってるようなFirefoxとかインターネットエクスプローラーとか、そういうごく一般的なブラウザーを使ってるんですね。
IEもまだ使われてるんですね。
そうなんです。で、ちょっと面白いのが、開発者の間では人気のChromeありますよね。
はいはい。
あれがこの調査だと、意外とシェアが低いというか、あまり使われていなかったり。
へー、それは意外ですね。じゃあウェブサイト作る側がテキストブラウザでの表示だけを気にしてテストしても、あんまり意味がないというか。
そうなんです。実際のユーザーさんの利用状況とは、ちょっとずれちゃう可能性が高いですね。
画像とナビゲーションの重要性
うーん、テストの仕方も考えさせられますね、これは。
ええ。だからできるだけリアルな環境に近いところで考えるのが大事になります。
なるほど。
さて、次ですが画像のアルトテキスト、代替テキストですね。
これもアクセシビリティの基本として、すべての画像に設定しましょうってよく言われますけど。
はい、言われますね。必須だと。
ええ。でもこれも少し注意が必要でして。
もちろんその画像がロゴだったりグラフだったり、何か意味のある情報を持っている場合は、その内容をちゃんと伝えるアルトテキストが絶対に必要です。
うんうん。
でも問題は純粋にデザインのためだけの消色画像、例えば区切り線とか背景の模様とか。
ああ、ありますね。
そういうものに、例えば青い飾り線みたいな説明的なアルトテキストをつけちゃうと、スクリーンリーダーを使っている方にとっては本筋と関係ない情報がどんどん読み上げられちゃうんですね。
ああ、なるほど。邪魔になっちゃうわけですか。
そうなんです。コンテンツの流れを妨げてしまう。
ですから、そういう消色目的の画像の場合は、アルト属性自体は書くんですけど、中身は空っぽ、つまりアルトイコール括弧って書くのが正しい方法です。
アルトイコール括弧ですね。
ええ。これでスクリーンリーダーは、これは意味のない消色なんだなと判断して読み飛ばしてくれると。
なるほど。情報を伝えるか消色か、その区別がすごく大事なんですね。
その通りです。
次にナビゲーションの話なんですけど、HTML5でナブタグとかそういうランドマーク要素を使うとサイト内を移動しやすくなるって言われますよね。
これは実際どのくらい使われているものなんですか?
ランドマーク要素自体は、もちろんページの構造を意味的に示す上で、将来的にはすごく重要になっていくと思います。
ただ、現時点で誰もがランドマークをメインに使って移動しているかというと、必ずしもそうではないというのが実情みたいですね。
そうなんですか?
ええ。WebEAMの調査でもランドマークをほとんど使わない、あるいは全く使わないって答えたユーザーさんが合わせて35%くらいいたんです。
結構いますね。じゃあどうやって移動してるんですか?
それがですね、ここで結構興味深いのが、今でも多くのユーザーさんは、キーボードのショートカットキーを使って、
見出しですね、H1とかH2タグ、あの見出し感をジャンプすることで、ページの概要をつかんだり、目的のセクションに素早く移動したりしているっていう方が多いんです。
えー、見出しジャンプですか。
そうなんです。
ということは、いくら最新のHTML細部の要素を使っていても、その基本的な見出しの構造、レベルとかがぐちゃぐちゃだと。
そうなんです。そこがちゃんと作られてないと、せっかくの見出しジャンプ機能が役に立たないというか、かえって混乱させちゃう可能性もあるわけです。
うわー、基本的なことがやっぱり一番大事なんですね。見出しレベルを正しく使うとか。
まさに、地味ですけど本当に重要ですね。見出し構造がしっかりしていれば、スクリーンリーダーのユーザーさんも効率的にコンテンツを把握できるので。
利用者中心のアクセシビリティ
いやー、勉強になります。
他にもですね、この記事ではJavaScriptは多くのユーザーが有効にしているとか、あとCSSのDisplay.nanで非表示にした要素はちゃんとスクリーンリーダーからも隠れるとか。
これについてはコメントで少し異論もありましたけど、コンテンツが自動で更新するのはユーザーさんの好みによるとか、あとはキーボード操作をちゃんと考えずに、あいにタブインデックス属性を多用するのは良くないとか、そういったかなり実践的な指摘がたくさんありましたね。
いやー、こうして伺っていると、アクセシビリティってなんかこうルールブック通りにやればOKみたいな、そういう単純な話じゃないんですね。
実際に使っている人がどういうふうに技術と付き合っているか、そのリアルなところを知るのが本当に大事なんだなって改めて感じます。
ええ、全くその通りだと思います。そこが一番のポイントですね。
この記事を書いた方が実際に目隠ししてウェブサイトを使ってみたっていう体験談がありましたけど、やっぱり実際に自分で試してみるとか、あるいは当事者の方に直接話を聞いてみるとか、そういうことで図形上の空論じゃない生きた知識とか深い理解が得られるんだと思います。
技術はどんどん変わっていきますけど、使う人を中心に考えるっていうその基本は変わらないですよね。
本当にそうですね。では最後にこれを聞いているあなたへの問いかけです。
この記事の筆者は目隠しをしてウェブサイトを使うという体験から多くの発見をしました。
もしあなたがですね、普段何気なく使っているウェブサイトとかアプリとかをスクリーンリーダーのような支援技術を使っている人の視点で改めて見つめ直してみるとしたら、そこにどんな発見があるでしょうか。あるいはどんな改善点が見えてくるでしょうか。ぜひ少し想像してみてください。