日本財団ジャーナル

社会のために何ができる?が見つかるメディア

障害の有無にかかわらず誰もがネットを利用できるよう覚えておきたい「ウェブアクセシビリティ」とは?

画像:イメージ
誰もがウェブを利用できるよう、ウェブアクセシビリティについて学ぶことは重要だ Markus Mainka/shutterstock.com
この記事のPOINT!
  • ウェブアクセシビリティとは、全ての人がウェブサイト等を利用できるように設計する概念
  • 世界基準のガイドラインもあるが、複雑なルールも多く日本では浸透しきっていない現状がある
  • けがや老化など、誰であれネットから情報を得にくくなる可能性がある。人ごとにしてはいけない

取材:日本財団ジャーナル編集部

あなたは「ウェブアクセシビリティ」という言葉を耳にしたことはあるだろうか?

アクセシビリティはアクセスできる度合いを意味する言葉で、転じて、製品やサービスを利用できる状況の幅広さという意味でも使われる。ウェブアクセシビリティはそれのウェブ版だ。

視覚や聴覚に障害のある人、高齢者などを含めた全ての人が、ウェブサイトで提供される情報にアクセスできるようにすることを「ウェブアクセシビリティを確保する」などと言う。

さて、このウェブアクセシビリティには「WCAG※」(外部リンク)という、世界基準のガイドラインが設けられている。

  • 「Web Content Accessibility Guidelines」の略称

例えば、視覚に障害がある人は、スクリーンリーダーと呼ばれるソフトを使ってウェブサイト上の情報を音声で読み上げたり、点字ディスプレイに出力したりして情報を得ている。

スクリーンリーダーの1つ「PC-Talker」のメニュー画面。テキストの読み上げだけでなく、ユーザーの操作状況も音声等で認識できるのがスクリーンリーダーの特徴だ

しかし、スクリーンリーダーでは画像を表現することができない。そこで「写真・イラストなど画像を使用する場合は、代替テキストを付与し、何が表示されているか伝わるようにする」といったガイドラインが設けられている。

代替テキストの例。代替テキストを付与することは、スクリーンリーダー以外にも、点字ディスプレイや、画像を表示できない状況の人にも有用となる。 Andrey_Popov/Shutterstock

WCAGが示す基準は多岐にわたり、複雑に感じるものも多いが、インクルーシブな社会の実現のためにはなくてはならないもの。基本的にはウェブサイトを制作する人が配慮するためのものではあるが、その内容や理由を知ることは、障害のある人や高齢者がどのようにインターネットを利用しているかを知るきっかけにもなるはず。

今回、ウェブアクセシビリティの普及・啓発などを行うウェブアクセシビリティ基盤委員会(外部リンク)の伊原力也(いはら・りきや)さんにWCAGが求める表現などを伺い、障害の有無にかかわらず誰もが利用できるウェブサイトとはどんなものなのかを考えていきたい。

ウェブアクセシビリティが浸透していない現状

――改めて、WCAGとは一体どんな基準なのでしょうか?

伊原力也さん(以下、敬称略):ウェブアプリケーションやウェブサイトを使える人を、なるべく増やすようにするための達成基準です。この基準を満たすと、そのウェブサイトを使える人がより広がるという感じです。

アクセシビリティというと、視覚障害のある方が対象になるというイメージを持つ人が多いかもしれませんが、動画の視聴が難しい聴覚障害の方や、マウスやキーボードを十分に動かせない上肢障害の方、もっと言うと「電車内で動画を見たいのにイヤホンを忘れてしまった」など、一時的に障害がある状態とみなせる方も対象として考慮しています。

伊原さんはウェブアクセシビリティ基盤委員会の委員であり、クラウド会計ソフトなどを開発する freee株式会社(外部リンク)のデザイナーでもある

――ウェブサイトへのアクセスや利用に困難のある、全ての人が対象となるということですね。なぜそのような基準が定められているのですか?

伊原:障害のある方はさまざまなツールを使ってウェブサイトを見ていますので、これらのツールの利用を想定して、対応できるようにするためです。

――具体的にはどのようなツールを使っているのでしょうか?

伊原:ツールの説明はとても広範囲にわたるので、基本的な考え方をお伝えします。私たちが日頃使うパソコンやスマートフォン、タブレットといったデバイスは、マウスやタッチパネルなどのポインティングデバイス(※)と呼ばれるものと、キーボード、画面の3つで1セットになっています。そのそれぞれを、障害のある方は自身が使えるツールに置き換えて利用しています。

