「ウェブアクセシビリティ」
この言葉、聞いたことはありますか？
コーディングの勉強を始めたての時期にはあまり聞かない言葉ですよね。
アクセシビリティという単語自体は、訓練校でも習うかもしれませんが、その重要性まではよくわかっていない方もいるのではないでしょうか。
でもこれ、実はとっても大事なことなんです。
みんなに見てもらうためのウェブサイトを作るために書いた自分のコードのせいで、そのサイトを使えない人が出てくるかもしれないのです。それはめちゃくちゃ悲しいですよね。
ちょっとした気遣いで、あなたが作るサイトのウェブアクセシビリティは向上します。
ウェブアクセシビリティっていったい何なのか、一緒に見ていきましょう！
ウェブアクセシビリティ、基本の「き」
そもそも、ウェブアクセシビリティとは何でしょうか。
ウェブアクセシビリティとは、ひとことで言うと「すべてのユーザーが、そのサイトのすべての情報や機能に支障なくアクセスできること」です。
ウェブサイトにはいろんな機能があります。
たとえば別のページにジャンプするリンクや、メインビジュアルの画像スライダーなどなど。
そして、掲載されているテキストや画像。これらは情報です。
そういった機能や情報を、サイトに訪れた全員がちゃんと読める・使えるようにする。
これがウェブアクセシビリティです。
「全員がちゃんと使える」とはどういうことなのか
え？テキストも画像も全部見えるし、リンクも全部使えるよ。
と思いますよね。
あなたにとってはパーフェクトなサイトに思えても、こういう人もいるかも。
背景の色に対して、文字の色が薄くて見えない。。。
マウスが壊れてしまったのでキーボードで操作しているんだけど、リンクにカーソルが当たらない。。
そう、他の人もあなたと同じ環境や条件でサイトを見るとは限らないのです。
どんな環境・条件下でサイトを見ても、情報や機能がすべてわかる・使える状態になっているのが理想です。（すべてを完璧にするのは現実的に難しい場合もあるので、あくまでも理想です。）
異なる環境や条件とは
自分と異なる環境や条件とは、どういったものでしょうか。
たとえば目が不自由な方や、色覚特性を持っている方などが挙げられます。
こうした方々は、目から入る情報に制限があるのです。
例1：目が不自由な方の場合
目が不自由な方の場合は、サイトに載っているテキストや画像を目で見ることが難しいです。
そんな時は、「スクリーンリーダー」という、画面に表示している情報を音声で読み上げてくれるソフトなどを使用します。
その場合、スクリーンリーダーは情報の上から下に向かって音声で読み上げ、使用者に情報を伝えます。
この時の「上から下」というのは、画面に表示されている順番ではありません。
HTMLで記述されている順番に読み上げます。
flexのorderプロパティなどで表示順を入れ替えて表現している時などは、場合によってはスクリーンリーダーで正確な情報がうまく伝わらない可能性があります。
例2：色覚特性を持っている方の場合
色覚特性とは、特定の色が認識しにくい又はできないことです。
いくつかの種類がありますが、多くは赤系統や緑系統の色の識別がしにくい傾向にあるようです。
たとえば背景色の上に文字を置くような場合。この時に、背景の色と文字の色がはっきり区別されていないと、文字が読めなくなってしまうことがあります。
イメージしやすくするために、例で見てみましょう。
グレーのボックスの中にテキストを置いてみました。ボックスのグレーの色はどちらも#d3d3d3です。
どうでしょうか。左のテキストに比べて、右のテキストのほうが見づらいのではないでしょうか？
背景色の色とテキストの色が近いと、仮に色覚特性を持っていなかったとしても普通に見づらいです。
見づらいテキストでは、伝えたい情報がうまく伝わりませんし、ユーザーがサイトから離脱してしまう可能性も上がります。
色覚特性を持っていて、たとえば赤系統が認識しづらい場合は、背景色を赤系の色にしてテキストを黒にしても、赤系の色が黒っぽく見えてしまうため、上図と同じような現象が起こります。
どんな色がどんなふうに見えるのかは、下記サイトの「色の感じ方の特徴」でわかりやすくまとめられていますので、参考にするとよいでしょう。
色覚型と特徴 – NPO法人 カラーユニバーサルデザイン機構 CUD
ウェブアクセシビリティ≠障がい者対応
上記では目が不自由な方の場合と、色覚特性を持っている方を例に挙げました。
ここまで見ると、ウェブアクセシビリティって障がい者の方に向けた対応のことかな、と思われるかもしれません。
そういった側面ももちろんありますが、それだけではないのです。
障がいを持たないユーザーであっても、先ほど例に挙げたように背景色と文字色が近いと見えづらかったり、マウスなどの周辺機器が故障してしまったりすることもあります。
いかなる環境や条件で使ったとしても、情報が見える・機能が使えるサイトを私たち制作者は目指していきたいものです。
あとがき：書きたいこといっぱい
さて、今回は「ウェブアクセシビリティ」とは何なのかを見てきました。
ちょっとでも、理解深まりましたでしょうか？
本当はもっと書きたいことを用意していたのですが、長くなってしまうのでいったんここで区切ります。
少し障がい者対応に寄った内容になってしまいましたが、最後に述べたように「ウェブアクセシビリティは障がい者対応だけではない」ので、これからもちょっとずつ、一緒に学んでいきましょう。
ウェブアクセシビリティは今後も重要視されていくものだと思いますので、カテゴリとしてシリーズ化していく予定です。
今後はより具体的にソースコードに落とし込む方法や、もっと深い内容に突っ込んでいけたらと思っていますので、よろしくお願いします。
コメント