# 手話通訳がない、または手話が小さすぎて読み取れない動画

Source: https://easeweb.dev/learn/sign-language
Topics: 画像とメディア > 動画に手話通訳がある (WCAG 1.2.6)
The fix: 画面の3分の1ほどを占める通訳者の枠を映像の横に置いた手話通訳版を公開し、プレーヤーの下の「手話」ボタンから選べるようにします。または、通訳者の動画を2本目としてプレーヤーの横に置き、スクリプトで同期させます。どちらの場合も、通訳者はスマートフォンでも読み取れる大きさにします。
Test with: sound off, keyboard, screen reader
References: https://www.w3.org/WAI/WCAG22/Understanding/sign-language-prerecorded.html https://www.w3.org/WAI/WCAG22/Techniques/general/G54 https://www.w3.org/WAI/WCAG22/Techniques/general/G81 https://www.w3.org/WAI/media/av/sign-languages/ https://wfdeaf.org/wp-content/uploads/WFD-WASLI-Guidelines-SL-access-FINAL-18March20-1-1.pdf https://github.com/ableplayer/ableplayer https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

## 場面

コーヒー焙煎店の淹れ方動画には、分量も手順もタイマーの音も入った正しい字幕が付きました。けれども、手話を第一言語とするろう者の客にとって、字幕は第二言語の文字で、ナレーションの速さで流れていきます。店は手話の版を用意していません。後で編集し直した版には通訳者が加わりましたが、手話通訳者がよく置かれる映像の右下の隅に、幅の8分の1の大きさで映っているだけです。ノートパソコンでよくある幅640ピクセルのプレーヤーでは、通訳者の高さは105ピクセルほどです。縦に持ったスマートフォンで動画の幅が360ピクセルほどになると、高さは60ピクセルほどで、顔も手も十数ピクセル以下、口は数ピクセルしかありません。通訳者はいるのに、誰も読み取れません。

## 確認できる問題

レベルAAAの達成基準1.2.6は、同期したメディアの収録済みの音声すべてに、手話通訳を付けることを求めます。字幕ではこれを満たせません。手話はそれ自体が独自の文法を持つ言語で、日本語を手の形に置き換えたものではありません。1.2.6の解説書も、手話を母語とする人の中には文字を読むのが得意でない人もいること、手話は字幕にはない抑揚や感情を伝えることを挙げています。最初の版には手話通訳がまったくないため、満たしません。次の版には通訳者がいますが、小さすぎて使えません。通訳者を動画に映す達成方法G54は、動画が小さすぎると手話通訳者を見分けられなくなり、映像に埋め込んだ通訳者は映像全体を拡大しない限り大きくできない、と注意を促しています。W3Cの手話動画のガイダンスも、視聴者が動きと表情をすべてはっきり見られる大きさを求めています。世界ろう連盟（WFD）と世界手話通訳者協会（WASLI）が2020年に出した公衆衛生情報のガイドラインは、ライブのニュース番組について、通訳者を映像に重ねるなら「画面の少なくとも半分」、別の枠に置くなら「画面の25%」を勧めています。この例の通訳者は4%ほどです。

## 利用者への影響

手話を使うろう者が最も影響を受けます。周りの聞こえる人も、字幕があれば十分だと思って動画を勧めてしまい、問題に気付きません。手話は国ごとに異なり、日本の日本手話、アメリカのASL、イギリスのBSLはそれぞれ別の言語です。視聴者と違う手話の通訳は、外国語の音声と同じで役に立ちません。

## 自動チェックとAIの限界

これを見つける自動チェックはありません。axeが確かめるのは動画に字幕トラックがあるかどうかで、手話には触れません。自動チェックには、映像に通訳者がいるかどうかも、その大きさも分かりません。EaseWebの診断はすべての動画を人が確認する項目として挙げますが、そこで求める確認はレベルAAまでで、手話通訳（1.2.6）には触れません。AIツールはフレームの隅の人物を見つけられても、その人が動画の話を正しい手話で正確に通訳しているかは判断できません。それができるのは、その手話に堪能な人だけです。

