Web アクセシビリティの基本：誰もが使いやすい Web サイトを作る

Web アクセシビリティとは、障害の有無に関わらず、すべての人が Web サイトを利用できるようにすることです。これは単なる配慮ではなく、より多くのユーザーにリーチし、ビジネス価値を高める重要な要素です。

アクセシビリティが重要な理由

社会的意義

包括性: すべての人が情報にアクセスできる権利
多様性: 様々な能力や環境のユーザーへの配慮
平等性: デジタル格差の解消

ビジネス価値

ユーザー拡大: より多くの潜在顧客へのリーチ
SEO 向上: 検索エンジンにも理解しやすい構造
法的コンプライアンス: 各国のアクセシビリティ法規制への対応

WCAG 2.1 の 4 つの原則

Web Content Accessibility Guidelines（WCAG）は、Web アクセシビリティの国際標準です。

1. 知覚可能（Perceivable）

情報と UI コンポーネントは、ユーザーが知覚できる方法で提示される必要があります。

<!-- 画像には適切なalt属性を -->
<img src="chart.png" alt="2024年売上グラフ：前年比120%増加" />

<!-- 動画には字幕を -->
<video controls>
  <source src="video.mp4" type="video/mp4" />
  <track kind="captions" src="captions.vtt" srclang="ja" label="日本語" />
</video>

2. 操作可能（Operable）

UI コンポーネントとナビゲーションは操作可能である必要があります。

<!-- キーボードでアクセス可能なボタン -->
<button type="button" onclick="toggleMenu()" onkeydown="handleKeyDown(event)">
  メニュー
</button>

<!-- フォーカス表示の確保 -->
<style>
  button:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
  }
</style>

3. 理解可能（Understandable）

情報と UI の操作は理解可能である必要があります。

<!-- 明確なラベルとエラーメッセージ -->

<label for="email">メールアドレス（必須）</label>
<input type="email" id="email" required aria-describedby="email-error" />

<div id="email-error" role="alert" aria-live="polite">
  有効なメールアドレスを入力してください
</div>

4. 堅牢（Robust）

コンテンツは様々な支援技術で解釈できるよう十分に堅牢である必要があります。

<!-- セマンティックなHTML -->
<main>
  <article>
    <header>
      <h1>記事タイトル</h1>
      <time datetime="2024-03-05">2024年3月5日</time>
    </header>
    <section>
      <h2>セクション見出し</h2>
      <p>本文内容...</p>
    </section>
  </article>
</main>

実装のベストプラクティス

セマンティック HTML

<!-- 良い例：意味のあるHTML要素を使用 -->
<nav aria-label="メインナビゲーション">
  <ul>
    <li><a href="/" aria-current="page">ホーム</a></li>
    <li><a href="/about">会社概要</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

<!-- 悪い例：divとspanだけで構成 -->
<div class="nav">
  <div class="nav-item">ホーム</div>
  <div class="nav-item">会社概要</div>
</div>

ARIA 属性の活用

<!-- ボタンの状態を示す -->
<button aria-expanded="false" aria-controls="menu">メニュー</button>
<ul id="menu" hidden>
  <li><a href="/products">製品</a></li>
  <li><a href="/services">サービス</a></li>
</ul>

<!-- ライブリージョンで動的な変更を通知 -->
<div aria-live="polite" aria-atomic="true">
  <p>検索結果: 25件見つかりました</p>
</div>

カラーコントラスト

/_ WCAG AA 基準（4.5:1）を満たすコントラスト _/
.text-primary {
color: #1a1a1a; /_ 背景白との比率: 12.6:1 _/
}

.button-primary {
background-color: #0066cc;
color: #ffffff; /_ 比率: 4.5:1 _/
}

/_ フォーカス表示 _/
.focusable:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
}

テストとツール

自動テストツール

axe-core: 自動アクセシビリティテスト
Lighthouse: Chrome DevTools のアクセシビリティ監査
WAVE: Web アクセシビリティ評価ツール

手動テスト

// キーボードナビゲーションのテスト
document.addEventListener("keydown", (e) => {
  if (e.key === "Tab") {
    console.log("フォーカス要素:", document.activeElement);
  }
});

// スクリーンリーダーのテスト（macOS VoiceOver）
// Command + F5 で VoiceOver を起動

チェックリスト

すべての画像に alt 属性がある
見出しが階層的に構造化されている
フォームにラベルが適切に関連付けられている
キーボードですべての機能にアクセスできる
カラーコントラストが基準を満たしている
エラーメッセージが明確で理解しやすい

まとめ

Web アクセシビリティは、技術的な実装だけでなく、ユーザー中心の思考が重要です。最初から考慮することで、後から修正するよりもコストを抑えながら、より良いユーザー体験を提供できます。

小さな改善から始めて、徐々にアクセシビリティを向上させていくことが大切です。すべてのユーザーが快適に利用できる Web サイトを目指しましょう。

バッチャンネル

Webアクセシビリティの基本：誰もが使いやすいWebサイトを作る