March 21, 2020

КАК СДЕЛАТЬ ВИДЕО НА ВЕБ-САЙТЕ ДОСТУПНЫМ?

Видео по своей сути не очень доступны. Даже если контент поступает из внешнего источника — например от видеографа или канала на YouTube - у вас остается ответственность за возможность каждого посетителя вашего сайта получить доступ к этому видео в полной мере.

Видео на веб-сайте может служить разным целям :

• Видеоролики на главной странице с изображением основателей компании или иллюстрированные пошаговые инструкции решения могут служить уникальным приветствием на сайте;
• Видео продукта дают клиентам лучший взгляд на ваш инструментарий, и это помогает в процессе принятия решений;
• Фоновое видео может добавить динамики среди остального статического контента;
• Видео в блоге может предоставить читателям альтернативный подход к потреблению контента;
• Видеоконтент дает веб-сайтам лучшие возможности для ранжирования в поиске (например, показ в Google Videos или сделать его первым в поисковом запросе начинающемся с “как…”).

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

Ниже мы рассмотрим, что возможно сделать, чтобы видео было доступным на вашем веб-сайте.

1. Следуйте Практическим Рекомендациям По Доступности Видео Контента

Когда мы говорим о том, как сделать видео доступным для пользователей, то в конечном итоге мы пытаемся решить две большие проблемы:

• Позволить каждому потреблять контент в полном объеме;
• Сделать это так, чтобы каждый мог контролировать воспроизведение контента.

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

Вот что вы можете сделать, чтобы помочь всем вашим посетителям использовать ваш видеоконтент в полном объеме:

ОТКЛЮЧИТЬ АВТОМАТИЧЕСКОЕ ВОСПРОИЗВЕДЕНИЕ И ЦИКЛ

Никто не хочет заходить на сайт или новую веб-страницу, только для того, чтобы видео на нем начало воспроизводиться. Это особенно важно для тех, кто страдает нарушениями зрения и должен полагаться на программы чтения с экрана, чтобы перейти к элементам управления, которые отключают автоматическое воспроизведение видео.

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

ВКЛЮЧИТЬ ТЕКСТ ТИТРОВ И ЗАГОЛОВКОВ

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

В дополнение к самой речи, титры могут включать такие вещи, как:

• Отображение названий и заголовков, которые не произносятся вслух;
• Названия или тексты песен, играющих в фоновом режиме;
• Примечания об окружающих шумах.

Есть два вида титров и заголовков, которые вы можете использовать. Открытые титры автоматически отображаются, когда кто-либо воспроизводит ваше видео. Закрытые должны быть включены человеком, который смотрит видео.

Хотя некоторые программы для видеоплееров могут предложить вам автоматическую генерацию титров, лучше всего сделать это самостоятельно. (Позже вы поймете почему.)

ВКЛЮЧИТЬ СУБТИТРЫ

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

ПРИ НЕОБХОДИМОСТИ ДОБАВЬТЕ АУДИО ОПИСАНИЯ

В то время как титры и субтитры фиксируют аудио из видео, они обычно не описывают то, что находится на экране. Это может поставить под угрозу способность слабовидящих пользователей понимать, что происходит, если есть что-то существенное в визуальных элементах (например, текст на экране или какое-то действие, которое не описано вслух).

Таким образом, в дополнение к титрам и субтитрам вам могут понадобиться дополнительные звуковые описания или отдельная звуковая дорожка, полностью дополняющая видео.

ПРЕДОСТАВЬТЕ РАСШИФРОВКУ

Стенограммы представляют собой нечто среднее между тирами и звуковыми описаниями. По сути, стенограмма должна захватывать всё из видео:

• Речь;
• Названия, субтитры и другой экранный текст;
• Описание экранной активности;
• Ссылки, на которые ссылаются или совместно используются на экране.

В отличие от титров, транскрипты обычно живут за пределами видеоплеера — либо написанные на странице в HTML, либо предоставленные по ссылке или возможность их скачать. Интерактивные стенограммы немного отличаются, поскольку они прикрепляются непосредственно к видеоплеерам (я покажу вам пример ниже).

ПРАВИЛЬНО ФОРМАТИРОВАТЬ ЭКРАННЫЙ ТЕКСТ

Даже если у вас не получается или вы не можете дать своим посетителям выбор использовать стили текста на экране, важно тщательно рассмотреть, как формат текста может повлиять на читабельность, в том числе:

• Цвет текста;
• Цвет фона;
• Цвет видео;
• Соотношение цветового контраста текста и фона;
• Соотношение цветового контраста текста и видео;
• Размер текста;
• Размещение текста на экране;
• Синхронизация текста с речью;
• Длительность отображения каждой строки текста.