## 修正前：字幕だけで、通訳者がいない

```html
<video controls preload="metadata"
  src="brew-guide.webm" poster="brew-guide.jpg">
  <track kind="captions" srclang="ja" label="日本語"
    src="brew-guide.ja.vtt">
</video>
```

字幕は正しく、足りないのは手話です。

- 動画を手話で見る方法が、ページのどこにもありません。
- そのため手話を使うろう者は、ナレーションの速さで流れる字幕を読むしか、レシピを知る方法がありません。

## 修正前：隅に小さく映る通訳者

```html
<video controls preload="metadata"
  src="brew-guide.signed.webm" poster="brew-guide.jpg">
  <track kind="captions" srclang="ja" label="日本語"
    src="brew-guide.ja.vtt">
</video>
```

マークアップの違いは、再生するファイルだけです。通訳者はそのファイルの中にいて、問題もファイルの中にあります。

- 通訳者は映像の右下の隅に、幅の8分の1、面積では4%ほどの大きさで映っています。
- 縦に持ったスマートフォンでは高さ60ピクセルほどで、手の形も表情も口の動きも読み取れません。
- 映像の一部なので、映像全体を拡大しない限り大きくできず、全画面にしても幅の8分の1のままです。

## 修正後：映像の横に通訳者を置いた手話通訳版

```html
<video id="brew-video" controls preload="metadata"
  src="brew-guide.webm" poster="brew-guide.jpg"
  data-signed="brew-guide.interpreted.webm">
  <track kind="captions" srclang="ja" label="日本語"
    src="brew-guide.ja.vtt">
</video>
<button type="button" id="sign" aria-pressed="false">
  手話
</button>

<script>
  const video = document.getElementById('brew-video');
  const plain = video.getAttribute('src');
  document.getElementById('sign').addEventListener('click', (event) => {
    const button = event.currentTarget;
    const on = button.getAttribute('aria-pressed') !== 'true';
    const { currentTime, paused, playbackRate } = video;
    video.src = on ? video.dataset.signed : plain;
    // 同じ位置、同じ速度で続ける。
    video.addEventListener('loadedmetadata', () => {
      video.currentTime = currentTime;
      video.playbackRate = playbackRate;
      if (!paused) video.play();
    }, { once: true });
    button.setAttribute('aria-pressed', String(on));
  });
</script>
```

1. 動画の手話通訳版を編集します（W3Cの達成方法G54）。映像を画面の3分の2に縮め、残りの3分の1に、画面の高さいっぱいで通訳者を置きます。通訳者は映像のどこも覆わず、腰の下から頭の上までの手話の空間がすべて映ります。
2. そのファイルを、プレーヤーの `data-signed` に書いておきます。
3. プレーヤーのすぐ下に、`aria-pressed` 付きの「手話」ボタンを置きます。何が選べるかと、オンかどうかを伝えます。
4. クリックされたら手話通訳版のファイルに替え、同じ位置から続けます。音声は同じなので、字幕ファイルはそのままです。

これで二つの修正前の例は直り、1.2.6を満たします。通訳者はファイルの一部なので、全画面にすると映像と一緒に大きくなり、そのまま動画サービスにも上げられます。元の動画と同じ長さに編集すればタイミングも保たれます。長さが違う場合は、最初から再生します。

## 修正後：プレーヤーの横で同期する通訳者の動画

