タコでもわかるWebアクセシビリティ① 〜概要編〜

2022年 9月 8日　Posted　遠藤(フロントエンドエンジニア)

どうも。タコです。

Webアクセシビリティについてよくわからない皆さんに向けて、なるべく難しい言葉を使わずにゆるく解説していきます。今回は第1回目、Webアクセシビリティの概要について説明します。

1. Webアクセシビリティはこわくない

Webアクセシビリティと聞くといきなりこんな風に考える人もいるかと思います。

まさに私の上司もそんな感じでした。
WebアクセシビリティはWebサイトに携わる全ての人にとって大切なものであると最初に言っておきます。
Webアクセシビリティという言葉を聞いただけでこわがって逃げ出す方がたまにいますが、全くこわくないので、逃げないでついてきてください。

それでは一緒に学んでいきましょう。

2. Webアクセシビリティとは

Webアクセシビリティとは……
誤解をおそれず簡単な言葉で言うと
「誰でもWebサイトをきちんと使えること（情報にアクセスできること）」
を意味します。

もうちょっと補足を加えて言うと
「さまざまな状況や環境にいる人が誰でもWebサイトを問題なく利用できること」
を意味します。

また、単に高齢者や障がい者向けの対応だと誤解している方も多くいます（たしかに当初はそのような考えもありました）
高齢者や障がい者向けの対応といった側面もありますが、それは一部でしかありません。
「うちのWebサイトは高齢者や障がい者の人は見にこないから大丈夫！」なんて考えは大間違いなのです。

日常生活において高齢者や障がい者と”近い状況”になることは誰にでも起こりえます。

例えば……
外出先で直射日光の下でスマートフォンをみて文字が読みにくい

いつもは眼鏡をかけているが忘れてしまって文字が見にくい

突然マウスが動かなくなり、キーボードしか使えなくなってしまった

図書館や会社などでPCを利用していて動画コンテンツの音を出すことができない

など他にも突然機器が故障したり、病気やケガなどで一時的に制限されてしまうといった状況は誰にでも起こりえます。

そんな状況でもWebアクセシビリティが確保されていれば、Webサイトをきちんと利用できるのです。

対応の例を挙げると……

外出先で直射日光の下でスマートフォンをみて文字が読みにくい
⇒色のコントラスト比を考慮してWebサイトを作っておけば、どんな状況でも文字が読みやすくなる

いつもは眼鏡をかけているが忘れてしまった
⇒文字の読みやすさを考慮してWebサイトを作っておけば、どんな状況でも文字が読みやすくなる

突然マウスが動かなくなり、キーボードしか使えなくなってしまった
⇒マウスを使わなくてもキーボード操作だけでWebサイトを利用できるようにしておけば問題ない

図書館や会社などでPCを利用していて動画コンテンツの音を出すことができない
⇒字幕や動画の同内容のテキストを提供すれば音がなくても内容が理解できる

このように「さまざまな利用者や状況などを考慮した上でWebサイトを作って誰もがWebサイトを利用できるようにしましょう」
というのがWebアクセシビリティの考え方です。

Webアクセシビリティに関するガイドラインがあり、それを参考にして対応することでWebアクセシビリティを確保することができます。また、WebサイトでWebアクセシビリティの対応度を表明することもできます。
（ガイドラインや具体的な方法は別の記事で説明します。）

3. 対応するメリットは？

「大切なのはわかるけど、じゃあ具体的にどんなメリットがあるの？」と思っている方もいるかもしれません。ここではWebアクセシビリティの対応することによるメリットについて説明します。

メリット以前に……

メリット以前の問題でWebアクセシビリティが確保されていないサイトだと、そもそも利用すらできない人が出てきてしまうのです。Webサイトを作る上で最低限必要なものでまず第一に考える必要があると言えます。

Webアクセシビリティが命を救う？

例えば災害時、さまざまな情報がWebサイトに掲載されることがあります。実際に災害時、電話が通じず、Webサイトの情報だけが頼りになる場面が多く見受けられました。もしWebアクセシビリティが確保されていなければ、そうした情報を得ることができなくなる人も出てきてしまいます。大げさかもしれませんが、Webアクセシビリティの確保が一人でも多くの命や心を救う可能性だってあるのです。

Webサイトの品質が向上する

具体的な方法は別の記事で説明しますが、htmlやcssなどの技術の仕様書通りに”ちゃんと”Webサイトを作成していればそれだけでもWebアクセシビリティの多くの点に対応できているのです。（ほとんどの場合知らず知らずのうちに対応できています）。
Webアクセシビリティの確保を目指すことでWebサイトの品質が向上すると言えるでしょう。

Webサイトの品質を明確に示すことができる

