Webコンテンツに携わる経験をしているみなさんは、アクセシビリティを意識したことはあるでしょうか。
アクセシビリティとは、誰でも障害なくサービスを利用するための配慮と言ってもよいでしょう。
弊社でもSDGsへの取り組みに参入していますが、そういったCSR(企業の社会的責任)の側面にもアクセシビリティは関わってくると考えています。
今回はそんなアクセシビリティの基本的な考えや、実践におけるチェックポイントを振り返っていきます。

アクセシビリティとは

一般にアクセシビリティとは、アクセスのしやすさを意味します。
転じて、製品やサービスの利用しやすさという意味でも使われます。

引用元:(WAIC:Web Accessibility Infrastructure Committee)アクセシビリティとは

特にWebアクセシビリティでは、「高齢者や障害者など制約がある人でもWebサイトを利用し、情報に適切にアクセスできること」とイメージされることが多いです。
それは身体的な制約がある場合、Webサイトの利用が困難であることが予想されるからです。

しかし、広義では高齢者や障害者に限らず、多くの人が多様な環境下で利用できるサイトであるか否かが重要となります。それは、健常者にとっても通信環境や騒音や、眩しい、または薄暗い環境など、あらゆるケースでの情報のアクセスが想定されるからです。

現代では、ショッピングやお店の情報、製品の使い方などもオンライン上で確認する機会が増えました。そうなると、情報を提供するWebサイトはインフラに近い存在となっています。したがって、アクセシビリティの重要性は高まっているのです。
 

ユーザビリティとの違い

ユーザビリティとは、ある製品が、指定された利用者によって、指定された利用の状況下で、指定された目的を達成するために用いられる際の、有効さ、効率及び利用者の満足度の度合い 

ISO 9241-11では上記のように定義されています。
ユーザビリティの定義をもう少し整理してみると、以下の項目になります。

  • 利用状況(Context of use)想定ユーザーの利用状況
  • 有効さ(Effectiveness)ユーザーの目的に対して役に立つか
  • 効率(Efficiency) ユーザーに過度な負担をかけず目的達成できるか
  • 満足度(Satisfaction)快いユーザー体験への貢献

このように、ユーザーや利用環境や目的が特定された状況下を起点に、「使い勝手」「有用性」を考えるのがユーザビリティです。
つまり、ここでは想定されたターゲットにとって製品やサービスが最適化されているという意味の「使いやすさ」になります。

それに対してアクセシビリティは、どんな人にとっても適切に利用が可能である「使いやすさ」を目指しています。理想的には、どんな人も利用する上で取りこぼされる可能性をなくしていくのがアクセシビリティを考えることに繋がります。同じ利便性を追求する背景には、このように想定されるユーザーや状況そのものに違いがあります。
 

今考えるべき理由とメリット

基本的な権利の一つとして

先進国の多くはWebアクセシビリティの確保が義務付けられています。
それは障害がある人の権利の中に、Webへのアクセスも含まれるからです。
それにより、少なくとも公的機関のWebサイトでは社会的責務としてアクセシビリティの確保が求められています。
また海外では民間企業であっても、障害がある人が使えないWebサイトであったことを理由に訴訟問題まで発展したケースもあります。

日本でも障害者差別解消法が2013年に制定されました。
Webアクセシビリティに関してはまだ努力義務という位置づけですが、国際的な状況を見ても今後も必要性はより高まっていくでしょう。

ビジネスチャンスの最大化

またアクセシビリティへの配慮が、障害者や高齢者だけのものではありません。
多様なデバイスによるアクセスや、あらゆる状況下での利用をサポートするといった考えは、ユーザーの流入を最大化することが可能となります。
現代では、障害を持つ人も若い世代を中心にインターネットの利用は一般的となっています。想定していないユーザーの離脱を防ぐことで、ビジネスチャンスを逃すリスクを減らします。
このようにアクセシビリティの向上が、結果的にビジネスをする上でもメリットとなるでしょう。

Webコンテンツにおけるチェックポイント

それではアクセシビリティ向上のために、具体的にどのような点に気をつければよいのでしょうか。
Webアクセシビリティの情報提供Webサイト「エー イレブン ワイ」で配布されている「Webアクセシビリティ確保・向上の基本の『キ』」の資料を参照して振り返ってみましょう。
Webアクセシビリティ確保・向上の基本の『キ』
Webアクセシビリティ確保 基本の「キ」 より
この作品は、クリエイティブ・コモンズ「表示 – 継承 4.0 国際」ライセンスの下に提供されています。

  • ページの内容が分かるページタイトルを記述する
  • 見出しやリストなどの文書構造をマークアップする
  • リンクテキストは、リンク先が分かる文言にする
  • 情報を伝えている画像に代替テキストを提供する
  • 情報を伝える色の使い方に注意する
  • ユーザーがコンテンツを拡大表示できるようにする
  • キーボードだけでも操作できるようにする
  • フォーム・コントロールのラベルや説明をマークアップする
  • エラーメッセージではエラー箇所と修正方法を明示する
  • 動画にキャプション(字幕)を提供する

ページの内容が分かるページタイトルを記述する

ページタイトルはユーザーがページにアクセスする際に、内容を判断する限られた情報源となります。
そのアクションのひと手間を無駄にさせない、もしくは必要な相手に適切に届くように、分かりやすさを意識しましょう。

