WEBアクセシビリティの基礎 さまざまな人にとって優しいWEBサイト制作を目指して

WEBアクセシビリティとは

アクセシビリティは直訳すると「近づきやすさ、アクセスのしやすさ」という意味を持っています。WEBやITの業界では「すべての人が、情報やサービスにアクセスできるようにする」という意味で、WEBアクセシビリティという言葉を使います。より多くの人々がWEBサイトやアプリを利用できるようにするためにも、重要な考え方です。

WEBサイトやアプリの設計におけるWEBアクセシビリティは、とくに高齢者や障害をもつ方々（視覚障害、聴覚障害、色覚障害など）が閲覧や利用ができるように配慮することに目が行きがちですが、基本的にアクセシビリティは、能力や環境、状況にかかわらず、すべての方が公平に利用しやすいサービスであるという概念があります。

現代では、スマートフォンの普及により、人々が多種多様なデバイスを使ってさまざまな場所からインターネットに接続することができるのが当たり前になりました。そのため、高齢者や障害を持つ方々だけでなく、幅広いユーザー層に配慮した使いやすいWEBサイトの構築がより一層重要となっています。

WEBアクセシビリティが注目される背景

2024年4月1日施行：「合理的配慮の提供」が民間事業者で義務化

合理的配慮とは、障害を持つ人々が社会のあらゆる側面で他の人々と同じように参加できるように、必要なサポートや調整を提供することです。これは、障害を理由とした不平等をなくし、障害のある人々がフルに活動できるようにするための措置を指します。

具体的には、建物のバリアフリー化、情報のアクセシブルな形式での提供、特別な支援技術の使用など、障害のある個人が必要とする特定の要求に応じた調整を行うことを含みます。合理的配慮は、障害者の権利に関する国際基準や法律においても強調されており、全ての人が平等に権利を享受できる社会を実現するための重要な原則とされています。

これまで「合理的配慮の提供」が行政機関では「義務」、民間事業者では「努力義務」とされてきました。2021年5月に障害者差別解消法の一部が改正され、2024年4月に改正法が施行されたことを機に、今まで民間事業者では努力義務であった「合理的配慮の提供」が義務化されることになりました。

一方、法律では、必要とされる「環境の整備」は合理的配慮を実施する上での努力義務とされています。ウェブアクセシビリティはこの「環境の整備」の一環とみなされ、事前に計画し実施することが求められています。これは「利用者が不便を感じる前に、そうならないよう予め配慮しておきましょう」という考え方です。

WEBサイトのアクセシビリティ改善の例

例えば、「WEBサイトの情報が音声読み上げソフトに対応していない」という問い合わせがあった場合、

• 音声読み上げソフトで読めるテキストファイルなどを提供する
  →「合理的配慮の提供」
• WEBサイト自体を音声読み上げソフトで読めるように改修する
  →「環境の整備」

という対応方法となります。

WEBアクセシビリティ対応するメリット

現在、WEBアクセシビリティ自体は義務ではありません。しかし、今のうちにそれを考慮したWEB設計にしておくことで、閲覧ユーザーはもちろん、WEBサイトを保有する自社にもメリットがあります。

• 会社の信頼性が高まる
• 今後、義務化されたときの初動が速くなる
• SEOの観点でも、Googleからの評価が高まる

誰にとっても見やすく、わかりやすいWEBサイトになるように、意識して制作しましょう。

WEBアクセシビリティの基本10選

WEBアクセシビリティのポイントをわかりやすく表現すると

• 見づらい
• 操作ができない（難しい）
• 理解しづらい

を改善し、

• 見やすい
• 操作が容易にできる
• 理解しやすい

という環境にすることです。

その基本となる10項目を解説します。

1. ページの内容が分かるページタイトルを記述する
2. 見出しやリストなどの文章構造をマークアップする
3. リンクテキストは、リンク先が分かる文言にする
4. 情報を伝えている画像に代替テキストを提供する
5. 文字色と背景色のコントラストを確保する
6. ユーザーがコンテンツを拡大表示できるようにする
7. キーポードだけでも操作できるようにする
8. フォーム・コントロールのラベルを提供する
9. データテープルの構造をマークアップする
10. エラーメッセージではエラー箇所を明示する

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

