【アクセシビリティ】はじめの一歩

## はじめに
Web アクセシビリティとは、視覚・聴覚・運動・認知などに障害を持つユーザーを含め、あらゆるユーザーが情報や機能を等しく利用できるように設計・実装する考え方・技術のことです。近年、「社会的背景としての障害者権利の尊重」「法規制・ガイドラインの整備」「多様なユーザー層への対応ニーズ拡大」などにより、企業や開発現場でのアクセシビリティ対応が強く求められています。
この記事では、「なぜアクセシビリティが重要なのか」「どのような考え方で対応すればよいのか」をまとめます。「アクセシビリティってなんだろう？」と興味を持った開発者の方におすすめです。

## 目次
- [はじめに](#はじめに)
- [1. アクセシビリティとは何か？](#1-アクセシビリティとは何か？)
  - [1.1 アクセシビリティの定義](#11-アクセシビリティの定義)
  - [1.2 なぜ今、アクセシビリティが注目されているのか](#12-なぜ今アクセシビリティが注目されているのか)
- [2. アクセシビリティ関連の一例や具体例](#2-アクセシビリティ関連の一例や具体例)
  - [2.1 各障害における特性](#21-各障害における特性)
  - [2.2 アクセシビリティ関連の主要ガイドライン・規格](#22-アクセシビリティ関連の主要ガイドライン・規格)
  - [2.3 ARIA（Accessible Rich Internet Applications）](#23-aria（accessible-rich-internet-applications）)
- [3. 現場でよくあるアクセシビリティ課題とその背景](#3-現場でよくあるアクセシビリティ課題とその背景)
  - [3.1 画像の代替テキストがない](#31-画像の代替テキストがない)
  - [3.2 フォームのラベルが適切に設定されていない](#32-フォームのラベルが適切に設定されていない)
  - [3.3 色のコントラスト比が不十分](#33-色のコントラスト比が不十分)
  - [3.4 キーボード操作に対応していないメニュー構造](#34-キーボード操作に対応していないメニュー構造)
- [4. まず何から手をつければいい？](#4-まず何から手をつければいい？)
- [最後に](#最後に)

## 1. アクセシビリティとは何か？

### 1.1 アクセシビリティの定義

アクセシビリティ（Accessibility）とは、本来「利用しやすさ」や「接近可能性」を意味する英単語ですが、IT 分野では「障害のあるユーザーを含む、あらゆるユーザーが製品やサービスを問題なく利用できる状態」を指します。

* **知的障害や発達障害**：文章や操作手順が複雑すぎると理解できないケース
* **視覚障害**：文字の判読や画像情報を読み取れないため、スクリーンリーダーや音声読み上げソフトを活用する必要がある
* **聴覚障害**：音声だけの情報（動画の音声や音声ガイダンスなど）を利用できないため、代替テキストや字幕が求められる
* **運動障害**：マウスを細かく動かせない、キーボード操作が難しいといった場合、キーボードだけで完結できるインターフェース設計が必要
  これらの障害特性を考慮した設計を行うことで「誰もが等しく情報にアクセスできる環境」を実現するのが、Web アクセシビリティの目的です。

### 1.2 なぜ今、アクセシビリティが注目されているのか

1. **社会的背景**

   * 世界的に障害者の人権保護に関する機運が高まり、Web も「障害を理由とする情報格差をなくす」ための取り組みが求められている。
   * 日本では「障害者差別解消法」（2016 年施行）や「改正障害者差別解消法」（2021 年施行）により、行政機関や民間事業者に対して合理的配慮の提供が義務化されている。
   * 国際的には WCAG（Web Content Accessibility Guidelines）が標準的なルールとして定着し、多くの企業がこれを遵守したサービスを提供している。

2. **ビジネス／マーケティング的観点**

   * 全世界で視覚・聴覚・運動などに何らかの障害を持つ人は推定１０億人以上※1にのぼると言われる。また、高齢化社会においては「視力・聴力の低下」「手先の器用さの低下」が進みやすい。
   * アクセシビリティ対応を行うことで、障害者だけでなく「シニア」「一時的に手がふさがっている人（スマホで操作中に子どもを抱えている、屋外で音を出しにくい状況など）」といった幅広いユーザーにも使いやすいサービスを提供できる。

## アクセシビリティ関連の一例や具体例

### 2.1 各障害における特性
※以下で取り上げるものは一例です。

* **視覚障害**

  * スクリーンリーダーという音声読み上げ技術（例：VoiceOver、NVDA、JAWS）を使用する。
  * 小さい文字や低コントラストでは読みづらいため、拡大鏡や高コントラスト設定を活用し、使いやすいようにカスタマイズする。

* **聴覚障害**

  * キャプションや代替テキスト、文字ベースの情報提供が必要。
  * 周囲の雑音や音質によって聞き取りづらいため、補助的な文字情報を用意しておく。

* **肢体障害（運動障害）**

  * マウス操作が難しい場合が多く、キーボードだけで操作できる UI が求められる。
  * タッチデバイス操作が中心になるため、ジェスチャー操作にも配慮が必要。

* **認知障害（発達障害・知的障害）**

  * 複雑すぎるレイアウトや長い文章は理解しづらい。シンプルかつ直感的な設計が求められる。
  * 専門用語を避け、画像やアイコンに代替テキストを付与する場合、平易でわかりやすい文言を意識する。

### 2.2 アクセシビリティ関連の主要ガイドライン・規格

* **WCAG（Web Content Accessibility Guidelines）**

  * W3C が定める国際標準。現在の最新版は WCAG 2.2。
  * **4 つの原則（POUR）**

    1. **Perceivable（知覚可能）**：情報を五感のいずれかで認識できること。例：画像に代替テキストを付ける、動画にキャプションを付与するなど。
    2. **Operable（操作可能）**：あらゆる操作がキーボードなどで行えること。例：キーボードフォーカスが見える、動的コンテンツのフォーカス管理を適切に行う。
    3. **Understandable（理解可能）**：情報や操作が理解しやすいこと。例：フォームのエラーメッセージをわかりやすく、用語は平易にする。
    4. **Robust（堅牢）**：将来の技術でも利用できるように、標準技術に準拠したマークアップを行う。例：HTML5 のセマンティックタグを正しく使う、ARIA を適切に適用する。
  * 各原則はさらに詳しい Success Criteria（達成基準）に分かれ、A／AA／AAA の３段階で適合度を評価する。DAA 試験では主に A／AA レベルが出題対象となる。

* **JIS X 8341-3（高齢者・障害者等配慮設計）**

  * 日本国内の国際規格として、WCAG とほぼ同等レベルの要件を定めており、国内法適用の基準としても参照される。
  * “形式的要件”と“技術的要件”に分かれ、障害の種類別にどのような配慮が必要かを示している。

### 2.3 ARIA（Accessible Rich Internet Applications）

* WCAG 2.2 でカバーできない「動的コンテンツ」や「カスタム UI コンポーネント」に対して、支援技術と連携させるための仕様が ARIA（WAI-ARIA）。

  * **ARIA ロール（role）**：要素が何を表すかを示す。例：`role="button"`、`role="navigation"`。
  * **ARIA プロパティ／ステート**：要素の現在の状態や振る舞いを示す。例：`aria-expanded="true"`、`aria-label="検索ボタン"`.
  * ARIA は「なるべくネイティブ要素（`<button>` や `<nav>` など）を使うことが優先」であり、やむを得ずカスタムコンポーネントを作る場合にのみ適用するとよい。

## 3. 現場でよくあるアクセシビリティ課題とその背景

ここでは「実際の開発現場で遭遇しやすい問題」を具体例としていくつか挙げ、その背景や影響を整理します。DAA 試験対策としても「なぜその問題が起きるのか」「どのようにすれば防げるのか」を理解しておくと役立ちます。

### 3.1 画像の代替テキストがない

* **課題**：`<img>` タグに `alt` 属性が設定されておらず、スクリーンリーダーで画像の内容が把握できない。
* **背景**：デザイナーが作成した素材を実装時にコピペし、「とりあえず画像を貼り付けた」のみで `alt` を付け忘れるケースが多い。
* **影響**：視覚障害者は画像の意味をまったく理解できず、重要なコンテンツやリンク情報が欠落してしまう。

### 3.2 フォームのラベルが適切に設定されていない

* **課題**：`<input>` 要素に対応する `<label>` が紐付けられていない、あるいは `aria-label`/`aria-labelledby` が欠如している。
* **背景**：デザイン段階ではラベル要素が存在しているが、実装時に `<label for="xxx">` と `<input id="xxx">` の対応を忘れてしまうことがある。
* **影響**：スクリーンリーダーはテキストボックスやチェックボックスの意味を読み上げられず、入力フォームの目的が理解できないため使いづらくなる。

### 3.3 色のコントラスト比が不十分

* **課題**：文字色と背景色の組み合わせで、コントラスト比が WCAG の基準を満たしていない（例：コントラスト比 3:1）。
* **背景**：デザインとして「薄いグレー文字×ホワイト背景」「淡いエメラルドグリーン×ホワイト背景」などを採用すると、見た目はおしゃれでも視認性が低い。
* **影響**：弱視のユーザーや老眼気味のユーザーは文字を読むのに困難を感じる。色覚特性（色覚異常）を持つユーザーは見分けられない場合がある。

### 3.4 キーボード操作に対応していないメニュー構造

* **課題**：ドロップダウンメニューやハンバーガーボタンがマウスホバーやタッチ操作前提で作られており、タブキーでメニューを開閉できない。
* **背景**：ビジュアルデザイナーがマウス操作を前提にデザインし、実装者も「スマホファースト」の考え方でタッチ操作だけを重視してしまう。
* **影響**：肢体障害者やキーボードショートカットを多用するユーザーは、メニューアイテムにアクセスできず、情報を利用できないままサイトを離脱してしまう恐れがある。

## 4. まず何から手をつければいい？

「現場でどこから始めればいいかわからない…」という方のために、コードを書かずにできる簡単なチェック方法を紹介します。まずは以下の６つを意識してみましょう。

1. **見出し・段落・リストの構造を確認する**

   * ブラウザ上で開発者ツールを使って、見出しが `<h1>～<h6>` で正しく階層化されているかを確認する。
   * 見出しが飛び飛びになっていないか（例：`<h1>` の次に何も挟まず `<h3>` になっているのは NG）。
   * 箇条書きは `<ul>`／`<ol>` を正しく使い、リスト要素（`<li>`）で列挙しているか。

2. **画像に必ず代替テキストを付与しているか**

   * 意味のある画像には `alt="説明文"` を付与し、装飾画像には `alt=""` または CSS 背景画像にする。
   * 「重要な情報を伝える画像」は、文章として同等の情報を提供できるようにする。

3. **フォーム要素にラベルが紐付いているか**

   * `<label for="xxx">ラベル文言</label>` と `<input id="xxx">` が対応しているか。
   * `<input>` に直接 `<label>` を入れる入れ子構造（例：`<label>名前：<input type="text"></label>`）でも良い。
   * 動的に追加されるフォーム要素には JavaScript で `aria-label` や `aria-labelledby` を動的に付与しているか。

4. **キーボードだけで操作できるかを確認する**

   * ページを開いた状態で最初に Tab キーを押し、フォーカスインジケータが見えるか確認する。
   * メニュー、リンク、ボタン、フォーム要素など、すべての操作対象が Tab → Enter（または Space）だけで使えるか。
   * フォーカスがどこにあるかわかりづらい場合は、CSS で `:focus { outline: 2px solid #f00; }` など一時的に色をつけて確認するとよい。

5. **色のコントラストをざっくり確認する**

   * ブラウザのデベロッパーツールや拡張機能（例：Color Contrast Analyzer、WCAG Contrast Checker など）を使って、文字色と背景色のコントラスト比を測定する。
   * 通常テキストでは最低 4.5:1、見出しや大きい文字では最低 3:1 を確保。
   * 色覚特性に配慮し、「色だけで情報を示していないか」「形やテキストで補完しているか」を確認する。

6. **スクリーンリーダーでざっくり読み上げ確認をする**

   * macOS なら VoiceOver（⌘ + F5）、Windows なら NVDA（フリーソフト）を起動し、ペー ジ上を Tab で移動しながら読み上げを聞いてみる。
   * ページの見出し順序やリンクテキストがわかりやすく読み上げられているか。
   * フォーカスが飛び飛びになっていないか、間に不自然な読み上げが入らないかを体感してみる。

## 最後に
今回の記事では、アクセシビリティの概要をまとめてきました。
代替テキストは、XやInstagramといった各種SNSでもつけられるようになっています。
できるところから取り組むことで、より多くのユーザーに快適に使ってもらえるようになるので、興味を持ったところから試してみてください！
ここまで読んでいただきありがとうございました！