```html
<div class="player">
  <video id="brew-video" controls controlslist="nofullscreen" playsinline
    preload="metadata" src="brew-guide.webm" poster="brew-guide.jpg">
    <track kind="captions" srclang="ja" label="日本語"
      src="brew-guide.ja.vtt">
  </video>
  <video id="interpreter" class="interpreter" muted playsinline
    preload="metadata" src="brew-guide.interpreter.webm" hidden></video>
</div>
<button type="button" id="sign" aria-pressed="false">
  手話
</button>
<button type="button" id="full-screen">
  全画面
</button>

<style>
  .player:has(.interpreter:not([hidden])) {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.5rem;
  }
  .player video {
    width: 100%;
  }
  .interpreter {
    height: 100%;
    object-fit: cover;
  }
</style>

<script>
  const player = document.querySelector('.player');
  const video = document.getElementById('brew-video');
  const interpreter = document.getElementById('interpreter');
  const button = document.getElementById('sign');
  // 通訳者の動画を、再生位置、速度、再生と一時停止まで動画に合わせる。
  function follow() {
    if (interpreter.hidden) return;
    interpreter.playbackRate = video.playbackRate;
    if (Math.abs(interpreter.currentTime - video.currentTime) > 0.3) {
      interpreter.currentTime = video.currentTime;
    }
    if (video.paused) interpreter.pause();
    else interpreter.play();
  }
  for (const type of ['play', 'pause', 'seeked', 'ratechange', 'timeupdate']) {
    video.addEventListener(type, follow);
  }
  button.addEventListener('click', () => {
    const on = button.getAttribute('aria-pressed') !== 'true';
    interpreter.hidden = !on;
    button.setAttribute('aria-pressed', String(on));
    follow();
  });
  // 全画面にするときは、通訳者も映像と一緒にする。
  document.getElementById('full-screen').addEventListener('click', () => {
    player.requestFullscreen();
  });
</script>
```

1. 通訳者だけを、元の動画と同じ長さの別の動画として撮影します（W3Cの達成方法G81）。
2. その動画を消音にして、プレーヤーの横に置き、求められるまで隠しておきます。二つの動画には `playsinline` を付け、iPhoneが映像だけを全画面にせず、ページの中で再生するようにします。
3. プレーヤーの下に、通訳者の表示を切り替える `aria-pressed` 付きの「手話」ボタンを置きます。
4. 二つを同期させます。動画の再生、一時停止、移動、速度の変更に通訳者の動画が従い、0.3秒より大きなずれは直します。
5. 二つを横に並べ、どちらの動画も列の幅に合わせます。通訳者は幅の3分の1で、高さは映像と同じにします。
6. 両方を囲む要素を全画面にする「全画面」ボタンを加え、動画自体の全画面ボタンは `controlslist="nofullscreen"` で隠します。

これで二つの修正前の例は直り、1.2.6を満たします。映像は元の大きさのまま見られ、通訳者は視聴者が消すこともできます。レイアウトしだいで、通訳者をもっと大きく並べることも、狭い画面ではプレーヤーの下に置くこともできます。ただし `controlslist` が働くのはChromium系のブラウザーだけです。FirefoxとSafariでは動画自体の全画面ボタンが残り、通訳者を置いたまま映像だけを拡大します。iPhoneのSafariは囲む要素を全画面にできないため、「全画面」ボタンはiPadでは働いても、iPhoneでは働きません。

## どの方法を選ぶか

どちらも1.2.6を満たします。選ぶなら手話通訳版です。一つのファイルなので、どのブラウザーでも、上げたどの動画サービスでも同じように再生され、全画面にしても通訳者が残ります。プレーヤーの横の通訳者の動画は、Chromium系以外のブラウザーで動画自体の全画面にすると通訳者が置き去りになり、iPhoneでは二つを一緒に全画面にできないため、それだけでは足りません。元の映像を元の大きさのまま見せたいとき、一つの通訳者の録画を映像の複数の編集版で使い回すとき、手話のウィンドウを表示できるアクセシブルなプレーヤーを使うときに選び、「全画面」ボタンは残してください。

## 実装の判断

動画を再生する場所によって、手話通訳の届け方が変わります。

