Web アクセシビリティとは何か — 誰もが使えるサービスを作る

Web アクセシビリティとは、障害があってもなくても、またどんな環境にいても、誰もが Web サービスを使えるようにすることを意味します。画面を見るのが難しい人、マウスを使いにくい人、音を聞けない人まで、みんなを念頭に置くことです。

アクセシビリティを少数のための配慮くらいに考えてしまいがちですが、実際にはより多くのユーザーを受け入れることであり、品質の問題です。今回の記事では、Web アクセシビリティとは何で、なぜ大切なのかを、コードなしで解きほぐしていきます。

アクセシビリティは、みんなのために敷居を下げることです #

建物の入り口のスロープを思い浮かべてみます。スロープは車いすを使う人のために作られたものですが、重い荷物を引く人やベビーカーを押す人にも同じように役立ちます。一人のために下げた敷居が、結局みんなを楽にしているのです。

Web アクセシビリティも同じ考え方です。特定のユーザーのために画面を整えると、その改善がほかの多くのユーザーにもつながります。アクセシビリティに気を配ることは、一部のための特別あつかいではなく、より多くの人が無理なく使えるように敷居を下げることです。

画面を見られない人も Web を使います #

目で画面を見るのが難しい人は、スクリーンリーダーという道具で Web を使います。画面の内容を音声で読み上げてくれるプログラムです。ところがスクリーンリーダーは、絵そのものを理解はできません。だから画像に、どんな絵かを説明する代替テキストがないと、その部分はそのまま飛ばされるか、意味のないまま読まれてしまいます。

画面の構造も大切です。見出しと本文、ボタンとリンクが種類に合わせて示されていてこそ、スクリーンリーダーが「ここは見出し、ここはボタン」と伝えられます。目で見るときは太字一つで十分に見えても、音声で聞くときは、それが見出しなのかどうかがはっきりしている必要があります。

マウスなしでも使えなければなりません #

手を自由に使うのが難しい人は、マウスの代わりにキーボードだけで Web を操作します。ふつうは Tab キーでボタンとリンクのあいだを移動します。だからマウスでしか押せないメニューがあると、キーボードのユーザーはその機能にたどり着けません。マウスなしでもすべてのところに届かなければならない、という意味です。

色も同じです。赤と緑を見分けにくい人は少なくありません。だから「赤い文字がエラー」というように色一つだけで情報を伝えると、その違いを読めない人が出てきます。色とあわせて文字や記号でも伝え、文字と背景の明暗の差を十分に取るのが基本です。

アクセシビリティは、おまけではなく品質です #

アクセシビリティにきちんと気を配ると、みんなの体験がいっしょに良くなります。動画に付けた字幕は、音を聞きにくい人だけでなく、騒がしい電車の中や、音を出せない状況にいる人にも役立ちます。画像の代替テキストは、検索エンジンが絵の内容を理解するのにも役立ち、検索にも有利です。

さらに、多くの国では一定の規模以上のサービスに、アクセシビリティを法で求めています。つまりアクセシビリティは、あればうれしい追加機能ではなく、サービスが備えるべき基本の品質に近いのです。

どうやって確認するか #

大がかりな機材がなくても、基本の点検はできます。マウスをしばらく脇に置いて、キーボードだけで主な機能を最後まで使ってみると、どこで詰まるかがすぐに見えてきます。画像ごとに代替テキストが付いているか、文字と背景のコントラストが十分かも、目で確認できます。

アクセシビリティの問題を自動で見つけてくれる検査ツールもたくさんあります。こうした点検をリリース前のテストの過程にいっしょに入れておけば、アクセシビリティをあとからまとめて直す代わりに、ふだんから気を配れます。

なぜ非開発者が知っておくと仕事が楽になるのか #

• 企画の段階で反映できます。 画面を設計するときからキーボード操作と色のコントラストを念頭に置けば、あとから大きく作り直す手間を減らせます。
• コンテンツを正しく作れます。 画像に代替テキストを付け、動画に字幕を入れることがなぜ必要かを知っていれば、文章や動画を作るときに自然と気を配れます。
• 法的なリスクを知れます。 アクセシビリティが推奨ではなく義務である場合があると知っていれば、サービスが負うリスクを前もってはかれます。

まとめ #

今日は、Web アクセシビリティが、障害の有無にかかわらず誰もが使えるサービスを作ることであり、結局はみんなの体験を引き上げる品質の問題だ、という点を見てきました。スクリーンリーダーのための代替テキスト、キーボードだけでも届く構造、色だけに頼らない表示が、その出発点です。

Web の画面がどんな部品からできているのか気になればウェブサイトは何でできているのかを、こうした点検をリリース前のどこに挟み込むのか気になればテスト、QA、ステージングを一緒に読んでみることをおすすめします。