WCAG 2.2 и аудио на WordPress: руководство 2026 года

Аудио на WordPress должно соответствовать как минимум четырём критериям WCAG 2.2: 1.4.2 «Управление звуком», 2.1.1 «Клавиатура», 2.5.8 «Размер цели» (новый в версии 2.2) и 4.1.2 «Имя, роль, значение». Европейский акт о доступности, вступивший в силу 28 июня 2025 года, делает это юридически обязательным для любого сайта, обслуживающего клиентов из ЕС. Стандартный аудиоплеер WordPress и большинство сторонних плагинов не соответствуют нескольким из этих требований без дополнительной настройки.

Это практический чеклист, которым мы пользуемся в Mementor при аудите WordPress-сайтов на соответствие WCAG 2.2. Мы рассматриваем оба аспекта: аудио как контент с собственными требованиями доступности и аудио как инструмент доступности для текстового контента.

Почему соответствие аудиотребованиям важно в 2026 году

В 2025 году совпали три фактора, сделавших эту тему срочной. Европейский акт о доступности вступил в силу 28 июня 2025 года. Отчёт WebAIM Million 2025 зафиксировал нарушения WCAG на 96,3% домашних страниц. Количество судебных исков по ADA в США продолжило расти: WordPress-сайты фигурировали в более чем 4000 дел о веб-доступности за год.

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

Полный чеклист WCAG 2.2 для аудио

Восемь критериев WCAG напрямую касаются аудио на WordPress-сайте. Таблица ниже показывает, что каждый из них означает на практике, что стандартный аудиоплеер WordPress делает правильно или неправильно, и как с этим справляется плеер TTSWP. Критерии с пометкой НОВЫЙ появились в WCAG 2.2 в октябре 2023 года.

Страница W3C Media Accessibility User Requirements является каноническим источником этих критериев. Мы сосредоточились на восьми указанных, поскольку они применимы непосредственно к аудиоплеерам. Субтитры (1.2.2) и аудиодескрипция (1.2.3) тоже актуальны, но относятся к видео, а не к чистому аудионарративу.

Исключение для медиаальтернативы текста

Вот правило, которое упускают 95% материалов о соответствии требованиям. WCAG определяет медиаальтернативу для текста как медиаконтент, который не содержит больше информации, чем уже представлено в тексте. Когда синтез речи озвучивает существующую статью, аудио является медиаальтернативой текста страницы. Сам текст страницы и есть расшифровка.

Это означает, что аудиоверсия статьи, созданная с помощью синтеза речи, не нуждается в отдельном файле расшифровки. WebAIM разъясняет это чётко. Важное условие: аудио должно быть чётко обозначено как медиаальтернатива, чтобы пользователи понимали, что пропуская его, они не теряют информацию. Заголовок «Прослушать эту статью» или подпись к плееру «Аудиоверсия публикации» удовлетворяют этому условию.

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

Что нового в WCAG 2.2 для аудио

Три новых критерия уровня AA непосредственно затрагивают аудиоплееры.

2.5.8 Минимальный размер цели

Каждый интерактивный элемент управления должен иметь область касания не менее 24 на 24 CSS-пикселей. Именно этот критерий нарушает большинство аудиоплагинов для WordPress. В нашей практике аудита кнопки «перемотать назад» и «перемотать вперёд» неизменно оказываются меньше порогового значения. Дизайнеры ориентировались на компактность до того, как WCAG 2.2 ввёл правило 24 пикселей, и немногие разработчики плагинов успели исправить ситуацию. Стандартные стили темы иногда дополнительно уменьшают размеры кнопок.

Решение обычно состоит в увеличении отступов, а не размера иконки. SVG-иконка 16 пикселей внутри кнопки с отступом 4 пикселя с каждой стороны достигает порогового значения в 24 пикселя без изменения внешнего вида.

2.4.11 Фокус не перекрыт

Фиксированные аудиопанели в нижней части страницы перекрывают элемент, на котором сосредоточен клавиатурный пользователь. Если сфокусированная ссылка оказывается под панелью, критерий нарушается. Решение: сделать панель скрываемой, оставить свободное пространство выше сфокусированного элемента или использовать scroll-padding-bottom на документе, чтобы сфокусированные элементы оставались в поле зрения.

2.5.7 Перетаскивание

Пользовательские полосы прокрутки и слайдеры громкости, работающие только перетаскиванием, нарушают этот критерий. Каждое взаимодействие с перетаскиванием должно иметь однопоинтерную альтернативу. Клик для позиционирования на полосе прогресса удовлетворяет требованию. Так же работает управление стрелками клавиатуры на правильно построенном role="slider".

Типичные нарушения аудио на WordPress из реальных аудитов

Одни и те же проблемы повторяются на разных сайтах. Мы чаще всего видим четыре типа нарушений.

