♿

【2026年版】Webアクセシビリティ完全ガイドを公開しました - WCAG 2.1法令対応とReact/Vue実装

に公開
Next.js
React
Vue.js
WCAG
アクセシビリティ
tech

「このサイト、使いにくい」を解決する

「このボタン、キーボードだけで押せないんですけど」
「文字が小さすぎて読めません」
「スクリーンリーダーで何も読み上げられない...」

そんなユーザーの声、届いていますか？

実は、日本では多くの方がスクリーンリーダーやキーボード操作などの支援技術を必要としています。さらに、2024年4月、改正障害者差別解消法が施行され、民間企業にもWebアクセシビリティ対応が努力義務として課されるようになりました。

「でも、WCAG？ARIA？用語が難しすぎる...」
「何から始めればいいかわからない」

そんな開発者のために、本記事では実践的なアクセシビリティ対応の第一歩を解説します。

アクセシビリティ対応が「必須」になった理由

法令対応だけじゃない、ビジネス上のメリット

アクセシビリティ対応は、単なるコンプライアンスではありません。

SEO効果：

  • セマンティックHTMLは検索エンジンに優しい
  • Googleのランキング要素にも影響

ユーザー体験の向上：

  • 小さな文字が見づらい方、一時的に手が使えない方、明るい屋外で画面が見えにくい環境など
  • 誰もが使いやすいUIは、全ユーザーにメリット

開発効率：

  • 適切なHTMLタグを使うと、JSが減る
  • メンテナンスしやすいコードになる

WCAG 2.1 AA準拠って何？

WCAG（Web Content Accessibility Guidelines）は、W3Cが定めるWebアクセシビリティの国際基準です。

準拠レベルは3段階：

  • A：最低限の基準
  • AA：企業サイトで推奨される基準（努力義務の目安）
  • AAA：最高レベル（全てを満たすのは困難）

多くの企業が目指すのが「AA準拠」です。

明日から使える実践テクニック5選

1. <div>地獄をやめる

❌ ダメな例：

<div class="button" onclick="submit()">送信</div>

✅ 良い例：

<button type="submit">送信</button>

効果：

  • キーボードで操作可能に（Tab、Enter対応）
  • スクリーンリーダーが「ボタン」と読み上げる
  • フォーカスの視覚表示が自動

2. 画像には必ずalt属性

❌ ダメな例：

<img src="chart.png">

✅ 良い例：

<img src="chart.png" alt="2024年売上推移：前年比120%増加">

効果：

  • スクリーンリーダーが内容を読み上げる
  • 画像が読み込めない環境でも情報が伝わる
  • SEO効果も向上

3. カラーコントラストを確保

WCAG AA基準：

  • 通常テキスト：4.5:1 以上
  • 大きいテキスト（18px以上）：3:1 以上

確認ツール：

4. フォームにはlabelを必ず紐付け

❌ ダメな例：

<input type="email" placeholder="メールアドレス">

✅ 良い例：

<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">

効果：

  • スクリーンリーダーが何の入力欄か読み上げる
  • labelをクリックしてもフォーカスが当たる

5. キーボードだけで全操作可能にする

チェック方法：

  1. マウスを使わず、Tabキーだけでサイトを操作
  2. 全てのボタン、リンク、フォームにアクセスできるか確認
  3. Enterキーで実行できるか確認

React/Vue/Next.jsでの実装

Reactでのセマンティックな実装例

// ❌ アクセシビリティ無視
function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;
  return (
    <div className="modal" onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>
  );
}

// ✅ アクセシビリティ対応
function AccessibleModal({ isOpen, onClose, children, title }) {
  return (
    <dialog
      open={isOpen}
      aria-labelledby="modal-title"
      role="dialog"
      aria-modal="true"
    >
      <h2 id="modal-title">{title}</h2>
      {children}
      <button onClick={onClose} aria-label="閉じる">
        ✕
      </button>
    </dialog>
  );
}

改善点：

  • <dialog>タグで本来の用途を明示
  • aria-labelledbyでタイトルと紐付け
  • aria-modalでモーダルであることを明示
  • 閉じるボタンにaria-labelで説明追加

Next.jsでのページタイトル管理

// app/layout.tsx
export const metadata = {
  title: {
    template: '%s | サービス名',
    default: 'トップページ | サービス名',
  },
  description: '明確で具体的な説明文',
};

// app/about/page.tsx
export const metadata = {
  title: '会社概要',
};

効果：

  • スクリーンリーダーが最初にページタイトルを読み上げる
  • ブラウザタブで内容が分かりやすい
  • SEO効果

よくある質問

Q: アクセシビリティ対応って、デザインが地味になりませんか？
A: いいえ。見た目のデザインはそのままで、HTMLの構造やARIA属性を改善するだけで大幅に改善できます。

Q: 既存サイトの改修、どこから手をつければ？
A: まずLighthouse（Chrome DevTools）で自動チェック。スコアの低い箇所から優先的に対応しましょう。

Q: テストはどうすればいい？
A:

  1. 自動テスト：axe DevTools、Lighthouse
  2. 手動テスト：キーボード操作、スクリーンリーダー（NVDA、VoiceOver）
  3. ユーザーテスト：多様なユーザーによるテスト（支援技術を使うユーザーを含む）

こんな人におすすめ

  • Webアクセシビリティ対応を求められているエンジニア
  • WCAG 2.1 AA準拠を目指している方
  • React/Vue/Next.jsでの実装方法を知りたい方
  • チームにアクセシビリティ文化を根付かせたい方
  • より多くのユーザーに使ってもらえるサイトを作りたい方

さらに深く学ぶには

本記事で紹介したのは、アクセシビリティ対応のほんの一部です。

もっと詳しく学びたい方には、こちらの本がおすすめです：

https://zenn.dev/gaku/books/web-quality-accessibility-guide

本書では、以下の内容を23章・20万文字以上で詳しく解説しています：

📚 本書の内容

Part 1: WCAG 2.1準拠ガイド（全6章）

  • WCAG 2.1の4原則を実例で解説
  • AA準拠のための具体的なチェックリスト
  • 準拠レベルの判断基準

Part 2: アクセシビリティ実装（全6章）

  • セマンティックHTML完全ガイド
  • ARIA属性の正しい使い方
  • キーボードナビゲーション実装
  • スクリーンリーダー対応の実践
  • カラーコントラストの計算と調整
  • アクセシビリティテストの自動化

Part 3: モダンWeb開発（全5章）

  • React/Vue/Next.jsのフレームワーク選定
  • それぞれのベストプラクティス
  • 状態管理とアクセシビリティ

Part 4: 技術ドキュメント作成（全4章）

  • README、API仕様書の書き方
  • アーキテクチャ図の作成
  • チームで共有できるドキュメント戦略

Part 5: 自動化（全2章）

  • CI/CDへのアクセシビリティテスト統合
  • 継続的な品質改善

💰 価格：500円

全23章、204,473文字のボリュームで、明日から実務で使える実践的な内容です。

まとめ

アクセシビリティ対応は、難しくありません。

  1. <div>を<button>に変える
  2. 画像にalt属性を付ける
  3. カラーコントラストを確認する
  4. キーボードで操作できるか確認する

この4つから始めるだけで、大きく改善します。

「誰もが使えるWebを作る」

それは、開発者としての責任であり、ユーザーへの思いやりです。

ぜひ、今日から一歩を踏み出してみてください。

GitHubで編集を提案

Discussion