Webアクセシビリティには関するガイドラインがあり、基準が定められています。
ガイドラインに沿って対応し基準を満たすことでサイトの品質を明確に示すことができます。
サイト上に明確に対応度を掲載したり、今後の対応について掲載することができます。（具体的な方法は別の記事で説明します）。

さまざまなWeb閲覧機器や環境に対応できる

Webサイトを見るための機器として、PC、タブレット、スマートフォンはもちろん挙げられますが、最近ではゲーム機や家電などでもWebサイトを閲覧できる機器は増え続けています。
そのうち、iOctopusなるものも出るかもしれません（出ない）。

また、Windows、MacなどのOS、Microsoft Edge、Google Chromeといったブラウザーは使う人によってさまざまです。
Webアクセシビリティに対応し、”ちゃんと”Webサイトを作成していれば、がそうしたさまざまな利用環境に対応しやすくなります。

さまざまな状況や場面の利用者に対応できる

外出中で直射日光の下でスマートフォンで利用している方、図書館などで音を出せない状況で利用している方、上司への説明資料としてWebサイトを白黒印刷している方、電波が悪い場所で画像が表示できない方など、
どこでどのような状況で利用しているかはさまざまです。
Webアクセシビリティがきちんと確保されていれば、そうしたさまざな状況や場面の利用者にも対応しやすくなります。

主に障がいのある方が使用している支援技術に対応できる

障がいのある方は次のような方法を用いてWebサイトを利用していることがあります。

• 音声読み上げソフト
  画面上の情報を音声で読み上げるソフトウェアで主に視力障がい者の方が利用しています。
  ソフトの種類によっては単なるテキストだけでなくimg要素のalt属性などの情報も読み上げます。
  iOS系ではVoiceOverと呼ばれる読み上げ機能が、Android系ではTalkBackと呼ばれる読み上げ機能が標準で搭載されています。
  ぜひ試してみてくださいね。 iPhoneの場合、設定の"アクセシビリティ"の項目にあります  
• 点字ディスプレイ
  画面上の文字情報を点字に変換して、指先で点字を読み取る機器で、主に視力障がい者の方が利用しています。
• 画面拡大ソフト
  画面を拡大して表示するソフトウェアです。ブラウザーの拡大機能では不十分な場合に弱視などの視覚障がいがある方が利用しています。 

……など
その他には、画面の色を反転して利用している方、
ジョイスティックやトラックボールと呼ばれるものを用いて利用している方など、
などさまざまな利用者がいます。
そういったソフトウェアや機器を”支援技術”と呼びます。
Webアクセシビリティが確保されていれば、そうした支援技術も問題なく使用することができる可能性が高まります。

SEOにも効果がある

支援技術に対応できると述べましたが、
支援技術に対応することの一部（Webアクセシビリティに対応することの一部） ≒ 機械（マシン）がしっかりと情報を読み取れるようにWebサイトを作ること
になります。
Googleなどの検索クローラーも機械（マシン）の一種なので対応することで情報を正しく解釈できるようになります。
また、Webサイトの品質も向上するのでSEOにも効果があると言えるでしょう。

Webユーザビリティにも効果がある

WebアクセシビリティにはWebユーザビリティとも重なる部分があります。
（サイトマップやサイト内検索機能などを提供したり、デザインに一貫性を持たせたりなど具体的な実装内容は別の記事で説明します）
Webアクセシビリティの確保することで一部ではありますがWebユーザビリティもおのずと向上すると言えるでしょう。

機会損失を防ぐことができる

ビジネスの視点で考えると、例えば、Webアクセシビリティに対応できていないWebサイトがあるとして一部の人がサイトを利用できなかったとします。その中には、もしかしたら将来優良なお客様になってくれていた方もいたかもしれません。これを機会損失と言います。Webアクセシビリティに対応できていればできる限りそうした機会損失を防ぐことができると言えます。

社会的責任を果たすことができる

企業の社会的責任（CSRやコンプライアンス）としてWebアクセシビリティの対応を進める企業が増え続けています。
Webサイトのアクセシビリティを確保し、対応についてWebサイトに掲載する企業サイトが数多くあります。
Webアクセシビリティの対応は社会貢献となり、企業イメージが向上することもあるでしょう。現在、公共サイトや大企業のほとんどは対応を進めています。
むしろ、多くの企業が対応を進める中、対応できていないと企業のイメージが悪くなってしまうこともあるかもしれません。

（実は）Webアクセシビリティを求める動きが高まっている

2016年4月に「障害者差別解消法」という法律が施行されました。

そこでWebアクセシビリティも対象とされ、障がい者に対して”合理的配慮“と言われるものが求められるようになりました。

