Мультимедиа: субтитры, транскрипты, аудиодескрипция и доступный плеер

В прошлой статье мы разбирали статичный нетекстовый контент: картинку можно описать одной строкой, и она останется на месте. Видео так не умеет. У медиа есть время, и это меняет всё: контент нельзя пробежать глазами, нельзя вернуться на две секунды без специальной кнопки, нельзя прочитать в своём темпе. Плюс медиа одновременно использует два канала восприятия — изображение и звук, — и оба обязаны иметь альтернативу в другом канале.

Здесь же находится единственная область доступности, где стоимость честно ненулевая. Правильный alt — это минута работы редактора. Субтитры к часовому вебинару — это несколько часов работы или строка в бюджете. Именно поэтому медиа-доступность чаще всего откладывается «на потом» и именно поэтому она требует не героизма, а конвейера: встроенная в производство расшифровка стоит в разы дешевле, чем догоняющая через полгода.

И контринтуитивное, с чего полезно начинать разговор с бизнесом: субтитрами пользуются далеко не только глухие люди. Ими пользуются в метро без наушников, в открытом офисе, ночью рядом со спящим ребёнком, при изучении языка, при плохом качестве звука и просто по привычке. Значительная доля просмотров видео в лентах соцсетей идёт без звука вообще — там субтитры давно стали не доступностью, а базовым условием того, что ролик посмотрят.

Три канала и кто что теряет

Последняя строка объясняет, почему транскрипт нельзя считать «запасным вариантом для тех, кому лень смотреть». Для человека, который не видит и не слышит, текст — единственный канал, и никакие субтитры поверх видео его не заменяют.

Карта критериев: что именно требуется

Раздел 1.2 WCAG устроен как матрица «тип медиа × уровень». Его постоянно путают, поэтому проще один раз выписать целиком.

Ключевая пара, на которой спотыкаются все: 1.2.3 (A) и 1.2.5 (AA). На уровне A у вас есть выбор — сделать аудиодескрипцию или выложить подробный текст. На уровне AA выбор исчезает: нужна именно звуковая дорожка с описанием. Поскольку индустриальный ориентир — AA, планировать бюджет надо сразу под неё.

Правая ветка содержит важный практический вывод: дешевле всего снимать видео так, чтобы аудиодескрипция не требовалась. Если ведущий говорит «открываю меню Файл и выбираю Экспорт» вместо «нажимаю сюда, потом сюда», визуальный канал дублируется звуковым бесплатно — и критерий выполняется без отдельной дорожки. Это правило нужно доносить до тех, кто пишет сценарии, а не до тех, кто верстает плеер.

Субтитры: терминология, форматы, качество

Сначала о словах, потому что путаница в них стоит денег. По-английски captions — текст, рассчитанный на человека, который не слышит: помимо речи туда попадают говорящие («— Анна:») и значимые звуки («[звонок в дверь]»). Subtitles — перевод для того, кто слышит, но не понимает языка: одна речь, без звуков. По-русски оба слова — «субтитры», поэтому в требованиях полезно писать явно: «субтитры для глухих и слабослышащих (SDH)» или «полные субтитры со звуками». Заказ «сделайте субтитры» без этого уточнения регулярно приносит перевод, который критерий 1.2.2 не выполняет.

Второе деление — вшитые (open) и отдельной дорожкой (closed). Вшитые запечены в пиксели: их нельзя выключить, увеличить, перекрасить, скопировать и найти поиском; при масштабировании они превращаются в кашу. Отдельная дорожка — текст, который плеер рисует сам, и с ним человек может делать что угодно. Для веба закрытые субтитры — стандарт по умолчанию; вшитые оправданы только там, где платформа не поддерживает дорожки (лента соцсети).

Подключение к видео занимает одну строку, и это, пожалуй, самый выгодный по соотношению «усилие/результат» атрибут во всём треке:

<video controls preload="metadata" poster="/media/onboarding-poster.jpg" width="720">
  <source src="/media/onboarding.mp4" type="video/mp4">
  <source src="/media/onboarding.webm" type="video/webm">
  <!-- kind="captions" — именно субтитры для глухих, а не перевод -->
  <track kind="captions" src="/media/onboarding.ru.vtt" srclang="ru"
         label="Русские субтитры" default>
  <track kind="subtitles" src="/media/onboarding.en.vtt" srclang="en"
         label="English subtitles">
  <track kind="chapters" src="/media/onboarding.chapters.vtt" srclang="ru">
  <p>Ваш браузер не умеет проигрывать видео.
     <a href="/media/onboarding.mp4">Скачайте файл</a> или
     <a href="/media/onboarding-transcript">прочитайте расшифровку</a>.</p>
