WCAG 2.2を踏まえた音声読み上げUIの実装｜要件・ARIA・Web Speech API・テスト

Webページに「本文を音声で読む」機能を付けるとき、重要なのは音が出ることだけではありません。再生や停止を迷わず操作でき、現在の状態が見た目でも支援技術でも分かり、キーボードやポインタでも扱えることが必要です。

先に結論を述べると、WCAG 2.2は、すべてのWebサイトに音声読み上げ機能の追加を求めているわけではありません。ただし、TTSを提供するなら、そのコントロール自体をアクセシブルに実装する必要があります。また、3秒を超える音声を自動再生する場合は、停止・一時停止、またはシステム音量とは独立した音量調整が必要です。コンポーネント単体のコードだけでサイト全体の「WCAG 2.2準拠」を保証することはできないため、最後に実環境で検証します。

TTSとスクリーンリーダーは同じものではない

最初に、混同しやすい用語を分けます。ここを曖昧にすると、誰のどの困りごとを解決する機能なのか判断しにくくなります。

スクリーンリーダーの仕組みや確認環境を先に知りたい場合は、サイト内のスクリーンリーダー対応の実装とテストも参照してください。

音声読み上げUIに関係するWCAG 2.2の達成基準

達成基準は、機能が存在するだけで一律に適用されるものではありません。次の表では、音声読み上げUIとの関係と、実装時に確認する内容を分けて整理します。WCAG 2.2で追加された基準の全体像は、サイト内のWCAG 2.2の追加達成基準の解説で確認できます。

2.4.13 Focus AppearanceはAAAの基準です。AAを目標にする場合でも、十分な大きさとコントラストを持つフォーカス表示は有効ですが、達成レベルを混同しないようにします。

操作設計はネイティブHTMLから始める

再生や停止は、見た目をボタンらしくした<div>ではなく、最初から<button type="button">で実装します。これにより、標準のキーボード操作、フォーカス、役割を利用できます。独自ARIAは、HTMLだけでは表せない情報を補う場合に限定します。

• 動作を表すラベルにする：「▶」だけでなく「読み上げる」「一時停止」「再開」「停止」のように、次に何が起きるかを文字で示します。
• トグルの方式を混在させない：aria-pressedを使うトグルボタンはラベルを固定するのが基本です。再生と一時停止でラベルを変える方式なら、aria-pressedを付けず、ボタン名を現在可能な操作に更新するほうが理解しやすくなります。
• 状態通知は簡潔にする：開始・一時停止・再開・終了など、利用者の判断に必要な変化だけをrole="status"で通知します。
• 設定変更の反映時点を示す：音量や速度が次回の読み上げから反映されるなら、ラベルや説明に明記します。

ARIAの役割をさらに確認したい場合は、サイト内の音声読み上げに配慮したARIA属性の使い分けも役立ちます。

Web Speech APIによる最小実装例

次の例は、利用者の操作で本文の読み上げを始める構成です。コードは学習用の最小例であり、これだけでWCAG適合を保証するものではありません。WordPressへ組み込む際は、テーマやプラグインのスクリプト管理方法に合わせて配置してください。

HTML

<section aria-labelledby="tts-heading">
  <h2 id="tts-heading">本文の音声読み上げ</h2>
  <div class="tts-controls" role="group" aria-label="音声読み上げ操作">
    <button type="button" id="tts-play">読み上げる</button>
    <button type="button" id="tts-stop">停止</button>

    <label for="tts-volume">音量（次回の読み上げから）</label>
    <input id="tts-volume" type="range" min="0" max="1" step="0.1" value="1">

    <label for="tts-rate">速度（次回の読み上げから）</label>
    <input id="tts-rate" type="range" min="0.5" max="2" step="0.1" value="1">
  </div>

  <p id="tts-status" role="status" aria-atomic="true">待機中</p>
  <p id="tts-unsupported" hidden>この環境では音声読み上げを利用できません。本文はそのままお読みいただけます。</p>

  <div id="tts-target">
    <p>ここに読み上げ対象の本文を置きます。</p>
  </div>
</section>

JavaScript

const synth = window.speechSynthesis;
const playButton = document.getElementById('tts-play');
const stopButton = document.getElementById('tts-stop');
const target = document.getElementById('tts-target');
const status = document.getElementById('tts-status');
const unsupported = document.getElementById('tts-unsupported');
const volume = document.getElementById('tts-volume');
const rate = document.getElementById('tts-rate');
let stopRequested = false;

const canSpeak = 'speechSynthesis' in window
  && typeof SpeechSynthesisUtterance === 'function';

if (!canSpeak) {
  playButton.hidden = true;
  stopButton.hidden = true;
  unsupported.hidden = false;
}

