COLUMNコラム
Webアクセシビリティとは?メリットや高めるポイントも解説
インターネットの利用が広く普及するにつれ、Web上での情報アクセスに対する利便性の確保がかつてなく求められるようになってきています。そして、近時目にし耳にすることの多い「Webアクセシビリティ」とは、まさにこの利便性を指標化した概念に他なりません。
本コラムでは、Webアクセシビリティの内容やこれまでの歴史から、その向上がもたらすメリットや高めるポイントまでを一気に解説していきます。
ユーザーがアクセスしやすく、かつページ内容を容易に理解できるWebサイト構築に向けたささやかな気づきにしていただければ幸いです。
Webアクセシビリティとは
Web制作に実際に携わっている方や興味をお持ちの方であれば、「Webアクセシビリティ」という言葉を一度は聞いたことがあるでしょう。
ここではまず、Webアクセシビリティの概要を説明します。
「アクセシビリティ」の意味
Webアクセシビリティに使われている「アクセシビリティ(accessibility)」という言葉は、access(接近する、入手する)とability(能力、~できる)の2つの語が掛け合わされた造語です。
辞書によれば、「近づきやすいこと、物を得やすいこと」の意を表し、転じて「道具などの使いやすさ、情報やサービスに対する利用のしやすさ」を示す意味としても使われます。
Webアクセシビリティの定義
「Webアクセシビリティ」とは、Webおけるアクセシビリティのことです。ここで使われるアクセシビリティは、先にみた辞書が示す意味のうちの「利用のしやすさ」になります。
Webアクセシビリティの概念を一文でまとめると、次のように表せるでしょう。
「Webアクセシビリティとは、年齢や身体的条件、障害の有無やその度合い、利用環境などにかかわらず、誰もがWebで提供される情報やサービスを利用できること、または情報・サービスへの到達のしやすさのことである」
インターネットは、今や我々の生活に欠かせないインフラの1つです。スマホユーザーも珍しくなくなり、利用のしやすさの確保が今後ますます重要になっていくことは間違いありません。誰もが不自由なくWebサイトを利用できる環境の整備が広く求められています。
Webアクセシビリティとは、このような環境が、Webサイトにおいてどの程度整えられているかを表す指標です。根底にはユニバーサルデザインの考え方があり、その向上はネットにおけるバリアフリー化にもつながるものと言えるでしょう。
Webユーザビリティとの違い
Webアクセシビリティと似た概念であることから混同されがちな言葉が、「Webユーザビリティ」です。両者は共に「ユーザーにとっての使いやすさ」を目指しますが、検証の中身や対象となるユーザーの幅が異なります。
この違いは、日本工業規格である『JIS Z 8521:1999』が示すユーザビリティの定義に基づきます。そこでは、ユーザビリティとは、特定のユーザーが、特定の目的を持ちながら、特定の利用状況において使用する際の評価であると明記されているからです。
Webアクセシビリティの究極的な目標は、属性にかかわらず誰もが使いやすいWebサイトの構築です。対して、Webユーザビリティでは、想定する特定のユーザーから見た使いやすさが目指されることになります。
この違いは、「使いやすいか」(Webユーザビリティ)と、「そもそも使えるのか」(Webアクセシビリティ)との違いとも言い換えられます。すなわち、Webユーザビリティは、Webアクセシビリティの確保を前提に成り立つ判断指標に他ならないのです。
人によっては「誰もが使いやすいWebサイトの方がいいに決まっているではないか」と思われるでしょう。とはいえ、至れり尽くせりの仕様が、時としてターゲット層の利便性を損なうことは十分考えられます。
そこで、幅広いユーザーがターゲットのWebサイトでは、Webアクセシビリティを指標に置くのがおすすめです。一方で、限られたユーザーに情報やサービスを提供するサイトであれば、Webユーザビリティを指標化するとよいでしょう。
WebアクセシビリティとWebユーザビリティ、どちらかが他方よりも優れているということではありません。状況に応じて適切に使い分けていくことが大切なのです。
Webアクセシビリティのこれまでの歩みと近時の潮流
では、こうしたWebアクセシビリティの考え方は、いかにして広く通用するようになったのでしょうか。そして、今まさにどのような課題に直面しつつあるのでしょうか。
以下、これまでの歩みと近時の潮流をみていきましょう。
ルーツはユニバーサルデザインの思想
既に軽く触れたように、Webアクセシビリティは、ユニバーサルデザインの思想をルーツに持つ概念です。この思想は、1980年代のアメリカで、自身も身体に障害を抱えるロナルド・メイスによって提唱されました。
ユニバーサルデザインは、「すべての人が人生のある時点で何らかの障害をもつ可能性がある」ことを発想の起点にしています。健常者でも怪我により一時的に身体の自由が利かなくなったり、言葉が通じない土地に行けば移動制約者になったりすることがあるからです。
当初ユニバーサルデザインが目指したのは、障害の解消が中心でした。しかし、障害者目線に立ったデザインの利便性の高さが広く知られるようになるにつれ、「障害者にとり便利なものは、誰にとっても便利なものである」と受け取られるようになっていきます。
アクセシビリティとは、デザインが持つこうした利便性の高さ、すなわちどのくらい「使いやすいか」を表す指標です。そのため、ユニバーサルデザインの思想に基づいてつくられた商品やサービスには、一般に高いアクセシビリティが備わっていると言えます。
ユニバーサルデザインとアクセシビリティの関係性は、Web上でも同じです。Webアクセシビリティの高いサイトとは、誰もが使いやすいWebサイトを指します。そして、この使いやすさを生むのは、ユニバーサルデザインへの意識の高さに他なりません。
日本でも20年弱の歴史がある
日本におけるWebアクセシビリティの歩みは、2004年制定の「JIS X 8341-3」に始まったと考えるのが一般的です。JIS X 8341-3とは、国内外のアクセシビリティガイドラインを参考につくられた、Webコンテンツのアクセシビリティ確保に関するJIS規格を指します。
以降JIS X 8341-3は、2010年と2016年の2回、「WCAG 2.0」の策定や国際規格化と歩調を合わせる形で改定が行われています。
特に、現行のJIS X 8341-3になった2016年の改定は、Webアクセシビリティに関する一連の変遷の中でも重要度の高い出来事と言えるでしょう。新たな規格が、直後に施行された「障害者差別解消法」の実効性を高めるうえで大きな役割を果たすことになったからです。
本法律により、「合理的配慮の提供」が民間企業でも法的義務になりました。国際基準であるWCAG 2.0と同一になった現行規格への準拠も、多くの企業で進みつつあります。Webアクセシビリティの高い環境のさらなる整備が、今後も期待されていると言えるでしょう。
近時は障害者限定の特別な対応から脱却しつつある
歴史的には障害者向けの指標だったWebアクセシビリティですが、近時はその確保の必要性が社会全体で高まっています。続々と登場するデバイスが、Webサイトを訪れるあらゆるユーザーに対して、臨機応変さや固有の使い方の習得を迫るようになったためです。
デバイスの違いから、画面でのコンテンツの見え方が多少変わってしまうのは仕方がありません。しかし、使用するデバイスにより必要な情報にアクセスできなかったり、しにくかったりするのでは、Webアクセシビリティを確保できているとは言えないでしょう。
「ユーザーが受け取る情報は、コンテンツが一緒であればデバイスや流入経路に関わらず同一であるべきである」。これが今共有されつつある、Webアクセシビリティの基本的な考え方です。その達成に向け、誰もが利用しやすいWebデザインの構築が求められています。
とはいえ、誰もが利用しやすいWebデザインとは、必ずしも多種多様な支援機能の実装を意味しません。今はさまざまなハンデ向けの支援ソフトが充実しているからです。抱える特性に関わらず、ユーザーが等しく情報にアクセスできるサイト制作こそが求められています。
その中身については、最終章で詳述します。
その前に、次章ではWebアクセシビリティの向上がもたらすメリットをみていきましょう。
Webアクセシビリティの向上がもたらすメリットとは
WebサイトのWebアクセシビリティが向上すると、たとえば次のようなメリットが期待できます。
- 全てのユーザーにとり使い勝手のよいWebサイトになる
- 好きなデバイスからWebサイトにアクセスできるようになる
- 検索エンジンがWebサイトの構造や内容を理解しやすくなる
以下、順に解説していきます。
全てのユーザーにとり使い勝手のよいWebサイトになる
全てのユーザーにとり使い勝手のよいWebサイトになる、これはいわば当然の帰結です。まさにそのためにWebアクセシビリティの向上に取り組む訳ですから。
ユニバーサルデザインの説明でも触れたように、人はいつ不自由さを強いられるか分かりません。誰でも歳を取りますし、若くても常に健康でいられるとは限らないからです。
一向に歯止めがかかる気配のない少子高齢化の問題もあります。特性を抱えながらも働く意欲を失っていない障害者や高齢者の社会参加が今ほど求められている時代は、おそらくありません。
Webアクセシビリティの向上は、現下のこうした課題や困難さを打破するうえで欠かせない取り組みです。さまざまな特性や不自由さに配慮したサイトづくりは、QOLの向上はもとより、国が目指す多様で柔軟な働き方の実現にもつながるものと言えるでしょう。
好きなデバイスからWebサイトにアクセスできるようになる
Webサイトとのやりとりに使われるデバイスは、PCだけではありません。スマホやタブレット端末、テレビやゲーム機といったさまざまなデバイスからのアクセスもアクセシビリティの利用環境として想定しておく必要があります。
さらに言えば、考慮すべき要素はデバイスに限られません。OSやブラウザなどのソフトウェア、マウスやディスプレイなどの操作手段の種類もいろいろあります。スクリーンリーダーやオンスクリーンキーボードなどの支援技術が用いられることもあるでしょう。
Webアクセシビリティの確保に向けては、こうした多種多様な利用環境でのアクセス障害リスクを一つ一つクリアしていかなければなりません。奏効すれば、デバイスやソフトウェア、ツールに依存しないWebサイトへのスムーズなアクセスが実現します。
検索エンジンがWebサイトの構造や内容を理解しやすくなる
Webアクセシビリティの向上は、検索エンジンがWebサイトの構造や内容を理解する助けにもなります。ユーザーが欲する情報にアクセスしやすいWebサイトは、検索エンジンのクローラーにとっても見通しのよい構造になっていることが多いからです。
たとえば、後述する画像に対する代替テキストの設定です。視覚障害者がどのような画像なのかを理解する助けになることはよく知られていますが、同時に検索エンジンが画像をテキスト情報として認識できるようにもなります。
検索エンジンによる正確な情報の把握は、Webサイトが検索結果の上位に表示される確率を高めるでしょう。結果として、視覚障害者だけでなく、すべての検索ユーザーに対して情報を届けやすくなるというメリットが期待できるのです。
Webアクセシビリティを高めるポイントとは
では、具体的にどのようにしてWebアクセシビリティを高めたらよいのでしょうか。
以下、6つのポイントをご紹介します。
簡潔でページの主題がはっきりわかるタイトルをつける
Webサイトの各ページには、簡潔でそのページの主題がはっきりわかるタイトルをつけましょう。タイトルは、ユーザーがWebサイトにアクセスする際に自身が必要とする情報が載せられているかどうかを見極める「看板」的な役割を果たすものだからです。
タイトルはまた、複数のWebサイトを同時にブラウザー上で開く際のタブや、お気に入りなどにも表示されます。利便性の向上に向けては、マウスでポイントしたり、一見したりしただけでページのテーマが分かるタイトルが欠かせません。
特に「音声ブラウザ」では、まずページのタイトルを読み上げます。主題がきちんと伝わるタイトルが付けられていなければ、最後まで聴かないとユーザーがページ内容を把握することができないでしょう。
こうした主題がきちんと伝わるタイトルがもたらすメリットは、アクセシビリティの向上だけではありません。検索エンジンにとってもページ内容を理解しやすくなるため、SEO的にも有効です。
文字と背景色とのコントラスト比を高くする
文字と背景色とのコントラスト比を高くしたWebサイトにしましょう。色覚障害のある人はもちろん、弱視者や高齢者などにも視認しやすくなります。
「WCAG 2.1」では、コントラスト比の最低ラインにつき、以下のように定められています。WCAG 2.1とは、先に触れたWCAG 2.0の上位互換規格です。将来的に、ISO規格やJIS規格に反映される可能性があるドキュメントになります。
・達成基準 1.4.3 コントラスト (最低限)
背景色と文字色のコントラスト比が、少なくとも4.5:1以上あること。ただし、18ポイントのテキストや14ポイントの太字テキストについては、3:1以上。
コントラスト比は、「色のコントラストチェッカー」のようなツールによっても確認が可能です。
キーボードだけですべての操作ができるようにする
多くのWebサイトでは、ドラッグ&ドロップでさまざまな操作を行うのが一般的です。しかし、健常者にとっては何でもない操作でも、身体障害者には難しいというケースは多々あります。
Webアクセシビリティの向上に向けては、Web上で行うすべての操作をキーボードだけで行えるUIを構築することが、まずは大切です。
ただし、キーボードによる操作性が確保されたとしても、まだ完璧なWebアクセシビリティ対応とは言えません。身体の障害や運動機能の麻痺などにより、そもそもデバイスの入力行為自体が行えない人がいるからです。
こうした人々に対しては、自身の意図を操作として実行できるような機能を搭載する必要があります。アイトラッキング技術を使った視線によるコントロール機能や、Googleアシスタントのような音声アシスタントを介したテキスト入力機能などを追加しましょう。
遷移先のページ内容が分かるリンクテキストを作る
テキストリンクを貼る際には、読むだけで遷移先のページ内容が分かるリンクテキストにすることが大切です。
リンクをクリックして実際に遷移するまでページ内容が分からなければ、ページ間の無駄な行き来が増えかねません。また、「こちら」のような抽象的な文言では、特に音声ブラウザの利用ユーザーが遷移先のページ内容を理解できず不親切です。
そこで、リンクテキストは、遷移先のページタイトルと同じ文字列にするとよいでしょう。一般ユーザーが瞬時に遷移先のページ内容を予想できるだけでなく、音声ブラウザでもページのタイトルがまず読み上げられるので、訪れたい遷移先かどうかを事前に判断できます。
画像には代替テキスト(alt属性)を追加する
音声ブラウザでのWebアクセシビリティ対策としては、画像への代替テキスト(alt属性)の追加も忘れてはいけません。適切な代替テキストの設定により、視覚障害者のWebページからのスムーズな情報取得が実現します。
音声ブラウザでは、代替テキストの読み上げにより、画像の情報がをユーザーに伝えられます。そのため、ページ上で画像と同じ意味が正しく伝わるだけでなく、実際に読まれた時に前後の文脈に沿う内容のテキストにすることが大切です。
ただし、見映えで設置したそれ自体意味のない画像のalt属性は空欄にしましょう。また、意味を持つ画像であってもすぐそばに同内容のテキスト情報がある場合には、空欄にした方がベターのケースもあります。いずれも、音声ブラウザが画像を読み飛ばしてくれます。
動画・音声コンテンツには字幕やテキストを設定する
聴覚障害者は、Webコンテンツに含まれる音声情報をそのままでは理解できません。そのため、動画・音声コンテンツには字幕やテキストを設定し、音声が伝える情報を彼らに正しく届けられるようにすることが大切です。
具体的には、動画コンテンツの音声には同期した字幕の提供が、音声のみのコンテンツには書き起こしテキストの提供が、それぞれ求められます。
ただし、聴覚障害者によっては字幕という文字による情報取得よりも、手話通訳による情報取得の方が得意な人もいるでしょう。いずれの手段によっても情報に触れられるサイトの構築が、Webアクセシビリティの向上につながります。
まとめ
Webアクセシビリティの射程範囲は、もはや障害者や高齢者などの弱者だけでなく、Webにアクセスするすべてのユーザーにまで及んでいます。Web技術の進歩が今後さらに進むであろう将来に向けて、向上への取組がより重要度を高めていくことは間違いないでしょう。
とはいえ、今ある仕組みを一気に総取っ替えする必要はありません。不自由さや困難さを抱える人々に対するほんの些細な配慮の積み重ねがアクセシビリティの高いWeb空間への進化につながる、という視点を社会全体で共有することが大切なのです。