</video>

Сам файл WebVTT — обычный текст, который можно править руками и хранить в репозитории рядом с видео:

WEBVTT

NOTE Субтитры к вводному ролику. Ширина строки — не больше 42 знаков.

1
00:00:01.400 --> 00:00:04.900
<v Анна>Привет! Разберём, как настроить
проект за пять минут.

2
00:00:05.100 --> 00:00:07.300 line:0 align:center
[щелчок мыши]

3
00:00:07.400 --> 00:00:11.000
Открываю меню «Файл» и выбираю
пункт «Новый проект».

4
00:00:11.200 --> 00:00:13.800
[тревожная музыка нарастает]

Три детали синтаксиса, которые пригодятся сразу. <v Имя> помечает говорящего — плеер может показать его иначе и скринридер прочитает как отдельную реплику. Настройки после тайминга (line:0 align:center) двигают субтитр — это спасает, когда снизу экрана лежит важная надпись. NOTE — комментарий, в файл вывода не попадает.

Качество субтитров формализуется лучше, чем кажется, и опирается на устоявшиеся отраслевые руководства — BBC Subtitle Guidelines и DCMP Captioning Key:

• скорость чтения — ориентир до 160–180 слов в минуту для взрослой аудитории; если речь быстрее, текст сокращают, а не мельчат;
• длина строки — примерно 37–42 знака, максимум две строки одновременно; перенос делают по смысловым границам, а не посреди словосочетания;
• синхронность — субтитр появляется в момент реплики; расхождение больше полусекунды уже мешает;
• говорящие — обозначены, если их несколько и не видно, кто говорит;
• значимые звуки — описаны содержательно: «[тревожная музыка]» полезнее, чем «[музыка]», а «[звонок в дверь]» полезнее, чем «[звук]»;
• дословность — речь передаётся точно, включая оговорки, если они значимы; редактирование допустимо ради скорости чтения.

Отдельно — про автоматические субтитры. Современный ASR (тот же Whisper) на чистой записи даёт очень приличный результат, но три вещи он делает стабильно плохо: имена собственные и термины, пунктуацию (а от неё зависит смысл), и разделение говорящих. Плюс он не расставляет пометки звуков вообще. Поэтому позиция сообщества однозначная: автосубтитры без вычитки не выполняют 1.2.2. За ними закрепилось презрительное «craptions» — субтитры, которые формально есть, а пользоваться ими нельзя. Рабочая схема: ASR даёт черновик и тайминги, человек за 15–25 минут вычитывает десятиминутный ролик. Это в разы дешевле расшифровки с нуля и полностью снимает вопрос качества.

Транскрипт: почему он не заменяет субтитры и наоборот

Субтитры и транскрипт решают разные задачи, и наличие одного не отменяет другого.

Расширенный (описательный) транскрипт — это текст, содержащий и речь, и описание того, что происходит на экране. Именно он засчитывается как «media alternative» по 1.2.3 и остаётся единственным доступом к содержанию для слепоглухих пользователей. Хороший транскрипт — не сплошная простыня, а структурированный документ: заголовки по разделам ролика, метки говорящих, тайм-коды через разумные интервалы, описания визуального в квадратных скобках.

<h2>Расшифровка ролика «Настройка проекта»</h2>
<p><a href="/media/onboarding-transcript.txt">Скачать текстовую версию</a></p>

<h3>00:00 Вступление</h3>
<p><b>Анна:</b> Привет! Разберём, как настроить проект за пять минут.</p>
<p>[На экране — пустое окно приложения с меню «Файл» в левом верхнем углу.]</p>

<h3>00:07 Создание проекта</h3>
<p><b>Анна:</b> Открываю меню «Файл» и выбираю пункт «Новый проект».</p>
<p>[Появляется диалог с полями «Название» и «Папка» и кнопкой «Создать».]</p>

Практические правила размещения: транскрипт живёт на той же странице (в потоке или в <details>), а не в PDF-файле по ссылке; ссылка на него видна всем, а не только скринридеру; заголовки в нём настоящие, а не жирный текст, — иначе по нему нельзя навигировать так, как описано в статье про скринридеры.

Аудиодескрипция

Аудиодескрипция — закадровый голос, который в паузах между репликами описывает то, что видно, но не слышно: действия, смену сцены, надписи на экране, выражения лиц, если они несут смысл.