playButton.addEventListener('click', () => {
  if (synth.speaking && synth.paused) {
    synth.resume();
    playButton.textContent = '一時停止';
    status.textContent = '読み上げを再開しました';
    return;
  }

  if (synth.speaking) {
    synth.pause();
    playButton.textContent = '再開';
    status.textContent = '読み上げを一時停止しました';
    return;
  }

  const utterance = new SpeechSynthesisUtterance(target.textContent.trim());
  stopRequested = false;
  utterance.volume = Number(volume.value);
  utterance.rate = Number(rate.value);
  utterance.onstart = () => {
    playButton.textContent = '一時停止';
    status.textContent = '読み上げを開始しました';
  };
  utterance.onend = () => {
    if (stopRequested) return;
    playButton.textContent = '読み上げる';
    status.textContent = '読み上げを終了しました';
  };
  utterance.onerror = (event) => {
    if (stopRequested || event.error === 'canceled') return;
    playButton.textContent = '読み上げる';
    status.textContent = '読み上げを開始できませんでした';
  };

  synth.cancel();
  synth.speak(utterance);
});

stopButton.addEventListener('click', () => {
  stopRequested = true;
  synth.cancel();
  playButton.textContent = '読み上げる';
  status.textContent = '読み上げを停止しました';
});

CSSで確認する最小項目

.tts-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.tts-controls button {
  min-inline-size: 24px;
  min-block-size: 24px;
  padding: 0.5rem 0.75rem;
}

.tts-controls :focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

MDNのSpeechSynthesisリファレンスでは、speak()、pause()、resume()、cancel()などの動作を確認できます。利用できる声や読み上げ方は端末とブラウザの環境に依存するため、対象環境での確認が必要です。

このサンプルで意図的に省いたもの

• 自動再生：ページを開いた直後に音声を流さず、利用者の明示的な操作で開始します。
• シーク：上の例には再生位置の移動機能がありません。そのため、「シークのドラッグ代替を実装済み」とは評価しません。追加する場合は、その操作方法を別途検証します。
• 声の選択：端末ごとに利用できる音声が異なるため、最小例からは外しています。追加する場合は、選択肢が空の状態や後から読み込まれる状態も扱います。
• 自動ハイライト：読み上げ位置に合わせた表示更新は、環境差と2.2.2の検討が増えるため、必要性を確認してから追加します。

公開前の受け入れテスト

1. キーボード：TabとShift＋Tabで全操作に到達できるか、EnterまたはSpaceでボタンを実行できるか、スライダーを矢印キーで変更できるか確認します。
2. スクリーンリーダー：再生・停止ボタンの名前と役割、スライダーのラベルと値、開始・一時停止・再開・終了の状態が理解できるか確認します。
3. フォーカス表示：フォーカスが見え、固定ヘッダー、Cookie通知、ダイアログなどに完全に隠れないか、ページ全体を移動して確認します。
4. ポインタとタッチ：ボタンが小さすぎず、隣接する操作を誤って押しにくいか確認します。カスタムのドラッグ操作があれば、ドラッグ不要の代替も試します。
5. 失敗時：未対応環境、音声が取得できない環境、読み上げエラーでも本文が消えず、利用者が通常どおり読めるか確認します。
6. 複数環境：一つのブラウザだけで終えず、対象とするOS、ブラウザ、スクリーンリーダーの組み合わせで結果を記録します。

実務チェックリスト

• 自動再生を避け、利用者の操作で読み上げを始める
• 再生、一時停止、再開、停止の違いをラベルで明示する
• ネイティブのボタン、ラベル付き入力部品を優先する
• 状態通知は短くし、フォーカスを移動させない
• 可視フォーカスを消さず、重なりによる隠れも確認する
• 小さく密集した操作対象を避ける
• ドラッグ機能を追加した場合は単一ポインタの代替を用意する
• 機能が使えない場合も、本文を読める状態を保つ
• 自動テストだけで終えず、キーボードと支援技術で手動確認する
• コンポーネントの合格をサイト全体のWCAG適合と言い換えない

まとめ

音声読み上げUIは、TTSを追加するだけでは完成しません。自動再生の有無を切り分け、ネイティブHTMLで操作部品を作り、状態通知、可視フォーカス、ターゲットサイズ、失敗時の代替を順に確認することが要点です。まずは小さな構成で実装し、利用者が実際に使う環境で検証してから機能を増やしてください。

参考資料

• Web Content Accessibility Guidelines（WCAG）2.2
• W3C「What’s New in WCAG 2.2」
• WAI-ARIA Authoring Practices Guide「Button Pattern」
• MDN「SpeechSynthesis」