社会のために何ができる?が見つかるメディア
障害の有無にかかわらず誰もがネットを利用できるよう覚えておきたい「ウェブアクセシビリティ」とは?
- ウェブアクセシビリティとは、全ての人がウェブサイト等を利用できるように設計する概念
- 世界基準のガイドラインもあるが、複雑なルールも多く日本では浸透しきっていない現状がある
- けがや老化など、誰であれネットから情報を得にくくなる可能性がある。人ごとにしてはいけない
取材:日本財団ジャーナル編集部
あなたは「ウェブアクセシビリティ」という言葉を耳にしたことはあるだろうか?
アクセシビリティはアクセスできる度合いを意味する言葉で、転じて、製品やサービスを利用できる状況の幅広さという意味でも使われる。ウェブアクセシビリティはそれのウェブ版だ。
視覚や聴覚に障害のある人、高齢者などを含めた全ての人が、ウェブサイトで提供される情報にアクセスできるようにすることを「ウェブアクセシビリティを確保する」などと言う。
さて、このウェブアクセシビリティには「WCAG※」(外部リンク)という、世界基準のガイドラインが設けられている。
- ※ 「Web Content Accessibility Guidelines」の略称
例えば、視覚に障害がある人は、スクリーンリーダーと呼ばれるソフトを使ってウェブサイト上の情報を音声で読み上げたり、点字ディスプレイに出力したりして情報を得ている。
しかし、スクリーンリーダーでは画像を表現することができない。そこで「写真・イラストなど画像を使用する場合は、代替テキストを付与し、何が表示されているか伝わるようにする」といったガイドラインが設けられている。
WCAGが示す基準は多岐にわたり、複雑に感じるものも多いが、インクルーシブな社会の実現のためにはなくてはならないもの。基本的にはウェブサイトを制作する人が配慮するためのものではあるが、その内容や理由を知ることは、障害のある人や高齢者がどのようにインターネットを利用しているかを知るきっかけにもなるはず。
今回、ウェブアクセシビリティの普及・啓発などを行うウェブアクセシビリティ基盤委員会(外部リンク)の伊原力也(いはら・りきや)さんにWCAGが求める表現などを伺い、障害の有無にかかわらず誰もが利用できるウェブサイトとはどんなものなのかを考えていきたい。
ウェブアクセシビリティが浸透していない現状
――改めて、WCAGとは一体どんな基準なのでしょうか?
伊原力也さん(以下、敬称略):ウェブアプリケーションやウェブサイトを使える人を、なるべく増やすようにするための達成基準です。この基準を満たすと、そのウェブサイトを使える人がより広がるという感じです。
アクセシビリティというと、視覚障害のある方が対象になるというイメージを持つ人が多いかもしれませんが、動画の視聴が難しい聴覚障害の方や、マウスやキーボードを十分に動かせない上肢障害の方、もっと言うと「電車内で動画を見たいのにイヤホンを忘れてしまった」など、一時的に障害がある状態とみなせる方も対象として考慮しています。
――ウェブサイトへのアクセスや利用に困難のある、全ての人が対象となるということですね。なぜそのような基準が定められているのですか?
伊原:障害のある方はさまざまなツールを使ってウェブサイトを見ていますので、これらのツールの利用を想定して、対応できるようにするためです。
――具体的にはどのようなツールを使っているのでしょうか?
伊原:ツールの説明はとても広範囲にわたるので、基本的な考え方をお伝えします。私たちが日頃使うパソコンやスマートフォン、タブレットといったデバイスは、マウスやタッチパネルなどのポインティングデバイス(※)と呼ばれるものと、キーボード、画面の3つで1セットになっています。そのそれぞれを、障害のある方は自身が使えるツールに置き換えて利用しています。
例えば、手を動かしにくい方のためのマウスや視線入力装置、画面が見えない方のスクリーンリーダーなどがこれにあたります。
- ※ コンピュータ上でポイント(入力位置を指し示したり座標を指し示したりする)するための入力装置の総称。マウスやタッチパネル、ペンタブレット、タッチパッド、トラックボール、ジョイスティックなどの種類がある
――企業などのサイトを制作する際は、必ずこのWCAGを満たす必要があるということでしょうか?
伊原:いえ、満たすものはまだ少ないのが現状です。理由としては、「ウェブアクセシビリティを考慮しなければならない」と言い切る法律がないことが大きいのではないかと思います。
障害者差別解消法(※1)が改正され、民間企業でも合理的配慮(※2)の提供は義務(2024年4月1日施行)となりましたが、「どこまでを合理的とするのか?」というのも、まだまだ議論がなされている状況ですしね。
- ※ 1.全ての国民が障害の有無によって分け隔てられることなく、相互に人格と個性を尊重し合いながら共生する社会の実現に向け、障害を理由とする差別の解消を推進することを目的として、2013年6月に制定
- ※ 2.障害の有無にかかわらず、誰もが平等に権利を享受しできるよう、個人の特徴や状況に応じた調整を行うこと
――WCAGの浸透具合というのはどのくらいですか?
伊原:ウェブサイトの数が多いため把握をするのが難しく、私の肌感覚になるのですが、日本のサイトで言うと、まだ数パーセントしか浸透していないというレベルだと思っています。認知度は毎年上がってきているとは思いますが、その必要性を感じて実施できている企業は少ないというのが現状です。
――では、役所などの公共サイトの場合はどうでしょうか?
伊原:こちらも満たせていないですね。公共サイトの場合は「みんなの公共サイト運用ガイドライン」(外部リンク)というものがあり、「この基準を守ってくださいね」というお達しが出ています。総務省はセミナーを開いたり、各公共機関のウェブサイトがどれくらい達成できているか、チェック結果を自治体に送ったりするなど啓発活動をしているのですが、全ての公共サイトに行きわたっているとは言い難いですね。
図表:団体種別ごとの「問題あり(適合レベルA、及びAA※)」が検出されたページの割合
- ※ 適合レベル:Aは適合の最低レベルとなり、AA,AAA の順により高いレベルとなる
当事者目線が重要。ウェブアクセシビリティのルール
――ここからはウェブサイトやコンテンツを作成する際に、実際に気を付けなければいけないことを教えていただけますか?
伊原:はい。実際にはかなりの項目がありますので、代表的なものをいくつかお伝えします。まず、ロゴ、写真、イラストなどに対しては代替テキストを付与しなくてはなりません。
――付与するというのは具体的にはどういうことですか?
伊原:ウェブサイトはテキスト情報、見出し、リンク、画像などの情報をHTMLという言語を使って示すのですが、このHTML上に画像の情報をテキストとして付与するという意味です。
伊原:ここでもう1つ注意したいのが、飾りで置いてあるものに対して代替テキストを付与すると、逆にノイズになってしまうということです。
――飾りで置いてあるものとは?
伊原:例えば背景画像に「背景」と代替テキストを付与すると、スクリーンリーダーではいちいち「背景」と読み上げられてしまい、冗長となってしまいます。飾りの場合、代替テキストは空にする必要があります。
――なんでも入れればいいというわけじゃないんですね。
伊原:はい。他にも機能を持つアイコンボタンに、アイコンの見た目そのままの代替テキストを入れてしまうというのもやりがちです。例えば、次のようなメニュー画面があったとします。
歯車のアイコンボタンがありますが、この歯車に「歯車」と代替テキストを付与するのは間違いです。このアイコンは歯車を表したいわけではないからです。代替テキストを付与するのであれば「設定」が妥当でしょう。
このように代替テキストは、画像をそのまま入力するのではなく、“当事者の立場”になって入力しないと成り立ちません。
――色に関してもルールがあるとお聞きしました。
伊原:色に関してWCAGが求めているのは、視認性を上げるため、文字と背景の間に十分なコントラスト比を保つということです。色弱の方や高齢者の方は、ある程度のコントラスト比がないと読みづらくなってしまいます。
伊原:また、「色のみで情報を伝えてはいけない」というルールもあります。次の図が分かりやすいかと思いますが、「赤文字の箇所は入力必須です」と書いてしまうと、色覚特性のある方や、スクリーンリーダーを使用している場合、どの文字が赤いのか判別できません。
また、これは色だけでなく「太字、下線、拡大表現等だけで情報を伝えてはいけない」というガイドラインも設けられています。
――動画コンテンツを作る際にはどのような配慮が求められているのでしょうか?
伊原:映像が見えなくても、音が聞こえなくても伝わるようにすることですね。さらに言えばその両方がなくても伝わるようにするということです。
音声に関しては字幕を入れるというやり方がありますが、「発話者の字幕だけでいいのか?」という話もあって、重要な効果音等も字幕にする必要があるかと思います。
――そのような配慮をすると、コストもかかってしまいそうですね。
伊原:そうですね。ですので、現状では自動的に字幕をつけてくれる基本機能をもつYouTubeを活用し、変な文章になってしまっているところは手直ししたり、文字起こしツールを使ってキャプションをつけたりするなどして補っていくのがいいのかなと思います。
――他にも一般的には使われている表現で、WCAG基準ではNGのものはありますでしょうか?
伊原:よく見かけるのは、マウスオーバーという表現ですね。これには2つ問題があって、1つは単純にマウス使用前提の表現であるということ。デバイスによってはマウスオーバー自体が機能しません。
もう1つは、見えづらさから画面を拡大して使っている人に対して非常に問題があります。拡大機能は見える範囲がマウスカーソルに追従するものが多いので、マウスオーバーが使われていると、いつのまにかメニューが画面全体に表示されて「どうなったんだ?」となってしまいます。
――それは混乱しますね……。
伊原:はい。なんとか読もうとしても、カーソルがマウスオーバーの範囲を外れると、メニューは消えてしまいますし……。個人的にはマウスオーバーという表現自体、封印してもいいのではないかと思っています。
他者の生活を知ることが、誰も取り残されないウェブ社会の実現に
――さまざまな表現が、ある人にとっては「伝わらない」ということが理解できました。こういったウェブアクセシビリティを浸透させるにはどうすればよいのでしょうか?当事者側が声を上げて伝える必要があるのでしょうか?
伊原:声を上げようにも、利用できないサイトが多過ぎて声を上げるのが大変ですし、言ったところで「検討します」で終わってしまうということも多いと聞きます。私自身もウェブ制作に携わる者として恥ずかしいのですが、そういう状況なんです。
行動すべきは企業等のウェブサイトを作っている側ではないかと。そのためにも法律の力は大きいので、そこをいかに押し上げられるかだと思っています。企業側も多様な人に対応できるサイトを作った方が、サービスとして成長していくという観点を持ってもらえるといいのかなと思います。
――誰もが利用できるウェブサイトを増やしていくために、一人一人ができることは何でしょうか?
伊原:まずは当事者の生活を知ることだと思います。ウェブアクセシビリティが伝わっていない理由として、「人間は知らないものを想像することは難しい」ということがあると思うんですよ。
例えば、他の人がどのようにウェブサイトを見ているかを知ること。ウェブアクセシビリティを推進しようとしている人たちは、「自分の作ったものが届かなかった人がいる」と感じて、活動を始める方が多いんです。現状を知ることが、行動につながっていくのではないでしょうか。
ウェブ制作とは関係がない人でも、ぜひデジタル庁が発行している「ウェブアクセシビリティ導入ガイドブック」(外部リンク)を一度見てほしい。当たり前のように使われている表現が、いかに読む人を限定する表現なのか気付くはずだ。
日本財団ジャーナルでも、有識者の意見を参考にウェブアクセシビリティの確保と向上に取り組み、基準となる規格「JIS X 8341-3:2016」のレベルAAに準拠している。
ウェブアクセシビリティについて考える人が一人でも増えることを願う。
参考図書:伊原力也,小林大輔,桝田草一,山本伶 著,『Webアプリケーションアクセシビリティ』. 技術評論社, 2023.
〈プロフィール〉
伊原力也(いはら・りきや)
2004年に株式会社ビジネス・アーキテクツに入社し、情報アーキテクトとして活動。2017年にfreee株式会社に入社。多様な働き方の実現を目指し、デザインチームのマネジメントおよびアクセシビリティ普及啓発を行う。外部コンサルタントとしてnote、Ubie、STUDIO、東京都新型コロナウイルス感染症対策サイトのアクセシビリティ改善をサポート。ウェブアクセシビリティ基盤委員会(WAIC)委員、人間中心設計推進機構(HCD-Net)評議委員。著書(共著)に『Webアプリケーションアクセシビリティ』などがある。
ウェブアクセシビリティ基盤委員会 公式サイト(外部リンク)
- ※ 掲載情報は記事作成当時のものとなります。