View more

アクセシビリティとは?Webサイトにおける重要性とおさえるべきポイントを解説

Blog

アクセシビリティとは?Webサイトにおける重要性とおさえるべきポイントを解説

「アクセシビリティ」とは、「誰もが平等に使いやすい状態」を意味する言葉です。スマートフォンなどのデバイスでよく見かける言葉ですが、Webサイトにおいても重要な意味を持っており、アクセシビリティの追求はさまざまな製品・サービスで欠かせない観点となっています。 今回はアクセシビリティの基本的な意味や重要性、Webサイトの構築に活かしたいポイントをご紹介します。
アクセシビリティとは?Webサイトにおける重要性とおさえるべきポイントを解説

アクセシビリティとは

アクセシビリティには、そもそもどのような意味があるのでしょうか。ここではまず、基本的な意味や類似した用語との違いについて確認しておきましょう。

 

アクセシビリティの意味

アクセシビリティとは、もともとは「近づきやすさ」「利用しやすさ」という意味を持つ英単語です。また、一般的に製品・サービスで用いられる際には「利便性」を示すこともあります。

そのうえで、情報通信の分野においては、「年齢や障がい害の有無、利用環境などに関係なく、どんな人でも利用しやすいよう配慮・設計された状態」という意味で使われる場面も増えています。さまざまな壁を越えて、幅広く平等に利用できるという状態を実現することは、それ自体が情報通信の分野で評価されるポイントとして扱われているのです。

アクセシビリティの身近な例

アクセシビリティについて理解を深めるために、ここではアクセシビリティに配慮された身近な機能・サービスの例を見ていきましょう。

・容易にテキストの拡大表示ができる端末(高齢者やロービジョンの方などへの配慮)

・受信したメッセージを読み上げる機能(視覚障がい者などへの配慮)

・着信があると光で知らせるベル(聴覚障がい者などへの配慮)

・駅や施設に設置されているエレベーター(階段を上るのが困難な状況への配慮)

・音声でテキスト入力ができる機能(視覚障がい者や手や腕が不自由な状況への配慮)

このように、アクセシビリティに配慮することで、年齢・身体条件や使用する状況に依らない利用も想定した設計が実現されています。

ユーザビリティとの違い

アクセシビリティと似ている言葉に「ユーザビリティ」があります。ユーザビリティも情報通信の分野を含めて幅広く使われる言葉ですが、こちらは「特定の人を対象としている」という点に大きな違いがあります。

製品・サービスであれば、それを実際に利用しているユーザーを対象にして利便性を向上させ、評価を上げることを目的にするのがユーザビリティです。それに対して、アクセシビリティはそもそも「使えない人が1人でも減ること」を目的としているため、ゴールもアプローチも大きく異なります。

Webアクセシビリティとは

アクセシビリティは製品・サービスを含めて幅広く用いられる言葉ですが、Webサイトやアプリなどにテーマを限定するときには、「Webアクセシビリティ」と表現されることもあります。ここでは、Webアクセシビリティの意味や重要性について見ていきましょう。

 

Webアクセシビリティの意味

アクセシビリティに「Web」という言葉が付属されたときには、WebサイトやWebにまつわるサービスにおいて、「あらゆる人や様々な状況において情報や機能を利用しやすい状態」を指します。たとえば、Webサイトであれば「ロービジョンの方や強い日差しの下で画面がよく見えない状況においても読みやすいフォント」や「Webに不慣れな高齢者でも直感的に扱いやすい(情報が整理されている)デザイン」などが、Webアクセシビリティに配慮された状態といえます。

Webアクセシビリティが重要視されている理由

Webアクセシビリティの重要性が注目されているのには、大きく分けて3つの理由があります。1つめは、「Webコンテンツを利用する層の拡大」です。

従来と比べて、現在は子どもから高齢者まで幅広い方が学習、ビジネス、生活といったさまざまな場面でWebサービスを利用するようになっています。そのため、さまざまなユーザーの利用を想定したWebアクセシビリティの観点は、サイト利用者数の拡大や売上の向上を目指すうえで欠かせないポイントとなっているのです。

そして、もう1つの理由は「デバイスの多様化」にあります。PCが中心であった従来とは異なり、現在はスマホやタブレットといった多様なデバイスが普及しています。

そのため、どのようなデバイスでも不具合なく表示できるという意味でも、Webアクセシビリティが重要度を増しているのです。また、「関連する法の整備」もWebサイトの設計に影響を与えています。

 

Webアクセシビリティについて先進的な国では、すでにWebアクセシビリティに関する訴訟もめずらしくない現象となっています。国内でも2021年6月に障害者差別解消法の改正が行われたことで、Webアクセシビリティへの対応が広く民間にも求められるようになりました。

2024年4月1日からは日本においても、Webアクセシビリティにおける「合理的な配慮」の提供が努力義務から法的義務となります。合理的配慮とは、障害がいのある方から社会的バリアを取り除くために何らかの対応を求められたときに、必要な対応を行うというものです。

たとえば、障がいのある方がオンラインで申し込む際に不便を感じないよう、Webサイトの改良を行うといった対応などがあげられます。こうした動きのなかで、Webアクセシビリティに対応できないサービスやWebサイトは、自然と評価を下げていってしまうと考えられます。

Webアクセシビリティに配慮したサイトづくりの5つのポイント

