Как добавить замещающий текст в GIF, который на самом деле является беззвучным, зацикленным, автоматически воспроизводимым MP4 ‹видео›?

У меня есть несколько сообщений на моем веб-сайте Wordpress. с длинными GIF-видео. Пытаясь сократить огромный размер этих GIF-файлов, я преобразовал их в видео MP4 и теперь использую тег <video> для их отображения, например:

<div>
<video src="myVideo.mp4" autoplay="autoplay" loop="loop" muted="" playsinline="" webkit-playsinline="" width="600">
</video>
<p class="wp-caption-text">My caption that makes it look more like an img than a video</p>
</div>

Мой вопрос: как лучше всего добавить замещающий текст, как я бы добавил в тег <img>? Эти видео могут использовать тег <video>, но на самом деле они больше похожи на изображения и должны иметь альтернативный текст. Что было бы лучше для программ чтения с экрана и что было бы лучше для целей SEO?

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


wordpress video accessibility web-accessibility animated-gif
person teradyl    schedule 08.12.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Есть несколько вещей, которые вам нужно учитывать здесь: -

1. Добавляет ли видео что-нибудь для пользователя программы чтения с экрана?

Если нет (т. е. приведенные ниже инструкции точно описывают содержимое видео), то было бы лучше скрыть его от программы чтения с экрана с помощью aria-hidden="true". Не дублируйте информацию для пользователей программ чтения с экрана. Поскольку ваши «подписи» на самом деле не подписи, я думаю, вам лучше всего это сделать.

2. Сделайте ваши подписи более общими

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

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

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

Приведенное выше предложение никоим образом не относится к видео и имеет смысл само по себе. Если вы сделаете все свои «заголовки» такими, то инструкции все равно должны иметь смысл без видео.

3. Можно ли поставить видео на паузу?

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

Ваш вариант использования

Учитывая ваш вариант использования, простое скрытие элемента видео с помощью aria-hidden="true" и обновление ваших описаний обеспечит хороший баланс между предоставлением информации в доступном формате и отсутствием перегрузки пользователя программы чтения с экрана дублирующейся информацией, которая не добавляет никакой ценности (нет смысла добавлять title для каждого из видео, если они правильно описаны ниже, и правильный способ сделать беззвучное видео доступным — добавить enhanced audio descriptions сцены, что является излишним для вашего варианта использования.).

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

person Graham Ritchie    schedule 09.12.2019

arrow_upward
1
arrow_downward

Используйте атрибут title, и это допустимо для элемента VIDEO. Поскольку текст ALT описывает статическое изображение!

<video title="xyz" ...>

Нравиться:

<div>
<video title="xyz " src="myVideo.mp4" autoplay="autoplay" loop="loop" muted="" playsinline="" webkit-playsinline="" width="600">
</video>
<p class="wp-caption-text">My caption that makes it look more like an img than a video</p>
</div>
person farhan ayub    schedule 09.12.2019