Когда она нужна, определяется одним вопросом: закройте экран и послушайте. Всё понятно? Если ведущий говорит «нажмите вот эту кнопку», понятно не будет — нужна дескрипция. Если он говорит «нажимаю кнопку „Сохранить“ в правом нижнем углу» — визуальный канал уже продублирован, и дескрипция не требуется. Именно поэтому обучающие ролики выгодно писать по сценарию с самоописанием: это бесплатно закрывает 1.2.5.

Два вида. Обычная укладывается в естественные паузы речи — дёшево и незаметно. Расширенная (1.2.7, AAA) применяется, когда пауз не хватает: плеер останавливает видео, звучит описание, воспроизведение продолжается. Технически это сложнее, поэтому на практике чаще перемонтируют исходник, оставляя воздух под описание.

Способы доставки, честно про поддержку:

Как пишут дескрипцию: коротко (в паузу помещается 3–7 слов), в настоящем времени, нейтрально — описываем «мужчина хмурится», а не «мужчина недоволен»; читаем вслух текст на экране, если его не произносят; не пересказываем то, что уже слышно.

Доступный плеер

Нативный <video controls> даёт бесплатно очень многое: клавиатурную доступность, меню субтитров, полноэкранный режим, регулировку скорости и громкости, картинку в картинке, локализованные имена кнопок. Причина, по которой команды всё равно пишут свои плееры, обычно одна — дизайн; и вместе с дизайном они выкидывают всё перечисленное.

Если свой плеер всё-таки нужен, вот его обязательный контракт.

Шесть требований, каждое из которых регулярно нарушают:

1. Каждый контрол — настоящая кнопка с текстовым именем. Иконка внутри — aria-hidden="true", как разбиралось в прошлой статье.
2. Состояние передаётся сменой имени, а не только иконкой. Одна кнопка «Воспроизвести» ⇄ «Пауза» понятнее, чем aria-pressed на кнопке «Play»: человек слышит действие, которое произойдёт.
3. Полоса прогресса — слайдер, а не div с обработчиком клика: <input type="range"> либо role="slider" с aria-valuemin, aria-valuemax, aria-valuenow и обязательным aria-valuetext в человеческом формате («1 минута 20 секунд из 4 минут»), иначе прозвучит «73».
4. Клавиатурные соглашения — те, к которым люди привыкли на больших видеоплатформах: Space и K — пуск и пауза, ←/→ — 5 секунд, J/L — 10 секунд, M — звук, F — полный экран, C — субтитры. Обработчик вешают на контейнер плеера, а не на документ: глобальный перехват Space ломает прокрутку страницы и ввод в поля.
5. Фокус не теряется при переходе в полноэкранный режим и обратно, а сама панель контролов не исчезает по таймеру, пока в ней есть фокус, — иначе кнопка пропадает прямо из-под пальцев.
6. Время не спамит в живую область. Секундомер в aria-live превращает прослушивание в пытку: текущее время объявляют по запросу (фокус на слайдере, нажатие клавиши), а не каждую секунду.

// Минимальный контракт доступного плеера: имя кнопки = следующее действие,
// слайдер с человекочитаемым значением, клавиши только внутри контейнера.
const player = document.querySelector('.player');
const video = player.querySelector('video');
const toggle = player.querySelector('.player__toggle');
const seek = player.querySelector('.player__seek');   // <input type="range">

const format = (sec) => {
  const m = Math.floor(sec / 60), s = Math.round(sec % 60);
  return `${m} мин ${s} с`;                            // «1 мин 20 с», а не «80»
};

const syncToggle = () => {
  // Имя кнопки описывает ДЕЙСТВИЕ, а не текущее состояние
  toggle.setAttribute('aria-label', video.paused ? 'Воспроизвести' : 'Пауза');
};

toggle.addEventListener('click', () => (video.paused ? video.play() : video.pause()));
video.addEventListener('play', syncToggle);
video.addEventListener('pause', syncToggle);

video.addEventListener('loadedmetadata', () => {
  seek.max = String(Math.floor(video.duration));
  seek.setAttribute('aria-valuetext', `0 с из ${format(video.duration)}`);
});

video.addEventListener('timeupdate', () => {
  if (document.activeElement === seek) return;         // не перебиваем ручную перемотку
  seek.value = String(Math.floor(video.currentTime));
  // Обновляем текст значения, но НЕ кладём его в aria-live: иначе секундомер вслух
  seek.setAttribute('aria-valuetext',
    `${format(video.currentTime)} из ${format(video.duration)}`);
});

seek.addEventListener('input', () => { video.currentTime = Number(seek.value); });

