Как создавать более доступные медиа с помощью этих советов

Введение

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

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

Доступные носители: изображения

Есть несколько важных различий, которые мы должны сделать в самом начале: служит ли изображение цели или чисто из эстетических соображений. Изображение, которое служит цели, должно иметь осмысленный текст ALT, так как средства чтения с экрана будут полагаться на это!

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

<img src="./randomimage.png" alt="Text describing the image" />

Использование srcset для адаптивных доступных медиа

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

https://codepen.io/pixelstrolch/pen/yVbdea

См. Pen Srcset Demo Штефана Брехбюля (@pixelstrolch) на CodePen.

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

Дополнительный отказ от ответственности

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

Вот несколько CSS-трюков для достижения цели:

https://css-tricks.com/css-image-replacement/

CSS-трюки для замены изображений

Доступные мультимедиа: аудио и видео

Доступные элементы управления мультимедиа

Знаете ли вы, что HTML5 имеет встроенные элементы управления для обработки аудио и видео?

<audio controls> 
    <source /> 
    <p>Help text if it doesn't load</p> 
</audio> 
<video controls> 
   <source /> 
   <p>Help text if it doesn't load </p> 
</video>

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

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

https://kensgists.github.io/apt/

Вот небольшой наглядный пример того, как выглядит AblePlayer:

https://ableplayer.github.io/ableplayer/demos/video1.html

Доступные носители: подпись

Некоторые из видеоплееров, упомянутых в последнем разделе, предлагают возможность добавлять субтитры к видео. Просто дам краткое изложение веб-стандарта для предоставления титров в формате WebVTT.

Вот пример файла WebVTT:

Их можно напрямую связать с треком или, в некоторых случаях, с плеером:

<video controls src="myvideo.mp4">    
    <track default src="track.vtt"> 
</video>

Доступные СМИ: Стенограмма

Каждое видео или аудио должно иметь расшифровку, доступную в другом месте страницы. Вот это и есть раздел.

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

Ну да, обычно так и было бы. Но! Есть много технологий, которые могут нам помочь.

Например, сейчас на dev.to проходит хакатон с Deepgram. Возможно, вы могли бы автоматизировать возможность создания этих расшифровок!

Посмотрите этот пост. (Обратите внимание, я никоим образом не связан)

Заключение

Надеюсь, эти советы помогли вам сделать сайты более доступными для всех!

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

Больше контента на Relatable Code

Если вам это понравилось, не стесняйтесь связаться со мной в LinkedIn или Twitter.

Первоначально опубликовано на https://relatablecode.com 20 марта 2022 г.