Улучшаем доступность аудиоконтента
В HTML5 audio элемент дает смысловое значение, когда он оборачивает звук или аудио поток контента в разметке. Аудиоконтент также нуждается в текстовой альтернативе, доступной для людей, которые являются глухими или слабослышащими. Это можно сделать рядом с текстом на странице или ссылкой на стенограмму. audio тег поддерживает атрибут controls . Это показывает воспроизведение по умолчанию в браузере, паузу и другие элементы управления и поддерживает функциональность клавиатуры. Это логический атрибут, то есть он не нуждается в значении, его присутствие на теге включает настройку. Вот пример:
<audio id = "meowClip" элементы управления>Заметка
<источник src = "audio / meow.mp3" type = "audio / mpeg" />
<источник src = "audio / meow.ogg" type = "audio / ogg" />
</ Аудио>
Мультимедийный контент обычно имеет как визуальные, так и звуковые компоненты. Для этого нужны синхронизированные подписи и расшифровка стенограммы, чтобы пользователи с визуальными и / или слуховыми нарушениями могли получить к ней доступ. Как правило, веб-разработчик не несет ответственности за создание титров или расшифровки, но должен знать, чтобы их включать.
Пора отдохнуть от Camper Cat и познакомиться с кемпером Zersiax (@zersiax), чемпионом доступности и пользователем экрана. Чтобы услышать клип его экранного ридера в действии, добавьте audio элемент после p . Включите атрибут controls . Затем поместите source тег внутри audio тегов с атрибутом src установленным на «https://s3.amazonaws.com/freecodecamp/screen-reader.mp3», и type атрибут «audio / mpeg». Заметка
Звуковой клип может звучать быстро и быть трудно понятен, но это обычная скорость для пользователей с экрана.