目次
ウェブアクセシビリティとは？
ウェブアクセシビリティとは、年齢や身体的な条件にかかわらず、ウェブで提供されている情報にアクセスし利用できることです。簡単にいえば、Web上のバリアフリーのようなものといえます。
わかりやすい例を挙げましょう。たとえば全盲の人はWebページに書かれたことを目で読むことはできません。この場合、音声読み上げソフトを使い、耳を使ってページ内のテキストを”読む”ことになります。
しかし、ページ内のテキストがすべて画像で表示されていて、その画像に代替テキストもなかったらどうでしょうか。誰かに読み上げてもらわない限り、全盲の人はそのページから一切の情報を得られないことになります。
このような事態が起こらないようにすること、すべての人が情報を取得できるWebページを作ることがウェブアクセシビリティといえます。
ユーザビリティとの違い
ウェブアクセシビリティと似た言葉に「ユーザビリティ」があります。特定のユーザーにとって使いやすい、わかりやすいという意味の言葉です。
ウェブアクセシビリティとユーザビリティの違いは、誰にとっての使いやすさ・わかりやすさを指しているかにあります。
ユーザビリティは特定のユーザーにとっての使いやすさを指す言葉で、特定のユーザーとはたとえばそのWebサイトのターゲット層やWebサービスの利用者のことです。
一方、ウェブアクセシビリティは年齢的・身体的な条件にかかわらず、すべてのユーザーにとっての使いやすさ・わかりやすさを指します。
ウェブアクセシビリティへの対応が義務化
2021年6月4日、改正された障害者差別解消法が公布されました。公布日から3年以内（2024年6月4日まで）に、ウェブアクセシビリティを確保することを、公的機関・民間企業ともに義務化する法律です。
ウェブアクセシビリティを確保できなかった場合の罰則はまだ（2023年4月12日時点）定められていませんが、今後罰則が制定されたり、ユーザーから訴訟されたりする可能性はあります。
実際、アメリカではウェブアクセシビリティに対応していないとして訴訟された企業もあります。早めの対応が求められるでしょう。
何より、ウェブアクセシビリティを高めることは、すべてのユーザーにとっての使いやすさ・わかりやすさの向上につながります。リスクヘッジのためにというよりは、自社のイメージアップ、集客・売上アップのためにもウェブアクセシビリティを高めていきましょう。
ここからは、その具体的な方法をNG例を交えて解説していきます。
ウェブアクセシビリティは誰のためのもの？
ウェブアクセシビリティはWeb上のバリアフリーといえるものです。そのため、高齢者や障がい者のためのものと考えている人は多いでしょう。
しかし、心身の機能に制約のない健常者にとっても、ウェブアクセシビリティの高いWebページは使いやすくわかりやすいです。そのようなページはテキストや画像が見やすく、情報が整理されわかりやすく、無駄なリンクがなく遷移先の内容も明確だからです。
ウェブアクセシビリティを確保することにより、すべての人にとって使いやすくわかりやすいWebページができます。だからこそ、ウェブアクセシビリティを高めることにはSEOや集客などの効果も期待できるのです。
ウェブアクセシビリティが低いWebページとは？
ウェブアクセシビリティを高めようとする前に、まずはウェブアクセシビリティが低いWebページとはどんなページなのかを理解しておきましょう。
次に紹介するようなページはウェブアクセシビリティが低く、これらを改善するだけでもWebページの使いやすさ・わかりやすさは大きく向上します。
テキスト情報が画像で表示されている（読み上げができない）
文字がHTMLのテキスト情報ではなく、画像として表示されているWebページでは、音声読み上げソフトや点字ディスプレイが使えません。簡単にいえば、Wordに書いたテキストをスクリーンショットで撮影し、その画像をテキストの代わりに掲載しているようなWebページです。
このようなWebページはウェブアクセシビリティが低いだけでなく、ページ内に書かれていることを検索エンジンが認識できないため、SEOでも不利になります。
文字サイズが固定されていて拡大・縮小できない
HTMLやCSSで文字サイズを固定していたり、文字情報を画像で表示していたりすると、ブラウザの設定から文字を拡大できません。弱視の人にとって読みにくいWebページになってしまいます。
文字を拡大する場合、一度に確認できる範囲が狭くなるという問題もあります。拡大により全体のレイアウトを把握しづらくなるため、シンプルでわかりやすいレイアウトを作ることも大切です。
テーブル（表）の段組が不適切で内容を理解しづらい
テーブル（表）の段組が不適切だと、音声読み上げ字に内容を理解しづらくなります。読み上げ時にも内容が把握しやすいように整理すること、表に情報を詰め込みすぎないことが大切です。スッキリと整理された表は視認性も高く、健常者にとってもわかりやすいでしょう。
遷移先の内容がわからないリンク
「詳しくはこちら」のようなリンクは遷移先の内容がわかりづらく、心身機能の制限にかかわらず使い勝手が悪いでしょう。
遷移先のページタイトルをそのままリンクテキストにすること、その直前に遷移先にどんなことが書かれているのか、誰に向けたページなのかを説明する文章をおくことでアクセシビリティを高められます。
1ページ内のリンクが多すぎる
トップページやリンク集などは別として、1ページ内にリンクが多すぎるのもアクセシビリティが低いです。ユーザーがどのリンクをクリック（タップ）すればいいのかわからなくなるという理由もありますが、これは肢体不自由の人への配慮として重要なポイントです。
たとえば手指の細かい動きができない人の場合、リンク同士の距離が近すぎると、目的のリンクをなかなかクリックできません。
マウスやトラックボール操作が困難で、画面上のソフトキーボードを使う場合、TABキーを押してリンクを一つずつ移動していくことになります。目的のリンクに辿り着くまでにかなりの時間がかかってしまいます。
ウェブアクセシビリティを高めるためにできること
ウェブアクセシビリティを高めるためにできることを、具体的に5つ紹介します。
情報をわかりやすく整理する
特別な取り組みをする前に、まずは情報をわかりやすく整理しましょう。想定読者の知識レベルにもよりますが、専門用語や難しい言葉はなるべく使わず、誰にでもわかることばを使うこと。ページタイトルはページの内容を端的に説明したものにすることなどが大切です。
文字化けしやすいテキストを使わない
文字化けが起こりやすい「環境依存文字（機種依存文字）」は使わないようにしましょう。文字化けがあると、そこに何が書いてあるのかわからなくなってしまいます。変換候補に「環境依存文字」と書かれている文字や半角カタカナなどの使用は避けましょう。
テキストや画像のコントラストを調整する
テキストや画像のコントラストをハッキリさせ、視認しやすいようにしましょう。色覚障害のある人にとって視認しやすいよう、背景や文字、画像の色を調整します。特に背景と文字色はコントラストがハッキリする色の組み合わせが読みやすいです。
画像には代替テキストを付ける
画像には代替テキスト（altタグ）を付けましょう。音声読み上げソフトを使用した際、代替テキストがないと画像の部分の読み上げが飛ばされてしまいます。画像の内容をテキスト化し、読み上げたときに「そこに何の画像があるのか」を把握できるようにしましょう。
リンクの数を絞り、わかりやすくする
トップページやリンク集などを除き、1ページ内のリンクの数は絞ること、遷移先のページの内容がわかるようにリンク名を付けることが大切です。
「企業情報」や「サービス一覧」などのすべてのページに入れるリンク集も、ヘッダーではなくフッターに配置するのがおすすめです。ヘッダーにたくさんのリンクがあると、ソフトキーボードでページの本文（body）部分のリンクに辿り着くまでに時間がかかってしまいます。
ウェブアクセシビリティの高いページはSEOや集客にも役立つ
ウェブアクセシビリティの高いページは高齢者や障がい者だけでなく、すべての人にとって使いやすくわかりやすいです。このような「ユーザーに対して親切なWebページ」を作ることは、SEOでの上位表示にも、検索結果からのクリック率アップにもつながります。
よりよい社会づくりに貢献し、マーケティングをも加速させるために、ウェブアクセシビリティを高めたい企業には「アクセシレンズ」がおすすめです。
アクセシレンズはスクリプトにひとつ差し込むだけで、メディアのウェブアクセシビリティを高められるソリューションです。文字の読み上げや拡大、画面のモノクロ化、アニメーションをなくすなど、ユーザーそれぞれの求めるアクセシビリティを実現します。
手間とコストを抑え、ユーザビリティを向上させたい企業は、下記Webページからぜひ詳細をご確認ください。