Стандартный блок <audio> в ядре WordPress отображает нативный браузерный плеер. У нативных браузерных элементов управления долгая история непоследовательного поведения со скринридерами, а управление позицией воспроизведения стрелками клавиатуры различается в Chrome, Firefox и Safari. Пользователи NVDA или JAWS часто слышат временные метки, но не могут надёжно менять позицию с клавиатуры. Решение: обернуть аудио в кастомный плеер, который передаёт role="slider" с корректными атрибутами ARIA-значений.

Плагинные плееры поставляют кнопки меньше порога в 24 пикселя. Дизайнер ставил компактность в приоритет до того, как WCAG 2.2 ввёл это правило. Темы затем переопределяют стили плагина — иногда ухудшая ситуацию, иногда улучшая.

Фиксированные аудиопанели скрывают сфокусированный контент. Мы видели это нарушение на каждом сайте, использующем фиксированный нижний плеер без тестирования клавиатурной навигации.

Контрастность на формах волн стабильно ниже 4,5:1. Дизайнеры любят мягко-серую волну на белом фоне. Скринридеры к этому равнодушны, а пользователи со слабым зрением — нет. Критерий 1.4.3 нарушается.

Технический чеклист для создания доступного аудиоплеера

1. Оберните плеер в role="region" с атрибутом aria-label, описывающим его.
2. Используйте настоящий элемент <button> для воспроизведения, паузы, перемотки и отключения звука. Никогда не используйте <div> с обработчиком клика.
3. Установите aria-pressed на кнопку воспроизведения для передачи состояния переключателя.
4. Задайте каждому элементу управления минимальную область касания 24 на 24 CSS-пикселя с помощью отступов.
5. Задайте слайдеру прокрутки и слайдеру громкости role="slider" с атрибутами aria-valuemin, aria-valuemax и aria-valuenow, и добавьте реакцию на стрелки клавиатуры.
6. Обеспечьте позиционирование по клику на полосе прокрутки как альтернативу перетаскиванию.
7. Проверьте контрастность каждого текстового элемента и значимой иконки: минимум 4,5:1.
8. Убедитесь, что рамки фокуса видны и не обрезаются правилами overflow.
9. Если плеер фиксированный, оставьте свободное место выше него или сделайте его скрываемым.
10. Обозначьте плееры с синтезом речи как «Аудиоверсия этой статьи», чтобы исключение для медиаальтернативы применялось корректно.

Минимальная доступная кнопка воспроизведения выглядит так.

<div role="region" aria-label="Article audio player">
  <button type="button"
          aria-pressed="false"
          aria-label="Play article narration"
          style="min-width:24px;min-height:24px;padding:8px">
    <svg aria-hidden="true" width="16" height="16">...</svg>
  </button>
  <input type="range"
         aria-label="Playback position"
         min="0" max="100" value="0">
</div>

Это основа. Стилизуйте кнопку, скройте нативные визуальные элементы range, если хотите кастомный трек, но сохраните базовую семантику.

Как синтез речи улучшает общее соответствие WCAG

Аудио — это не только контент, который нужно делать доступным. Оно само является инструментом доступности. По оценке Всемирной организации здравоохранения, 1,3 миллиарда человек — около 16% населения планеты — живут со значительными ограничениями здоровья. Многие из них получают пользу от мультимодального доступа к текстовому контенту: люди с дислексией, СДВГ, слабым зрением и различными когнитивными нарушениями читают комфортнее, когда аудио сопровождает текст.

Добавление синтеза речи — одна из немногих инвестиций в доступность, которая помогает пользователям до того, как пройдёт аудит. Подключить синтез речи к WordPress можно менее чем за 15 минут с помощью плагина Текст в речь — TTSWP. Плеер поставляется со стандартными настройками, соответствующими WCAG 2.1 AA: кнопки от 24 пикселей, поддержка клавиатуры и корректные ARIA-роли.

Минимальная нагрузка в runtime составляет около 35–40 КБ в сжатом виде (151 КБ без минификации) и включает JavaScript-логику плеера и общие стили CSS. Мы запустили GTmetrix на опубликованной статье с активным плеером и получили оценку A: 93% по производительности, 99% по структуре, Largest Contentful Paint — 1,3 секунды, Total Blocking Time — 46 миллисекунд, Cumulative Layout Shift — ноль. Бандл загружается отложенно только на страницах, содержащих плеер, поэтому статические страницы без аудио не несут никакой нагрузки.

Документация по доступности размещена на нашей странице о доступности. Для озвучивания используется генеративный движок ElevenLabs, который обеспечивает достаточно качественную интонацию, чтобы слушатели действительно дочитывали статьи, а не бросали монотонное чтение.

Европейский акт о доступности на практике

Европейский акт о доступности вступил в силу 28 июня 2025 года. Новые цифровые сервисы, выведенные на рынок ЕС после этой даты, обязаны соответствовать требованиям уже сейчас. Действующие сервисы имеют время до 28 июня 2030 года для приведения всего в соответствие. Директива распространяется на любой бизнес, работающий с клиентами из ЕС, независимо от места его регистрации.