2. ページタイトルは、提供される内容を明確かつ簡潔に伝えるものであり、Webページの中心的なテーマを反映します。HTMLで作成されたWebページでは、<title>タグを使用してページタイトルを定義します。

   この<title>タグで設定されたページタイトルは、様々な場所で活用されます：

   – ブラウザのタイトルバー上
   – ブラウザのタブ表示
   – ブラウザの「お気に入り/ブックマーク」リスト
   – ブラウザの履歴リスト
   – 検索エンジンの検索結果リスト

   例として、スクリーンリーダーはWebページを開いた際、最初にページタイトルをアナウンスします。

   また、検索エンジン最適化（SEO）の観点からは、目標とするユーザーが使用するであろうキーワードをページタイトルに含めることが望ましいとされています。これにより、関連するコンテンツを検索するユーザーに対して、そのWebページを効果的に紹介することができます。

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

4. WEBページ内に見出しが設置されている場合、支援技術などを含むユーザーエージェント（UAU；ser Agent：ネット利用者が使用しているOS・ブラウザ）がこれを正確に理解できるように、<h1>から<h6>までの見出し要素を使用して構造化します。これにより、見出しは単に視覚的な要素であるだけでなく、機械でも読み取れる形式になります。

6. 見出し

   順不同リスト

7. 順序付きリスト

8. など

9. 単に見た目を重視するだけではなく、適切な要素を用いてコードを作ることが重要です。

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

11. テキストリンクは、ユーザーにリンク先の内容を明確に示すべき箇所です。リンクテキストがその目的地を正確に反映していない場合、ユーザーはリンク先が不透明なので、作業効率を落とします。

    また、リンクテキストは検索エンジンによってリンク先ページの重要なキーワードとして扱われることが多いため、「ここをクリック」や「こちら」などのあいまいな表現を避けることが推奨されます。これらの表現は、リンク先ページの内容を正確に伝えないため、検索エンジンの最適化（SEO）においても望ましくありません。

12. リンクテキストを選ぶ際は、ユーザーだけでなく検索エンジンの両方に対して、リンク先の内容が明確に伝わるように心がけることが重要です。

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

非テキストコンテンツ、例えば画像を使用する場合、ブラウザや支援技術、検索エンジンのロボットなどのユーザーエージェントが内容を理解できるよう、代替テキストを用意します。

これは、ユーザーエージェントが画像自体から情報を読み取ることができないため、代替テキストによってそのコンテンツを機械が読める形で伝えることが可能になります。

1. 文字色と背景色のコントラストを確保する

2. 多くのユーザーが情報を視覚的に受け取っており、色の使用はメッセージを伝え、魅力を高める効果的な方法です。ただし、以下の状況では色の差異が認識できない場合があります。

   – スクリーンリーダーや点字ディスプレイの使用により、色の違いが判別できない。
   – 色覚の問題で色の差を見分けるのが難しい。
   – モノクロ印刷でWebページを閲覧する際、色の違いが識別しにくい。

   このため、色だけに頼らず情報が伝わる設計が必要です。色を用いた情報の伝達例には以下があります。

   – 入力フォームで必須項目を赤い文字で表示する。
   – グラフに複数の色を使用し、それぞれの色を凡例で説明する。
   – ナビゲーションバーまたはローカルナビゲーションで異なる色を使って現在地を示す。

   色を使って情報を伝える際は、色の違いを認識できないユーザーも情報を理解できるように配慮しましょう。

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

4. 視覚に障害を持つ人、視力が弱い人、老眼などで物が見にくい人などは、ブラウザの表示サイズを自由に調整することがあります。テキストのサイズを標準の200％まで拡大しても、コンテンツの閲覧や操作に問題がないかどうかを考慮して設計することが大切です。