```
```js
const player = document.querySelector('.player');
const video = player.querySelector('video');
const start = player.querySelector('.big-play');
const bar = player.querySelector('.player-bar');
const captions = player.querySelector('.captions');
const described = player.querySelector('.described');
const SOURCES = { false: 'brew-guide.webm', true: 'brew-guide.ad.webm' };
// The play button over the poster starts the video and gives way to the bar.
start.addEventListener('click', () => {
video.play();
start.hidden = true;
bar.hidden = false;
});
// … the bar's play, position, mute and volume handlers
captions.addEventListener('click', () => {
const on = captions.getAttribute('aria-pressed') !== 'true';
video.textTracks[0].mode = on ? 'showing' : 'hidden';
captions.setAttribute('aria-pressed', on);
});
// Swap to the described version, or back, at the same place in the video.
described.addEventListener('click', () => {
const on = described.getAttribute('aria-pressed') !== 'true';
const { currentTime, paused } = video;
video.src = SOURCES[on];
video.addEventListener('loadedmetadata', () => {
video.currentTime = currentTime;
if (!paused) video.play();
}, { once: true });
described.setAttribute('aria-pressed', on);
});
```
再生ボタンは `click` にしか反応しないdivで、Tabの止まり先も、役割も、名前もありません。三角形はCSSで描いているため、読むものも何もありません。プレーヤーのほかの部分は、すべてこのボタンの先にあります。操作バーは最初のクリックまで隠れているので、操作バーのボタンがどれほど正しく作られていても、キーボードの利用者はたどり着けません。
## 修正前：字幕と音声解説のボタンがない操作バー
```html
0:00
```
```js
const player = document.querySelector('.player');
const video = player.querySelector('video');
const start = player.querySelector('.big-play');
const bar = player.querySelector('.player-bar');
// The play button over the poster starts the video and gives way to the bar.
start.addEventListener('click', () => {
video.play();
start.hidden = true;
bar.hidden = false;
// It is gone now, so focus moves on to the bar's play button.
bar.querySelector('.play').focus();
});
// … the bar's play, position, mute and volume handlers
```
再生ボタンは「Play video」という名前のHTML標準のボタンで、操作バーの操作部品もボタンとスライダーなので、プレーヤーは2.1.1と4.1.2を満たします。しかし、ブラウザー標準の操作部品の代わりに独自の操作部品を使いながら、字幕をオンにする手段を用意していません。`track` は動画にありますが、そのモードは `disabled` のままです。音声解説版の `brew-guide.ad.webm` はサーバーにありますが、プレーヤーには再生する手段がありません。
## 修正後：再生ボタンと、字幕と音声解説のある操作バー
```html
0:00
```
```js
const player = document.querySelector('.player');
const video = player.querySelector('video');
const start = player.querySelector('.big-play');
const bar = player.querySelector('.player-bar');
const captions = player.querySelector('.captions');
const described = player.querySelector('.described');
const SOURCES = { false: 'brew-guide.webm', true: 'brew-guide.ad.webm' };
// The play button over the poster starts the video and gives way to the bar.
start.addEventListener('click', () => {
video.play();
start.hidden = true;
bar.hidden = false;
// It is gone now, so focus moves on to the bar's play button.
bar.querySelector('.play').focus();
});
// … the bar's play, position, mute and volume handlers
captions.addEventListener('click', () => {
const on = captions.getAttribute('aria-pressed') !== 'true';
video.textTracks[0].mode = on ? 'showing' : 'hidden';
captions.setAttribute('aria-pressed', on);
});
// Swap to the described version, or back, at the same place in the video.
described.addEventListener('click', () => {
const on = described.getAttribute('aria-pressed') !== 'true';
const { currentTime, paused } = video;
video.src = SOURCES[on];
video.addEventListener('loadedmetadata', () => {
video.currentTime = currentTime;
if (!paused) video.play();
}, { once: true });
described.setAttribute('aria-pressed', on);
});
```
ポスター画像の上の再生ボタンはHTML標準のボタンなので、キー操作を書かなくても、Tabキーで届き、EnterキーとSpaceキーで押せ、スクリーンリーダーは「Play video、ボタン」と読みます。押すとこのボタンは消えるため、スクリプトはフォーカスを操作バーの再生ボタンへ移します。このボタンは、動画が再生されるとPauseと読まれます。この1行がないと、ブラウザーはフォーカスをページそのものに戻し、フォーカスはプレーヤーから離れてしまいます。操作バーは再生ボタンを押す前から表示しているので、字幕と音声解説も再生と同じく1回押すだけで済み、動画を始める前にオンにしておけます。操作バーのCCボタンは動画にすでにある字幕トラックを表示し、ADボタンは、[音声解説がなく、画面の情報が伝わらない動画](/ja/learn/audio-description)と同じ方法で、再生中の位置のまま音声解説版に入れ替えます。どちらもオンかどうかを `aria-pressed` で伝え、名前は表示されている文字で始まります。
## 修正後：ブラウザー標準の操作部品と、音声解説ボタン
```html
```
```js
const player = document.querySelector('.player');
const video = player.querySelector('video');
const described = player.querySelector('.described');
const SOURCES = { false: 'brew-guide.webm', true: 'brew-guide.ad.webm' };
// Swap to the described version, or back, at the same place in the video.
described.addEventListener('click', () => {
const on = described.getAttribute('aria-pressed') !== 'true';
const { currentTime, paused } = video;
video.src = SOURCES[on];
video.addEventListener('loadedmetadata', () => {
video.currentTime = currentTime;
if (!paused) video.play();
}, { once: true });
described.setAttribute('aria-pressed', on);
});
```
`controls` 属性を付けると、ブラウザーが自前の再生ボタンと操作バーを描きます。どの操作部品もブラウザーが作り、名前を付け、キーボードで使えるようにします。動画に字幕トラックがあれば、字幕をオンにする手段も入ります。隠れた操作バーも、引き継ぐフォーカスもありません。この操作部品に足りないのは音声解説版のボタンだけなので、サイトはプレーヤーのすぐ下に、再生中の位置のまま音声解説版に入れ替えるボタンを足します。操作部品の見た目、名前、どのキーで動くかはブラウザーごとに違うため、対応するすべてのブラウザーで試してください。字幕の操作をどこに置くかもブラウザーが決めます。Chromeは操作部品のオーバーフローメニューの中、音量より1段下に置くため、Section 508の503.4.1を満たさず、動画が主な内容のページではEN 301 549の7.3も満たしません。詳しくは[操作バーに字幕のボタンがない動画プレーヤー](/ja/learn/caption-controls)で説明しています。
## どの方法を選ぶか
どちらも2.1.1と4.1.2を満たし、字幕と音声解説版をオンにできます。再生ボタンと操作バーをHTML標準のボタンと範囲入力で作る方法は、ショップ独自の見た目を保ち、CCとADを音量の隣に置けますが、本来ならブラウザーが用意してくれる上のスクリプトが要ります。ブラウザー標準の操作部品は属性1つで済みますが、サイトの見た目に合わせられず、音声解説ボタンは操作部品の外に置くことになり、Chromeでは字幕が音量より1段下のメニューに入ります。HTML標準のボタンとスライダーを使ってください。Section 508の503.4.1とEN 301 549の7.3が求めるとおり、どのブラウザーでも字幕を音量の隣に置けるのは、2つのうちこちらだけです。ブラウザー標準の操作部品は、そのどちらも適用されないページで、プレーヤーを作り直すまでの応急の修正です。
## 実装の判断
再生ボタンには、何を再生するかがわかる名前を付けます。ページに動画が1つなら「Play video」で足ります。複数あるなら、「Play: How to brew our house blend」のように、`aria-label` か、動画の見出しを指す `aria-labelledby` で、それぞれに別の名前を付けます。マウスのための便利な仕掛けとして、ポスター画像全体がクリックに反応してもかまいません。ただし、キーボードのための丸いボタンは残します。
操作バーは、動画を始める前から表示しておきます。最初に押すまで再生ボタンしか見せないプレーヤーでは、字幕と音声解説が再生より1段下になり、字幕が必要な人は字幕なしで動画を始めるしかありません。EN 301 549の7.3は、動画が主な内容のページで、これらを主な操作と同じ階層に置くよう求めています。詳しくは[操作バーに字幕のボタンがない動画プレーヤー](/ja/learn/caption-controls)で説明しています。ポスター画像をすっきり見せたいデザインなら、ポスター画像の上で、再生ボタンの隣に字幕ボタンを置きます。下の「デザインの案」にも、この形の例があります。
操作バーの操作部品にも、ほかの操作部品と同じ決まりが当てはまります。
- 再生ボタンは、名前（PlayかPause）だけを変える。ARIA Authoring Practicesは、切り替えボタンのラベルは状態が変わっても変えてはならないとしているので、ボタンは名前を変えるか、名前を変えずに `aria-pressed` で状態を伝えるかのどちらかにし、両方はしない。
- ミュート、CC、ADは名前を変えずに、オンかどうかを `aria-pressed` で伝える。
- 再生位置のスライダーは、`aria-valuetext` で「12 seconds of 24 seconds」のように時間を言葉で伝え、スクリーンリーダーが単位のない数字を読まないようにする。divで描いた再生位置の線では、`role="slider"`、`tabindex="0"`、矢印キー、HomeキーとEndキー、すべての `aria-value` 属性をスクリプトで用意することになる。`input type="range"` なら、どれも最初からそろっている。
操作バーは、キーボードの利用者に見える場所に置いておきます。再生が始まって数秒で消える操作バーは、フォーカスがプレーヤーに入ったら再び表示し、フォーカスがある間は消さないようにします。そうしないと、キーボードの利用者は見えない操作部品の上をTabキーで移動することになります。どの操作部品にも、ポスター画像の上の再生ボタンにも、暗い操作バーと、映像の明るい部分と暗い部分の両方に対して目立つフォーカスの枠を付けます。詳しくは[フォーカス表示が見えない独自デザインのボタン](/ja/learn/visible-focus)で扱っています。
SpaceキーやKキーで再生、Mキーでミュート、Cキーで字幕といったキーボードショートカットは、あればうれしいものですが、ボタンの代わりにはなりません。プレーヤーにフォーカスがあるときだけ働く1文字のショートカットは、2.1.4で認められています。ページのどこでも働くものは、[オフにできない1文字のショートカット](/ja/learn/character-key-shortcuts)の一つになります。
動画にあるものだけを出します。字幕トラックがあればCCボタンを、音声解説版があればADボタンを置きます。これらのボタンの置き場所と操作の回数は[操作バーに字幕のボタンがない動画プレーヤー](/ja/learn/caption-controls)で、字幕の大きさと色は[スタイルを変えられない字幕、変換で消える字幕](/ja/learn/caption-quality)で扱っています。ページを軽くするために、クリックされてからYouTubeやVimeoのプレーヤーを読み込むポスター画像にも、同じHTML標準の再生ボタンが必要です。埋め込みが読み込まれたあとの操作部品はサービス側のものなので、下の手順で、実際に何が描かれるかを確認してください。
## 修正の確認
1. マウスを使わず、ポスター画像の上か、ブラウザー標準の操作バーにある動画の再生ボタンまでTabキーで移動し、EnterキーかSpaceキーを押す。動画が始まり、フォーカスが操作バーの再生ボタンに移る。操作バーのどの操作部品もTabの止まり先になり、矢印キーで再生位置と音量を変えられる。
2. スクリーンリーダーで、再生前の動画まで移動する。再生ボタンは、何を再生するかと、ボタンであることが読まれる。押したあとは、操作バーの再生ボタンがPauseと読まれ、ミュート、字幕、音声解説はオンかどうかが読まれる。
3. キーボードで、操作バーかプレーヤーの隣のボタンから、字幕と音声解説版をオンにする。字幕が表示され、音声解説版は同じ位置から続く。
4. 再生前と再生中に、Tabキーで移動しながらフォーカスの枠を見る。ポスター画像の明るい部分と暗い部分に重なる再生ボタンにも、操作バーのどの操作部品にも枠が見える。フォーカスがプレーヤーにある間は、操作バーが表示されたままになる。
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。プレーヤーやそのライブラリーを更新した際は、再度確認します。
## 制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。扱うのは、プレーヤーの操作部品に届くか、何を伝えるか、字幕と音声解説版をオンにできるかです。中身は別のガイドで扱います。字幕は[字幕のない動画と、確認されていない自動字幕](/ja/learn/video-captions)で、音声解説は[音声解説がなく、画面の情報が伝わらない動画](/ja/learn/audio-description)で扱います。音声付きで自動再生される動画は、まず止める手段が必要で、[止められない自動再生の音声](/ja/learn/autoplay-audio)で扱います。ほかのコンテンツと並んで自動で動く動画には一時停止が必要で、[一時停止できない、流れる文字、カルーセル、アニメーション](/ja/learn/moving-content)で扱います。視聴者が使うブラウザーと支援技術で、一連の流れを確認してください。
---
このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）