// Клавиши слушает контейнер плеера, а не document: страница остаётся управляемой
player.addEventListener('keydown', (e) => {
  if (e.target.matches('input, select, textarea')) return;
  const step = { ArrowLeft: -5, ArrowRight: 5, KeyJ: -10, KeyL: 10 }[e.code];
  if (step !== undefined) { video.currentTime += step; e.preventDefault(); }
  if (e.code === 'KeyM') video.muted = !video.muted;
  if (e.code === 'KeyK') video.paused ? video.play() : video.pause();
});

Если писать плеер с нуля не хочется — и не надо. Able Player спроектирован вокруг доступности и умеет аудиодескрипцию, транскрипт с синхронной подсветкой и жестовый язык; Vidstack, Plyr и Video.js закрывают доступность в разной степени и требуют проверки на конкретной версии. Как выбирать между «взять» и «писать», разобрано в статье про компоненты — правило то же самое.

И про оформление субтитров: не рисуйте их поверх видео самостоятельно. Нативный <track> отдаёт текст браузеру, а пользователь может настроить размер и цвет субтитров в системе — в macOS и iOS, в Windows, в Android. Ваша самописная плашка эти настройки проигнорирует. Если стилизовать всё же нужно, для этого есть псевдоэлемент ::cue.

Автозапуск, фоновое видео и мигание

Критерий 1.4.2 Audio Control (A) прямолинеен: если звук стартует автоматически и длится дольше трёх секунд, должен быть способ его остановить или сделать тише независимо от системной громкости, причём этот способ обязан находиться в начале страницы. Практика проще требования: автозапуск со звуком не делают вообще. Браузеры и сами его блокируют, а человек, слушающий страницу скринридером, при внезапной музыке просто теряет речь синтезатора — она перестаёт быть слышна.

Фоновое видео в шапке — почти всегда декорация. Значит: без звука, с кнопкой паузы (критерий 2.2.2), с уважением к prefers-reduced-motion и с постером-заглушкой, если движение отключено. Подробный разбор движения и вестибулярных реакций — в статье про визуальную доступность.

Мигание — единственное требование доступности, нарушение которого способно навредить здоровью. Критерий 2.3.1 Three Flashes or Below Threshold (A) запрещает содержимое, мигающее чаще трёх раз в секунду, если вспышки достаточно велики и ярки; отдельно опасны насыщенно-красные вспышки. Проверяют это не на глаз, а инструментом — PEAT (Photosensitive Epilepsy Analysis Tool). Под требование попадают не только видео, но и анимированные GIF, эффекты в играх, стробоскопы в промо-роликах. Кстати, о GIF: у него нет ни кнопки паузы, ни контролов, ни звука — почти всегда правильнее отдать <video autoplay muted loop playsinline controls> или дать статичную картинку с кнопкой «Воспроизвести».

Живые трансляции

Критерий 1.2.4 (AA) требует субтитров в реальном времени, и это самая дорогая строчка во всём разделе. Варианты по убыванию качества:

• CART-стенографист — человек, набирающий речь в реальном времени со скоростью до 250 слов в минуту и точностью выше 95%. Дорого, заказывается заранее, качество эталонное.
• Автоматические live-субтитры платформ (Zoom, Teams, Meet, YouTube). Бесплатно, доступно мгновенно, качество падает на терминах, именах, акцентах и при наложении речи. Формально критерий закрывают спорно, практически — лучше, чем ничего.
• Гибрид: ASR плюс редактор, правящий поток на лету. Компромисс по цене и качеству.

Организационная часть важнее технической. Заранее отправьте стенографисту или переводчику словарь терминов, имена спикеров и слайды — точность вырастает заметно. Заложите задержку потока в несколько секунд, чтобы субтитры успевали. Если приглашён переводчик жестового языка, ему нужно постоянное окно в раскладке, а не «уголок, когда вспомним». И главное: после трансляции запись превращается в записанное видео, а значит на неё начинают действовать 1.2.2 и 1.2.5 — распространённая практика зрелых команд — выложить вычитанные субтитры в течение суток-двух.

Медиа как конвейер, а не как подвиг

Ретрофит субтитров к архиву из трёхсот роликов — проект на квартал. Встроенный в производство шаг расшифровки — пятнадцать минут на ролик. Разница в стоимости на порядок, поэтому доступность медиа — вопрос устройства конвейера.

Второй элемент конвейера — модель данных. Медиа-актив перестаёт быть «файлом в папке» и становится сущностью со связанными дорожками, у каждой из которых есть язык и статус вычитки. Без этого невозможно ответить на вопрос «сколько наших роликов реально доступно».

