```
```js
const player = document.querySelector('.player');
const video = player.querySelector('video');
const captions = player.querySelector('.captions');
const described = player.querySelector('.described');
const SOURCES = { false: 'brew-guide.webm', true: 'brew-guide.ad.webm' };
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);
});
```
字幕と音声解説は、再生や音量と同じく1回の操作で済むようになり、操作バーのCCとADの文字が、それがあることを示します。どちらも、見える文字で始まる名前を持つHTML標準のボタンなので、音声入力の利用者は「CCをクリック」と言え、`aria-pressed` がスクリーンリーダー利用者にオンかどうかを伝えます。音声解説版は、[音声解説がなく、画面の情報が伝わらない動画](/ja/learn/audio-description)と同じく、同じ位置で入れ替わります。1つのファイルの2つの音声トラックを切り替えられるプレーヤーなら、トラックを切り替えてもかまいません。設定メニューは、字幕の言語と字幕の見た目のために残します。
## 実装の判断
どちらのボタンも、どの幅でも操作バーに残します。狭いプレーヤーで場所が足りないときは、字幕と音声解説ではなく、再生速度、画質、ピクチャーインピクチャーをオーバーフローメニューへ移します。スマートフォンの幅と全画面表示で確認してください。全画面表示で操作バーを作り直し、そこでボタンを省くプレーヤーもあります。
動画にあるものだけを出します。字幕はあっても音声解説版がない動画には、字幕ボタンだけを置きます。押しても何も起きない音声解説ボタンは誤解を招きます。字幕の言語が複数あるときは、CCボタンで、利用者が前回選んだ言語か、ページの言語の字幕をオンにし、ほかの言語は設定メニューで選べるようにします。字幕の大きさ、色、背景もそのメニューに置きます。それは[スタイルを変えられない字幕、変換で消える字幕](/ja/learn/caption-quality)で説明しています。
選んだ設定は覚えておきます。字幕をオンにした人は、次の動画でもオンのままを望みます。EN 301 549も、字幕と音声解説を最初からオンにするかを利用者が選べるのがよい方法だと注記しています。設定はブラウザーに保存し、次の動画が、利用者が前の動画を離れたときの状態で始まるようにします。
Cで字幕を切り替えるようなキーボードショートカットは、あればうれしいものですが、ボタンの代わりにはなりません。誰にも見えず、タッチの利用者は押せません。1文字のキーは、利用者がオフにしたり変えたりできない限り、[オフにできない1文字のショートカット](/ja/learn/character-key-shortcuts)の一つになります。
自分で作っていない操作部品も確認します。
- ブラウザー標準の操作部品（`