これまで見てきたように、Webアクセシビリティに配慮したサイトづくりを行うことで、ユーザー数の拡大はもちろん、企業イメージの向上も期待できるようになります。

Webアクセシビリティに対応するためにはWebアクセシビリティのガイドライン「Web Content Accessibility Guidelines(WCAG)2.1」の基準を達成する必要がありますが、ここでは少しポイントを絞ってWebアクセシビリティに配慮したサイトづくりのコツを5つご紹介します。

 

ポイント1:代替テキスト・音声のテキスト表示の導入

Webコンテンツに画像を使用する際には、視覚に障がいがある方の利用を想定して、代替テキストの設定を行いましょう。代替テキストを用いることで、画像情報のテキスト表現が可能になるため、音声読み上げ機能を使って視覚に障がいがある方でも画像の内容を把握できるようになります。

そのうえで、代替テキストを作成する際には、文字だけで画像の内容がわかるように気を配るとともに、前後の文脈に合うものにします。一方、音声でのナレーションや動画コンテンツを用いる際には、聴覚に障がいがある方の利用を想定して、字幕を入れることも重要です。

該当するWCAG達成基準

1.1.1 非テキストコンテンツ(レベル A)

1.2.1 音声のみ及び映像のみ (収録済) (レベル A)

など

ポイント2:テキストのフォントやカラーへの配慮

視力が低い方や色の識別が難しい方の利用を想定して、テキストの色味調整や色に依存しない表記をすることも重要です。具体的には、「テキストのカラーと背景色のコントラストをハッキリさせる」「色の違いのみで伝えている情報をテキストでも提供する」といった点があげられます。

また、ユーザーが任意で拡大・縮小を行ったときでも問題なく表示されるように、「レイアウトやフォントのサイズを相対指定する」ことも大切です。テキストのカラーやサイズへの気遣いは、特に視力に問題がない方にとっても、「情報を取得しやすくなる」「整理しやすくなる」といった効果があります。

該当するWCAG達成基準

達成基準 1.4.1 色の使用(レベル A)

達成基準 1.4.3 コントラスト (最低限) (レベル A)

達成基準 1.4.4 テキストのサイズ変更(レベル AA)

など

ポイント3:様々な環境における操作性の実現

Webアクセシビリティの観点では、様々な環境でも操作できるサイトづくりを行うことも重要な施策の1つです。たとえば、マウスを使用せずキーボードのみで操作している環境を想定した「マウスで利用できる機能はキーボードでも利用できる」といったものや、手や腕が不自由な状況でも使いやすいように「ピンチ操作でできることをシングルポインタ(指一本でのタッチなど)でもできるよう代替機能を提供する」といったものがあげられます。

該当するWCAG達成基準

達成基準 2.1.1 キーボード

達成基準 2.5.1 ポインタのジェスチャ

など

ポイント4:集中しやすい画面デザインの設計

Webに不慣れな方や動く要素に敏感に反応してしまう方が利用することも想定して、集中しやすい画面デザインを実現するのも1つの方法です。

通常の縦スクロールのサイトではページの途中に横スクロールする要素があると気付きにくいため、コンテンツを改行させるなどの対応で横スクロールを避けるようにします。また、常に動き続けるカルーセルやページが表示されて数秒後にリダイレクトされる時間制限がある機能はユーザーが一時停止させることを可能にするなどの配慮が必要です。

該当するWCAG達成基準

達成基準 1.4.10 リフロー(レベル AA)

達成基準 2.2.1 タイミング調整可能(レベル A)

達成基準 2.2.2 一時停止、停止、非表示(レベル A)

など

ポイント5:一目でわかる構成の実現

「誰でもスムーズに使える」という点で見れば、Webに不慣れなユーザーでも一目でわかる構成を実現することも重要です。具体的なアプローチとしては、以下のようなポイントがあげられます。

・全体構成が一覧できるサイトマップの導入

・各ページに主題がわかる(他ページと重複しない)タイトルをつける

・グローバルナビゲーションなどの項目が多い場合はグループ化する

・リンク先が推測できるリンクテキストにする

該当するWCAG達成基準

達成基準 2.4.2 ページタイトル(レベル A)

達成基準 2.4.4 リンクの目的 (コンテキスト内) (レベル A)

達成基準 2.4.5 複数の手段(レベル AA)

など

まとめ

「誰もが平等に使いやすい状態を目指す」というアクセシビリティの概念は、ある意味では社会の要請であると考えることもできます。対応が求められる企業にとっては、時間やコストがかかってしまうというマイナス面が気になる場合もあるでしょう。

しかし、アクセシビリティの基本には「ユーザーを第一に置く」という重要な土台が存在するため、きちんと対応できれば企業にもメリットが生まれます。これまでにないユーザー層までサービスを拡大できるため、ユーザー数の増加や利用頻度の上昇、さらにはブランドイメージの向上といった効果が期待できるのです。

アクセシビリティの重要性やポイントを踏まえて、自社のサービスやコンテンツに活かしてみましょう。

 

株式会社デパートでは、Webアクセシビリティへ深い知見と対応実績を持つエンジニアが在籍し、ご要望に応じてアクセシビリティの達成基準に準拠したWebサイト制作やを行っています。

企業としての取り組み内容からのご相談も可能ですので、お気軽にご相談ください。

 

 

Webマーケティング、Web制作に関することなら
お気軽にご相談ください

 

 

デパート採用情報

株式会社デパートでは一緒に働く仲間を募集しています