Поле human_reviewed — не бюрократия. Именно оно превращает бессмысленную метрику «доля роликов с субтитрами» (её накручивает одна кнопка автогенерации) в честную «доля роликов с вычитанными субтитрами». Ровно так же, как в прошлой статье мы считали не картинки с alt, а картинки с подтверждённым alt.

Definition of Done для медиа, который стоит вписать в командные правила: у ролика есть вычитанные субтитры на языке оригинала; на странице есть транскрипт, доступный ссылкой; проверено, понятен ли ролик без экрана, и при необходимости есть аудиодескрипция или самоописывающий сценарий; плеер проходится с клавиатуры; автозапуск со звуком отсутствует; анимация проверена на вспышки.

Инструменты, которые закрывают конвейер: Whisper или облачный ASR для черновика; Subtitle Edit и Aegisub для правки таймингов; Amara для совместной работы над переводами; редактор субтитров в YouTube Studio для роликов, живущих там; PEAT для проверки на вспышки.

Проверка за пять минут

1. Выключите звук и посмотрите первую минуту. Всё понятно? Субтитры успевают читаться, не наезжают на важное, помечают говорящих?
2. Отвернитесь от экрана и послушайте ту же минуту. Понятно, что происходит? Если нет — нужна аудиодескрипция или переписанный сценарий.
3. Tab по плееру. Все кнопки достижимы, фокус видно, имена осмысленные, Space не прокручивает страницу?
4. Найдите транскрипт за десять секунд, не зная страницы. Не нашли — его нет.
5. Откройте страницу с включёнными колонками. Ничего не заговорило само? Если заговорило — 1.4.2.
6. Проверьте меню субтитров: есть ли выбор языка, включаются ли они, и правда ли это captions, а не только перевод.

Типичные ошибки — сводка

Мини-итог

• Медиа отличается от статики наличием времени: контент нельзя прочитать в своём темпе, поэтому альтернатива должна быть и синхронной (субтитры), и асинхронной (транскрипт). Одно другое не заменяет.
• Матрица 1.2 читается по типу медиа. Практический минимум для AA: субтитры (1.2.2) и аудиодескрипция (1.2.5) для записанного видео со звуком, транскрипт для аудио (1.2.1), живые субтитры для трансляций (1.2.4).
• Captions ≠ subtitles: первые включают звуки и говорящих и рассчитаны на тех, кто не слышит. Формулируйте требование явно, иначе получите перевод.
• Автосубтитры без вычитки критерий не выполняют. Схема «ASR даёт черновик — человек вычитывает» дешевле расшифровки с нуля и снимает вопрос качества.
• Аудиодескрипции можно избежать бесплатно: сценарий, в котором ведущий проговаривает свои действия, дублирует визуальный канал звуковым.
• Нативный <video controls> бесплатно даёт клавиатуру, меню субтитров и системные настройки оформления. Свой плеер обязан воспроизвести весь этот контракт: кнопки с именами, слайдер с aria-valuetext, привычные клавиши внутри контейнера, никакого секундомера в живой области.
• Автозапуск со звуком дольше трёх секунд — нарушение 1.4.2 и катастрофа для скринридера. Мигание чаще трёх раз в секунду — единственное требование, нарушение которого опасно для здоровья; проверяется PEAT.
• Доступность медиа — конвейер, а не подвиг: шаг расшифровки в производстве стоит минуты, ретрофит архива стоит кварталов. Метрика — доля роликов с вычитанными субтитрами.

Источники

• WCAG 2.2: Guideline 1.2 Time-based Media — все критерии 1.2.1–1.2.9 с разбором; 1.4.2 Audio Control, 2.3.1 Three Flashes.
• W3C WAI: Making Audio and Video Media Accessible — пошаговое руководство по планированию, субтитрам, описаниям и плееру.
• WebVTT: The Web Video Text Tracks Format и MDN: WebVTT API; MDN: track.
• BBC Subtitle Guidelines и DCMP Captioning Key — отраслевые нормы качества; Described and Captioned Media Program — примеры аудиодескрипции.
• Able Player, PEAT, Whisper, Subtitle Edit.
• Смежное на портале: доступные компоненты, визуальная доступность, тестирование и процесс, веб-производительность — доставка медиа сильно влияет на то, досмотрят ли ролик вообще.

Что дальше

Мы закрыли восприятие: структуру, визуальный канал, текстовые альтернативы и медиа. Остался последний принцип POUR, до которого доходят реже всего, — понятность. Дальше: когнитивная доступность: понятный язык, память, время и вход в систему.