- 自分の `<video>`：上のどちらの方法でもよい。W3Cの手話動画のガイダンスが勧めるように、「手話」ボタンはプレーヤーのすぐ下に、大きく、ラベル付きで置く。プレーヤーが独自の操作バーを持つ場合は、[操作バーに字幕のボタンがない動画プレーヤー](/ja/learn/caption-controls)と同じく、字幕の操作の隣に置く。
- YouTubeやVimeoなどの動画サービス：一つの映像しか再生しないため、手話通訳版を別の動画として上げ、埋め込みのすぐ下に、手話で見られることが分かる名前（「手話で見る」）でリンクする。
- アクセシブルなプレーヤー：Able Playerは、手話の動画をメインの動画と同期した別のウィンドウに表示し、視聴者はマウスでもキーボードでも移動や拡大縮小ができる（動画の `source` に `data-sign-src`）。READMEには、iOSでは使えないとある。

通訳者の大きさは、視聴される最も小さな画面に合わせて決め、その画面で確かめます。画面の幅の3分の1で高さいっぱいの枠は面積の3分の1で、WFDとWASLIの言う4分の1を超え、隅の小さな通訳者の9倍あります。W3Cのガイダンスは、通訳者は右下に置くことが多いとしたうえで、大切な情報を覆わないよう求めています。通訳者の下に映像の文字や字幕、テロップが重ならない位置に置きます。

通訳者は画面で見られることを前提に撮影します。背景と服は、肌の色と対比する無地にし、照明を十分に当て、腰の下から頭の上まで、左右には肘の幅ほどの手話の空間をすべて画面に収めます。通訳者の動画には音声がないため字幕は要りません。ただし、2本目の `<video>` に字幕を求める自動チェックもあります。

手話は、動画の視聴者が使うものを選び、視聴者が国をまたぐなら複数用意します。ろう者の団体や資格のある手話通訳者に翻訳や通訳を頼み、公開する前に、その手話に堪能な人に確認してもらいます。

字幕は別の要件で、[字幕のない動画と、確認されていない自動字幕](/ja/learn/video-captions)で扱っています。ろう者や難聴者の多くは手話を使わないため、字幕も欠かせません。

## 修正の確認

1. 視聴者と同じように、プレーヤーの下かそばにある手話の版を、名前を頼りに見つける。オンにして、動画の最初から最後まで通訳者が映ることを確認する。
2. 縦に持ったスマートフォン、ノートパソコン、全画面で見る。どの大きさでも通訳者の手、表情、口の動きを読み取れ、通訳者が映像の文字を覆っていない。
3. キーボードだけで、次にスクリーンリーダーで「手話」ボタンまで移動し、オンとオフを切り替える。スクリーンリーダーが押されているかどうかを伝え、動画の再生位置が保たれることを確認する。
4. その手話に堪能な人に最後まで見てもらう。すべての話し声と意味のある音が、正しい手話で、動画と同期して通訳され、一時停止、移動、速度の変更の後もずれない。

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。動画や手話通訳を差し替えた際は、再度確認します。

## 制限

これは出発点となる実装例であり、すべてのアプリケーションでの適合を保証するものではありません。通訳の質や、視聴者に必要な手話がどれかは、このガイドでは判断できず、判断できるのはその手話に堪能な人だけです。手話通訳はレベルAAAのため、WCAGのレベルAAを基準とする多くの法令や方針では求められていません。ライブ配信は[字幕がない、または自動字幕だけのライブ配信](/ja/learn/live-captions)で扱っており、1.2.6が手話通訳を求めるのは収録済みの動画だけです。ろう者の視聴者と一緒に、動画が実際に再生されるプレーヤーやサービスで、一連の流れ全体を試してください。

## スクリーンリーダーでの動き（EaseWebが実機で確認）

`aria-pressed`: ボタンを、オンとオフを切り替えるトグルにします。

| スクリーンリーダー | ブラウザーとOS | 押す | Tabで移動 |
| --- | --- | --- | --- |
| NVDA | Chrome, Windows 11 | 未確認 | 未確認 |
| JAWS | Chrome, Windows 11 | 未確認 | 未確認 |
| VoiceOver | Safari, iOS | 未確認 | 未確認 |
| TalkBack | Chrome, Android | 未確認 | 未確認 |

https://easeweb.dev/ja/learn/screen-reader-support

---

このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）