海外では既にWebアクセシビリティに関する訴訟は増えています（訴えられたWebサイト側が負けたりしています）。
世界的にもWebアクセシビリティ対応を求める動きが高まっており、今後ますます対応が求められることが予想されます。

早いうちにきちんと対応していれば安心です。
対応していなくて後で困った……などとならないようにしましょう。

4. 対応するデメリットは？

Webアクセシビリティ対応をする上で、少なからず課題点もあります。

（当たり前ですが）少なからず費用（工数）がかかる

Webアクセシビリティに対応するには少なからず費用（工数）がかかります。Webサイトがちゃんと対応できているかチェックしたり、対応度合いをサイト上に掲載したり、Webサイトを作り替えたりと作業が必要になってきます。
ただ、対応は一気に全部進める必要はありません。無理のない範囲で、できるところから少しずつ進めていくことが大切です。

費用対効果（コストパフォーマンス）が見えにくい

「Webアクセシビリティに対応するとどれだけ効果があるの？（もうかるの？）」という問いに対して明確に答えるのは残念ながら難しいでしょう。効果をWebアクセシビリティによるものか明確に関連づけることが難しいからです。
ただしこれは逆のことも言えます。
「Webアクセシビリティに対応していないとどれだけ損しているの？」という問いに対しても明確に答えるのは難しいと言えます。
ただ先に述べたように対応するメリットはたくさんあります。また、Webアクセシビリティを求める動きは高まっており、コストを考えても対応しないことによるデメリットの方が大きいと言えるでしょう。

Webアクセシビリティの重要さがまだまだ浸透していないため理解されにくい

費用対効果がわかりにくいことや昔の「高齢者や障がい者のための対応」というイメージがいまだに残っていることが多く、Webアクセシビリティ対応費用の社内稟議（りんぎ）を通す際など、Webアクセシビリティの知識がない上司だと、なかなか理解されないという話も聞きます。中には以前の私の上司のように「アクセシビリティ」という言葉を見ただけで煙たがって逃げ出す人もいます。
Webアクセシビリティは「高齢者や障がい者のための対応」というイメージを払拭（ふっしょく）し、Web制作においてまず第一に考えて対応しなければいけないことであるという認識を広めていく必要があるでしょう。

学習コストがかかる

Webアクセシビリティに関する文書などはたくさん存在しますが
理解が難しく、何をどのように対応したらいいか分からず、挫折してしまう人の話を多く聞きます。学習ハードルが高く、学習コストがかかってしまうことが課題点としてあげられるかもしれません。筆者自身も理解するまで苦労しました。
その経験を生かして、この記事では私がなるべく優しい言葉でゆるゆると伝えていきます。

5. 対応は難しい？

Webアクセシビリティという言葉から実際に対応するとなると「なんかすごく難しいことをするんじゃないか」とか「めんどくさいんじゃないか」とか……と恐縮してしまう方もいるかもしれません。
でも対応方法の多くはWebサイトを作る上であたりまえのことだったりします。

例えばWebアクセシビリティの対応項目の一部を挙げると以下になります。

• バリデートエラーがないこと
• 見出し要素（h1～h6）やリスト要素（ul,ol,dl）を正しくマークアップする
• テーブル要素はth要素やtd要素を正しくマークアップする
• ページタイトルは、ページの内容がわかるように記述する
• 意味のある画像にはalt属性を入れる（代替テキストを提供する）
• リンクテキストは、リンク先が分かるように記述する

など、対応の多くは仕様に沿ってきちんとWebサイトを作っていれば既に対応できているものが多いのです。
中には少し考慮が必要なものもありますが、多くはこのように難しくありません。できるところから少しずつでも対応を進めていきましょう。

まとめ

• Webアクセシビリティは「さまざまな状況や環境にいる人が誰でもWebサイトを問題なく利用できること」を意味する
• 単なる高齢者や障がい者のための対応ではない。誰しもが突然機器が故障したり、病気やケガなどで一時的に制限されたり、さまざまな状況は起こりえる
• Webアクセシビリティを確保するとさまざまなメリットがあるが、メリット以前の問題でWebアクセシビリティの確保はWebサイトを作る上で最低限必要なもの（Webアクセシビリティが確保できていないと、利用すらできなくなってしまう）
• Webアクセシビリティの対応する上で課題点もあるが、対応しないデメリットの方が大きい
• 対応項目の多くはWebサイトを作る上で当たり前のもので、きちんとWebサイトを作っていれば既に対応できているものが多く、とんでもなく難しいわけではない

次からはどうすればWebアクセシビリティを確保できるのか説明していきます。

誰もがWebサイトを使える世の中を目指して……
Webアクセシビリティ DREAM