例えば、手を動かしにくい方のためのマウスや視線入力装置、画面が見えない方のスクリーンリーダーなどがこれにあたります。

  • コンピュータ上でポイント(入力位置を指し示したり座標を指し示したりする)するための入力装置の総称。マウスやタッチパネル、ペンタブレット、タッチパッド、トラックボール、ジョイスティックなどの種類がある
デバイスを操作するツールはさまざま。画像は震えや緊張のあるユーザーのために設計された「らくらくマウスⅢ ジョイスティック型」。画像提供:テクノツール株式会社
ジョーズ+でパソコンを操作する男性
口元でパソコンを操作できるツール「ジョーズ+」。画像提供:Compusult Limited.

――企業などのサイトを制作する際は、必ずこのWCAGを満たす必要があるということでしょうか?

伊原:いえ、満たすものはまだ少ないのが現状です。理由としては、「ウェブアクセシビリティを考慮しなければならない」と言い切る法律がないことが大きいのではないかと思います。

障害者差別解消法(※1)が改正され、民間企業でも合理的配慮(※2)の提供は義務(2024年4月1日施行)となりましたが、「どこまでを合理的とするのか?」というのも、まだまだ議論がなされている状況ですしね。

  • 1.全ての国民が障害の有無によって分け隔てられることなく、相互に人格と個性を尊重し合いながら共生する社会の実現に向け、障害を理由とする差別の解消を推進することを目的として、2013年6月に制定
  • 2.障害の有無にかかわらず、誰もが平等に権利を享受しできるよう、個人の特徴や状況に応じた調整を行うこと
セミナーを行う伊原さん(右端)。ウェブアクセシビリティを普及するための啓発活動にも力を入れている。画像提供:ウェブアクセシビリティ基盤委員会

――WCAGの浸透具合というのはどのくらいですか?

伊原:ウェブサイトの数が多いため把握をするのが難しく、私の肌感覚になるのですが、日本のサイトで言うと、まだ数パーセントしか浸透していないというレベルだと思っています。認知度は毎年上がってきているとは思いますが、その必要性を感じて実施できている企業は少ないというのが現状です。

――では、役所などの公共サイトの場合はどうでしょうか?

伊原:こちらも満たせていないですね。公共サイトの場合は「みんなの公共サイト運用ガイドライン」(外部リンク)というものがあり、「この基準を守ってくださいね」というお達しが出ています。総務省はセミナーを開いたり、各公共機関のウェブサイトがどれくらい達成できているか、チェック結果を自治体に送ったりするなど啓発活動をしているのですが、全ての公共サイトに行きわたっているとは言い難いですね。

図表:団体種別ごとの「問題あり(適合レベルA、及びAA※)」が検出されたページの割合

国の機関は46団体で41.43パーセント
町村は920団体で52.21パーセント
独立行政法人は87団体で75.54パーセント
地方独立行政法人148団体で79.90パーセント
合計 1,201団体で55.08パーセント
2022年4月に公表された公的機関ホームページのウェブアクセシビリティ対応状況。問題ありと判断されたページが半分以上という結果に。出典:「公的機関のウェブアクセシビリティ確保の取組実施状況に関する調査」総務省(外部リンク/PDF)
  • 適合レベル:Aは適合の最低レベルとなり、AA,AAA の順により高いレベルとなる

当事者目線が重要。ウェブアクセシビリティのルール

――ここからはウェブサイトやコンテンツを作成する際に、実際に気を付けなければいけないことを教えていただけますか?

伊原:はい。実際にはかなりの項目がありますので、代表的なものをいくつかお伝えします。まず、ロゴ、写真、イラストなどに対しては代替テキストを付与しなくてはなりません。

――付与するというのは具体的にはどういうことですか?

伊原:ウェブサイトはテキスト情報、見出し、リンク、画像などの情報をHTMLという言語を使って示すのですが、このHTML上に画像の情報をテキストとして付与するという意味です。

図:画像とそれに付与する代替テキストの例

画像として「図の中心に人に優しいデジタル化と書かれていて、取り囲むように、地域を支える、世界を支える、国を支える、産業をさせる、個人を支える」という図が描かれており、その右側に「その画像に付与すべき代替テキスト」が以下のようにHTMLで記してある。

<img loading=
画像には代替テキストというものを付与し、説明する。引用:デジタル庁発行「ウェブアクセシビリティ導入ガイドブック」

伊原:ここでもう1つ注意したいのが、飾りで置いてあるものに対して代替テキストを付与すると、逆にノイズになってしまうということです。

――飾りで置いてあるものとは?