リンクテキストは、リンク先が分かる文言にする

ここ、こちらなど不明瞭な案内ではなく、リンク先がひと目で理解できると親切です。
また、リンクだと分かるように下線を引く、ボタンやタブの場合クリック領域も工夫できるポイントになります。

見出しやリストなどの文書構造をマークアップする

文書構造を正しくマークアップすることで、コンピューターにとっても理解しやすいページになります。
そうすることでSEOの効果はもちろん、例えばWebページの読み上げ機能の補助を利用する人にとっても使いやすくなるなどのメリットがあります。

情報を伝えている画像に代替テキストを提供する

こちらもマークアップと同様の効果があり、代替テキストは画像が表示できない環境下での動作においても情報を伝えるという役割を担うので重要なポイントになります。

画像の代替テキストは、”alt”を使って以下のように設定します。

<img src="画像URL" alt="代替テキスト">

WordPressの場合は、メディアライブラリーのファイル詳細に代替テキスト欄があります。
代替テキスト入力欄

情報を伝える色の使い方に注意する

色のコントラスト比にも気をつける必要があります。
色覚の障害や明るい場所での閲覧の場合でも支障がでないように、コントラスト比の目安は4.5:1以上が望ましいとされています。

ユーザーがコンテンツを拡大表示できるようにする

文字や画像等のコンテンツやボタン領域についても、多くの人にとって使いやすいサイズであるかどうかも考えなくてはいけません。
文字サイズの変更
厚生労働省
このように文字サイズの指定に対応したサイトもありますが、各種文字サイズに設計する以外にも、フォントサイズの指定も“%”“em”などの相対的な値で指定することで、拡大表示に対応することができます。

キーボードだけでも操作できるようにする

マウスが使えないユーザーでも、キーボードのみで不自由がない操作を確保しなければいけません。
以下は初歩的なキーボード操作の一部です。

  • [Tab] キーでフォーカスを移動
  • [Enter] キーで実行する
  • 上下矢印キーでページをスクロール、セレクトメニューの選択

最近ではリッチなWebサイトが増えたことで、キーボード操作が犠牲になってしまう場合が見られます。例えば、フォーカス位置が可視化されていること、ページレイアウトとフォーカス順序の関係が自然であることなど気をつけるべきポイントは色々あります。
参考サイト:キーボード操作によるインタラクションをチェックする

キーボード操作が可能な企業サイト、サービスの例

LG:アクセシビリティについて
zoom:アクセシビリティ(ユーザー補助)に関するよくある質問

フォーム・コントロールのラベルや説明をマークアップする

フォームに使われるマークアップは以下のものがあります。
適切にマークアップを行うことで、スクリーンリーダーによる読み上げやマウス操作の機能の向上を図ることができます。

  • 各種テキストフィールド
    <input type=”text”>、<input type=”password”>、<input type="email">
  • ラジオボタン
    <input type=”radio”>
  • チェックボックス
    <input type=”checkbox”>
  • テキストエリア
    <textarea>
  • セレクトメニュー
    <select>

参考ページ:ラベルとフォーム・コントロールの関連付け(可視ラベルあり) [フォーム]

エラーメッセージではエラー箇所と修正方法を明示する

項目入力等にエラーで再度入力を求める場合、エラー箇所や修正方法が分からないとそこでユーザーの離脱を招きます。
これらは、EFO(入力フォーム最適化)にも通じる考えです。

動画にキャプション(字幕)を提供する

キャプションがあることで、音声が聞くことのできない環境でも内容を理解することができます。
また、最近は動画の埋め込みされたページも多いですが、動画や音声の再生はなるべくユーザーのコントロールできる状況にするべきです。例えば、公共の場所で何気なく開いたページで予想外に音声が再生されてしまったり、またそれを停止するボタンが分かりづらくて余計に困ってしまうような状況も想定されるからです。

まとめ

アクセシビリティ対策はSEOに有効なのか

SEO対策としてマシンリーダブルを意識することの重要性はご存知だと思います。
マシンリーダブルとは、「機械にとっての可読性」を指します。
SEOを考える上では検索エンジンのアルゴリズムが理解しやすいように、Webコンテンツは適切に構造化されていることが求められます。こうした仕組みをセマンティックWebと言います。

それとは逆にヒューマンリーダブルは、「人間が読み取る情報」を指します。
アクセシビリティの対策の目的は、主にこちらのヒューマンリーダビリティを高めることになると思います。しかし、その具体的な施策に関しては上記で説明した通り、マシンリーダブルに関与する項目が多いことに気づきます。そうすると結果的に、SEOの優位性を高めることができ、Webコンテンツの全体的な品質の向上に寄与すると考えられます。
つまり直接的ではなくとも、アクセシビリティ対策によってSEO効果も得られる可能性はあります。

社会的責任としてのアクセシビリティ

アクセシビリティへの配慮への必要性やメリットは最初にも述べましたが、グローバル化や高齢化が進む中では、もはや必須となっていくでしょう。
アクティビティ対応は、目に見える効果を実感できるものではないので、そこにかけるコストはどうしても後回しになりがちです。しかし、こうした細かい配慮こそが副次的に企業のイメージ向上にも繋がります。
何よりも、せっかく制作したWebコンテンツを多くの人に適切に利用してもらうという点でも、Webアクティビティは一考に値するのではないでしょうか。

関連記事