ИЗБЕГАЙТЕ МЕРЦАНИЯ СОДЕРЖИМОГО

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

ЯСНО ОБОЗНАЧЬТЕ ВЗАИМОДЕЙСТВУЮЩИЕ ЭЛЕМЕНТЫ

Если у вас есть какой-либо контроль то, как все выглядит в видеоплеере или возможность пометить интерактивные элементы в нем, убедитесь, что каждый сантиметр четко обозначен. Кнопки без ярлыков или со странными названиями могут сбить с толку ваших посетителей, поэтому придерживайтесь проверенных ярлыков, которые все используют.

ВКЛЮЧИТЬ ПОДДЕРЖКУ КЛАВИАТУРЫ

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

2. Используйте доступный Видеоплеер

Существует ряд видеоплееров, которые оснащены встроенными функциями специальных возможностей. Вот некоторые из наиболее популярных и не зависящих от операционной системы примеров:

YOUTUBE

YouTube - это популярное решение для обмена видео, поэтому у вас может возникнуть соблазн использовать этот видеоплеер. Однако, единственные видео-характеристики которые доступны в нем это:

• Субтитры;
• Закрытые подписи.

Хотя даже этого достаточно, чтобы создать и редактировать тексты для ваших слабослышащих посетителей. Когда вы загружаете новое видео (или редактируете существующее), вам предоставляется возможность загружать субтитры или подписи:

Ваш .srt файл может быть подготовлен с или без синхронизации (хотя синхронизация это отлично).
Если у вас нет готовых субтитров, вы всегда можете положиться на систему автоматического субтитрирования YouTube. Они не будут красивыми, поэтому вам все равно нужно будет использовать YouTube Studio, чтобы войти и отредактировать стенограмму, чтобы всё соответствовало тому, что реально говорится:

Все это, по крайней мере, сэкономит вам время, чтобы не писать их все с нуля.
В конце концов, посетители вашего сайта смогут включить закрытые титры через небольшой значок "CC" в правом нижнем углу видеоплеера YouTube. Именно так они будут выглядеть, когда будут воспроизводиться в вашем видео:

Пользователи практически не имеют никакого контроля над тем, как эти подписи отображаются, кроме того, что YouTube переводит их на другой язык по выбору.
Я бы сказала, что этот вариант можно использовать, если у вас уже есть контент YouTube на вашем сайте, и вы хотите быстро исправить некоторые проблемы недоступности. Но имейте в виду, что вам нужно сделать гораздо больше, чтобы на 100% сделать видео доступным.

JW-ПЛЕЕР

JW Player - не бесплатный и возможно не настолько хорошо известный, как YouTube, но этот видеоплеер HTML5 имеет гораздо больше возможностей в плане доступности.
Например, вы можете использовать его для включения субтитров закрытого типа:

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

JW Player также позволяет зрителям изменять текстовые надписи, в соответствии со своими предпочтениями:

Они могут изменить следующие настройки все из настроек в видеоплеере:

• Цвет шрифта;
• Непрозрачность шрифта;
• Размер шрифта;
• Семейство шрифтов;
• Стиль края персонажа;
• Цвет фона;
• Непрозрачность фона;
• Цвет окна;
• Непрозрачность окна.

Еще одной функцией из специальных возможностей является звуковая дорожка HLSV4:

Хотя JW Player рекомендует использовать звуковую дорожку для чего то вроде закладки под комментарии режиссера в фильме, вы можете использовать её, чтобы обеспечить необходимую обратную связь о том, что происходит на экране (т. е. звуковые описания). Например, если кто-то имеет проблемы со зрением, но способен слушать видео, звуковая дорожка будет объяснять детали происходящего на экране..

Еще одной полезной функцией из числа специальных возможностей, которая поставляется с JW Player, является интерактивная расшифровка:

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

Итак, как сделать видео доступным

Если вы хотите сделать видео доступным, вам нужно подумать о том, как контент может восприниматься кем только возможно.

• Если кто-то не может услышать звук, что для них необходимо, чтобы понять содержимое на экране?
• Если кто-то не может смотреть видео, что можно сделать, чтобы помочь им визуализировать то, что на экране?
• Если кто-то не может управлять видео с помощью мыши, как они смогут перемещаться по настройкам видеоплеера?

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

Автор — СЮЗАННА СКАКА (SUZANNE SCACCA)

© 2020 Webdesigner Depot. Website: webdesignerdepot.com