伊原:例えば背景画像に「背景」と代替テキストを付与すると、スクリーンリーダーではいちいち「背景」と読み上げられてしまい、冗長となってしまいます。飾りの場合、代替テキストは空にする必要があります。

――なんでも入れればいいというわけじゃないんですね。

伊原:はい。他にも機能を持つアイコンボタンに、アイコンの見た目そのままの代替テキストを入れてしまうというのもやりがちです。例えば、次のようなメニュー画面があったとします。

歯車のアイコンボタンがありますが、この歯車に「歯車」と代替テキストを付与するのは間違いです。このアイコンは歯車を表したいわけではないからです。代替テキストを付与するのであれば「設定」が妥当でしょう。

このように代替テキストは、画像をそのまま入力するのではなく、“当事者の立場”になって入力しないと成り立ちません。

画像:GoogleのTOPページの設定アイコンに丸がついている
よく見るタイプのメニュー画面

――色に関してもルールがあるとお聞きしました。

伊原:色に関してWCAGが求めているのは、視認性を上げるため、文字と背景の間に十分なコントラスト比を保つということです。色弱の方や高齢者の方は、ある程度のコントラスト比がないと読みづらくなってしまいます。

画像:文字と背景の間に十分なコントラスト比を保つというルールの例

NGの例としてカラーコード#AAAAAA(薄い灰色)をした四角形の上に白で「コントラスト」と書かれている。この場合コントラスト比は2.32:1となるためNG。

OKの例としてカラーコード#666666(濃い灰色)をした四角形の上に白で「コントラスト」と書かれている。

この場合コントラスト比は5.74:1となるためOK。
文字と背景の間に十分なコントラスト比(1:4.5以上)を保つことが求められる。引用:デジタル庁発行「ウェブアクセシビリティ導入ガイドブック」

伊原:また、「色のみで情報を伝えてはいけない」というルールもあります。次の図が分かりやすいかと思いますが、「赤文字の箇所は入力必須です」と書いてしまうと、色覚特性のある方や、スクリーンリーダーを使用している場合、どの文字が赤いのか判別できません。

また、これは色だけでなく「太字、下線、拡大表現等だけで情報を伝えてはいけない」というガイドラインも設けられています。

画像:赤字・太字・下線・拡大など単一の表現のみで情報を伝えてはいけない」というルールの例(住所入力フォーム)

NGの例として「赤文字の箇所は入力必須です」と書かれており、その下に赤文字で「住所」と書かている。その下に住所を入力するフォームがある。

OKの例として「住所(必須)」と書かれている。その下に住所を入力するフォームがある。
色、太字、下線、拡大などの表現だけで情報を伝えてはいけない。引用:デジタル庁発行「ウェブアクセシビリティ導入ガイドブック」

――動画コンテンツを作る際にはどのような配慮が求められているのでしょうか?

伊原:映像が見えなくても、音が聞こえなくても伝わるようにすることですね。さらに言えばその両方がなくても伝わるようにするということです。

音声に関しては字幕を入れるというやり方がありますが、「発話者の字幕だけでいいのか?」という話もあって、重要な効果音等も字幕にする必要があるかと思います。

画像:「音声・映像コンテンツに代替コンテンツを付与する」というルールの例

女性が男性に話しかけている動画のようなイラスト。字幕に「誰一人取り残されない、人に優しいデジタル化の実現のため、」と書いてある。

●前後のテキスト、プレイヤーのラベルなどから、音声、映像コンテンツの存在や種別を認知できるようにしてください
●3秒以上のコンテンツでは、自動再生を行わないでください
●プレイヤーを用いて、一時停止、停止することができるようにしてください
●プレイヤーを操作した後でも他のコンテンツにアクセスできるようにしてください
●会話の内容や重要な効果音などが伝わるようなキャプション(字幕)を提供してください
●登場人物の動作や表情、場面の移り変わりなど視覚的な情報を音声で伝える「音声解説」を提供してください
動画・音声コンテンツを掲載する際の注意。引用:デジタル庁発行「ウェブアクセシビリティ導入ガイドブック」

――そのような配慮をすると、コストもかかってしまいそうですね。

伊原:そうですね。ですので、現状では自動的に字幕をつけてくれる基本機能をもつYouTubeを活用し、変な文章になってしまっているところは手直ししたり、文字起こしツールを使ってキャプションをつけたりするなどして補っていくのがいいのかなと思います。

――他にも一般的には使われている表現で、WCAG基準ではNGのものはありますでしょうか?

伊原:よく見かけるのは、マウスオーバーという表現ですね。これには2つ問題があって、1つは単純にマウス使用前提の表現であるということ。デバイスによってはマウスオーバー自体が機能しません。