Технический стандарт, на который ссылается ЕАА, — это EN 301 549. Текущая гармонизированная версия (V3.2.1, август 2021 года) основана на WCAG 2.1 уровня AA. Проект V4.1.0, опубликованный в ноябре 2025 года, обновляет разделы 9, 10 и 11 для соответствия WCAG 2.2, а окончательная гармонизация ожидается в 2026 году. До тех пор, пока это обновление не будет опубликовано в Официальном журнале ЕС, юридически обязательным минимумом остаётся WCAG 2.1 AA, однако мы рекомендуем ориентироваться на 2.2 уже сейчас: переход занимает месяцы, а не годы.

Штрафные санкции различаются в зависимости от страны-члена ЕС. Германия и Франция располагают наиболее активной инфраструктурой правоприменения: национальные органы по вопросам доступности уполномочены расследовать жалобы и выносить предписания. Мы видели, как норвежские и немецкие клиенты получали официальные жалобы от конечных пользователей в течение нескольких месяцев после даты вступления требований в силу — как правило, по поводу аудио- и форм-компонентов. Жалобы поступают раньше штрафов, поэтому окно в тридцать дней на исправление, как правило, вполне реально, если команда к этому готова.

Как проверить соответствие

Автоматизированные инструменты выявляют около 30–40% проблем. Для остального необходимо ручное тестирование, особенно для проверки клавиатурного взаимодействия и контрастности в динамических состояниях.

• NVDA на Windows с Chrome и Firefox. Бесплатно.
• JAWS на Windows для корпоративных клиентов.
• VoiceOver на macOS и iOS. Встроен.
• TalkBack на Android. Встроен.
• axe DevTools — браузерное расширение для автоматических сканирований.
• Lighthouse в Chrome DevTools для быстрой проверки.
• Тест только с клавиатурой. Отключите мышь и проверьте каждый элемент управления плеером.

Тест только с клавиатурой — это наиболее результативная проверка. Если плеер работает без мыши, большинство требований WCAG 2.2 уже выполнены.

Часто задаваемые вопросы

Требует ли WCAG 2.2 субтитры для аудиоподкастов?

Нет. Субтитры (1.2.2) относятся к предварительно записанному видео с синхронизированным звуком. Для контента только в аудиоформате, например подкастов, применяется критерий 1.2.1, который требует текстовой альтернативы — расшифровки или подробного резюме. Субтитры и расшифровки решают разные задачи. Подкасту нужна расшифровка. Видеоурок требует и субтитры, и аудиодескрипцию для информации, передаваемой только визуально.

Является ли автовоспроизведение звука нарушением требований ЕАА?

Не запрещено, но ограничено. Критерий WCAG 1.4.2 «Управление звуком», на который ЕАА ссылается через EN 301 549, требует, чтобы любой звук, воспроизводящийся автоматически более трёх секунд, имел элемент паузы, остановки или независимого регулятора громкости. Автовоспроизведение без такого элемента нарушает уровень A и фиксируется как несоответствие. Большинство контролирующих органов расценивают это как очевидное нарушение, а не пограничный случай.

Нужна ли расшифровка, если у меня есть аудиоверсия статьи?

Как правило, нет. Когда аудио представляет собой прямое озвучивание текста статьи и не добавляет новой информации, сам текст статьи является расшифровкой по определению WCAG «медиаальтернатива для текста». Обозначьте плеер как аудиоверсию статьи — и исключение применяется. Если аудио включает комментарии, смысловую музыку или разделы, отсутствующие в тексте, отдельная расшифровка необходима.

Каков минимальный размер кнопок для аудиоплееров в WCAG 2.2?

Интерактивные элементы должны иметь размер не менее 24 на 24 CSS-пикселей согласно критерию 2.5.8 «Размер цели (минимум)» уровня AA. Размер включает отступы, поэтому иконка 16 пикселей с отступом 4 пикселя с каждой стороны соответствует требованию. Для встроенных ссылок в тексте и элементов, определяемых браузером, существуют исключения, но на самостоятельные кнопки плеера они не распространяются.

Распространяется ли WCAG 2.2 на сайты, размещённые на WordPress.com?

Да. WCAG применяется к любому веб-контенту независимо от платформы хостинга. Сайты на WordPress.com несут те же правовые риски по ЕАА, ADA и аналогичным национальным законам, что и самостоятельно размещённые WordPress-сайты. Модель хостинга не меняет обязательств. Меняется лишь степень контроля владельца сайта над разметкой плеера. Планы Business и Commerce на WordPress.com позволяют устанавливать пользовательские плагины, более дешёвые тарифы — нет.

С чего начать

Выберите одну публикацию на своём сайте, проведите клавиатурный тест аудиоплеера и проверьте каждую кнопку на соответствие правилу 24 пикселей. Этот единственный аудит покажет, насколько ваша текущая конфигурация близка или далека от соответствия WCAG 2.2. Дальше — либо исправить существующий плеер, либо заменить его на тот, который поставляется с соответствующими настройками по умолчанию. Наша документация по доступности описывает конфигурацию, которую мы рекомендуем для сайтов под давлением ЕАА.