```
```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);
});
```
Captions and audio description are now one press each, like play and volume, and the letters CC and AD in the bar show they are there. Each is a native button whose name starts with its visible letters, so speech input users can say "click CC", and `aria-pressed` tells screen reader users whether it is on. The described version swaps in at the same place, as in [videos without audio description of what they show](/learn/audio-description); a player that switches between two audio tracks of one file can switch tracks instead. The Settings menu stays for the caption language and the caption style.
## Implementation decisions
Keep both buttons in the bar at every width. When a narrow player runs out of room, move speed, quality and picture-in-picture into the overflow menu, not captions and description. Test at phone width and in full screen: some players rebuild their bar for full screen and leave buttons out there.
Show only what the video has. A video with captions but no described version gets the captions button only; an audio description button that does nothing misleads. With several caption languages, the CC button turns on the viewer's last choice, or the page's language, and the Settings menu offers the others. The same menu is the place for caption size, colours and background, which [captions stuck in one style, or lost when video is converted](/learn/caption-quality) covers.
Remember the choice. A viewer who turned captions on wants them on the next video too, and EN 301 549 notes it is best practice to let people choose whether captions and description start on by default. Keep the setting in the browser, so the next video starts the way the viewer left the last one.
A keyboard shortcut, such as C for captions, is a welcome extra, but not a substitute for the button: nobody sees it, touch users can't press it, and a single letter is one of the [single-key shortcuts that can't be turned off](/learn/character-key-shortcuts) unless people can turn it off or change it.
Where the controls aren't yours, check them anyway:
- The browser's own controls (`