もう1つは、見えづらさから画面を拡大して使っている人に対して非常に問題があります。拡大機能は見える範囲がマウスカーソルに追従するものが多いので、マウスオーバーが使われていると、いつのまにかメニューが画面全体に表示されて「どうなったんだ?」となってしまいます。

画像:マウスオーバーで展開するメニュー。メインメニュの1つにカーソルを載せると、右側にサブメニューが展開し、クリックできるようになっているタイプのメニュー
マウスカーソルを重ねることで起きる処理のことを「マウスオーバー」という。マウスオーバーするとメニューが展開表示されるタイプは、よく見かけるのではないだろうか
イラスト:PCの画面全体にマウスオーバーで展開したメニューが表示され、困っている人
画面拡大機能とマウスオーバーの相性は良くない

――それは混乱しますね……。

伊原:はい。なんとか読もうとしても、カーソルがマウスオーバーの範囲を外れると、メニューは消えてしまいますし……。個人的にはマウスオーバーという表現自体、封印してもいいのではないかと思っています。

画像:その他のウェブアクセシビリティで達成すべきことの例

●自動再生はさせない
●袋小路に陥らせない
●操作に制限時間を設けない
●自動でコンテンツを切り変えない
●点滅の間隔に気をつける
●リンクを適切に表現する
その他にもウェブアクセシビリティで達成すべきことはまだまだある。詳細は「ウェブアクセシビリティ導入ガイドブック」(外部リンク)参照

他者の生活を知ることが、誰も取り残されないウェブ社会の実現に

――さまざまな表現が、ある人にとっては「伝わらない」ということが理解できました。こういったウェブアクセシビリティを浸透させるにはどうすればよいのでしょうか?当事者側が声を上げて伝える必要があるのでしょうか?

伊原:声を上げようにも、利用できないサイトが多過ぎて声を上げるのが大変ですし、言ったところで「検討します」で終わってしまうということも多いと聞きます。私自身もウェブ制作に携わる者として恥ずかしいのですが、そういう状況なんです。

行動すべきは企業等のウェブサイトを作っている側ではないかと。そのためにも法律の力は大きいので、そこをいかに押し上げられるかだと思っています。企業側も多様な人に対応できるサイトを作った方が、サービスとして成長していくという観点を持ってもらえるといいのかなと思います。

――誰もが利用できるウェブサイトを増やしていくために、一人一人ができることは何でしょうか?

伊原:まずは当事者の生活を知ることだと思います。ウェブアクセシビリティが伝わっていない理由として、「人間は知らないものを想像することは難しい」ということがあると思うんですよ。

例えば、他の人がどのようにウェブサイトを見ているかを知ること。ウェブアクセシビリティを推進しようとしている人たちは、「自分の作ったものが届かなかった人がいる」と感じて、活動を始める方が多いんです。現状を知ることが、行動につながっていくのではないでしょうか。

ウェブアクセシビリティ基盤委員会としても、啓発活動を続けていきたいと話す伊原さん

ウェブ制作とは関係がない人でも、ぜひデジタル庁が発行している「ウェブアクセシビリティ導入ガイドブック」(外部リンク)を一度見てほしい。当たり前のように使われている表現が、いかに読む人を限定する表現なのか気付くはずだ。

日本財団ジャーナルでも、有識者の意見を参考にウェブアクセシビリティの確保と向上に取り組み、基準となる規格「JIS X 8341-3:2016」のレベルAAに準拠している。

ウェブアクセシビリティについて考える人が一人でも増えることを願う。

参考図書:伊原力也,小林大輔,桝田草一,山本伶 著,『Webアプリケーションアクセシビリティ』. 技術評論社, 2023.

〈プロフィール〉

伊原力也(いはら・りきや)

2004年に株式会社ビジネス・アーキテクツに入社し、情報アーキテクトとして活動。2017年にfreee株式会社に入社。多様な働き方の実現を目指し、デザインチームのマネジメントおよびアクセシビリティ普及啓発を行う。外部コンサルタントとしてnote、Ubie、STUDIO、東京都新型コロナウイルス感染症対策サイトのアクセシビリティ改善をサポート。ウェブアクセシビリティ基盤委員会(WAIC)委員、人間中心設計推進機構(HCD-Net)評議委員。著書(共著)に『Webアプリケーションアクセシビリティ』などがある。
ウェブアクセシビリティ基盤委員会 公式サイト(外部リンク)

  • 掲載情報は記事作成当時のものとなります。