Уроки A11Y я узнал при запуске подкаста

Первоначально опубликовано a11ywithlindsey.com .

Если вы не заметили, я не был рядом! Прошло месяц с тех пор, как я разместил, и это было хорошей причиной для этого. Келли Вон, Али Спиттель, Эмма Верекинд, и я начал Божья коровка подкаст Отказ Этот подкаст пришел к плоту с большим трудом. В результате я выяснил, как сбалансировать этот блог с этим боковым проектом! Не волнуйтесь, хотя это не уходит. Мой блог – мой страстный проект!

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

Транскрипты являются обязательными

Когда мы начали планировать этот подкаст, несомненно, мы хотели иметь транскрипты. Стенограммы могут быть время и финансово дорогими, и многие люди видят их как «приятно иметь». Однако я здесь, чтобы сказать вам, что они обязательны.

Стенограммы имеют тонну преимуществ:

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

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

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

На то, что кто-то делает это для тебя

Наем кто-то был первым, что мы пробовали, потому что это был единственный вариант, который мы знали. У нас не было времени, чтобы пройти весь весь звук и выписать это. Поэтому мы решили нанять кого-то, кто это сделал для нас. Мы использовали Fiverr, которые я никогда не пробовал раньше. Найм у кого-то есть плюсы и минусы, однако.

Плюсы:

Оплата реального человека и поддерживая кого-то еще.
Ловит ошибки в режиме реального времени

Минусы:

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

Используя искусственный интеллект

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

Плюсы:

Получите свой транскрипта в минуту или часы. Выдр Ай занял около 10 минут.
Дешевле
Становится лучше, как они изучают ваши колонки

Минусы:

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

Что мы в итоге делали

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

Соображения A11Y для пользовательских подкастов

Как вы можете или не можете знать, мы использовали GATSBYJS Чтобы построить сайт подкаста Божья коровка. Я взял на себя ответственность за доступ к доступным Podcast Player. Я так много узнал о том, как использовать React, чтобы создать все события аудиоэлемента. Кричать на Syntax.fm для того, чтобы иметь игрока, который я мог бы исследовать. Первое, что я сделал, было добавить Ref к элемент.

class Player extends React.Component {
  render() {
    const { show } = this.props;

    return (

Если я пойду в код и добавить console.log

class Player extends React.Component {
  render() {
    const { show } = this.props;
    console.log(this.audio)

    return (

Это дает мне возможность получить доступ к всем методам аудио. Я могу использовать их на моем пользовательском игроке в виде кнопок, радиопередач и ползунка.

В Podcast Player я использовал следующие методы:

Htmlmediaelement.currentTime – Это рассказывает вам текущее время в аудио, в считанные секунды.
Htmlmediaelement.playbackrate – Это говорит вам скорость, в которой вы играете. Мы можем установить это свойство, когда мы нажимаем кнопку, чтобы увеличить скорость!
HTMLMediaElement.Volume – Это говорит вам текущий уровень громкости.
HtmlmediaElement.play () – Это играет аудио.
HtmlmediaElement.pose () – Это приостанавливает аудио.
Htmlmediaelement.duration – Это говорит вам общую длину звука, в считанные секунды.

Как только вы добавите Ref В аудио вы можете использовать Это .audio контролировать что-нибудь с аудио. Вы можете добавить метод или имя свойства в Это .Audio . Это аккуратно! Вы можете использовать это, а также контролировать состояние React 🤯! Я не буду собираться слишком много во всех штатах в этом сообщении в блоге. Я рекомендую вам проверить Наш исходный код а также Syntax.fm Исходный код Если вы хотите узнать больше.

Кнопка маркировки

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

Я использовал React-Icons/Fa Пакет, чтобы получить значки для нашего игрока. Мы использовали Faplay , Fapause , Faundo и Faredo Для воспроизведения, паузы, перемотания 15 секунд и быстрые 15 секунд кнопок. Эти значки являются значками SVG, но я хотел убедиться, что в разметке был текст. Для этого мы обеспечили следующее:

Мы использовали семантические <кнопка> вместо поддерживать события клавиатуры. Прочитайте мой 3 простые советы для улучшения доступности клавиатуры сообщение для получения дополнительной информации.
Мы обеспечили не использовать значок шрифты, которые уже позаботились о нас через Реактивные иконки библиотека.
Мы гарантировали, что было Фактический текст Внутри кнопок, которые SVG не делают для нас. Мы можем визуально скрывать этот текст, используя CSS, но он все еще должен быть там.

Создание слайдера

Я искал для доступного игрока, который показывает ползунок. Я нашел Возможность игрока И начал наблюдать, как они делали вещи. Делать эту доступность была одним из самых сложных вещей, которые я сделал, и это все еще довольно багги. Код завершился многими работами с этикетками ARIA и множеством обработки событий. Боковой проект Conundrum это сделано лучше, чем идеально. Оглядываясь назад, я бы хотел, чтобы я сделал это ползунком, используя Вход диапазона Отказ Извлеченные уроки – оставайся настроенными для будущего поста в блоге, когда я обновляю этот слайдер!

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

 (this.progress = x)}
>

У меня есть 3 детских девса игрока: .player__press-loaded , .Player__PROGRESS-PLAY и .player__slider . Давайте посмотрим на то, что они соответствуют:

.player__press-loaded соответствует ширине всего ползунка. Этот DIV не имеет семантического значения для пользователей чтения экрана.
.Player__PROGRESS-PLAY это визуальное представление общего количества воспроизводимого.
.player__slider является наиболее важным элементом для доступности. Он рассказывает пользователю Reader Screen, в какое время он в настоящее время есть, и позволяет нам перемещать его с нашей клавиатурой.

Теперь давайте посмотрим на некоторые события и стиль здесь.

Для onclick Событие, мы хотим убедиться, что мы изменим Текущее время В звуке, чтобы быть везде, где мы нажимаем. Если вы можете, посмотрите на код Сам, вилка, и консоль бревен все вещи, чтобы увидеть, что происходит. Если вы нажмете в любом месте на .player__Progress Div, вы измените текущее время Отказ

Для .Player__PROGRESS-PLAY Div, у нас есть стиль. Ширина компонента – это процент прохода через эпизод.

Теперь для сама слайдера, а затем пара Функции помощника , один из которых я адаптировал со сайта синтаксиса.

Святой Бэтмен Это много атрибутов Aria! Давайте рассмотрим это на секунду:

Роль = "слайдер" – Это говорит о пользователю Reader Screen, что у не семантического DIV имеет некоторое значение!
Aria-ValueText – Это читаемая человеком версия значения слайдера. Например, на скриншоте выше – это было «5 минут, 51 секунды»
Aria-Valuenow – Определяет текущее значение для виджета диапазона (который слайдер)
Ария-Валюмин – необходимый атрибут, который определяет минимальное значение для виджета диапазона
Aria-ValueMax – требуемый атрибут, который определяет максимальное значение для виджета диапазона

Ниже приговор о том, как VoiceOver на MacOS читает слайдер:

«5 минут, 51 секунды, аудиосхемы, слайдер». Итак, Aria-ValueText , Aria-Label а потом роль .

С Это. Модернирует Если вы нажимаете левую или правую стрелку и соответственно перемотанные или быструю вперед 5 секунд. Посмотрите на Исходный код чтобы увидеть, как мы это сделали.

Как я хочу повторить слайдер

Как уже говорилось ранее, это было немного багги. Несколько вещей, которые багги:

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

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

Я ошибался. Вы полностью можете.

Выводы

Начало подкаста было очень положительным опытом вокруг. Я уверен, что мы поговорим о более общем уроках, которые мы узнали, начиная с подкаста на подкасте Божьего Божьего!

Два ключевых вынос из этого поста:

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

Если вы заинтересованы в подкасте Божьи коровки, обязательно Подписаться Чтобы они скачали!

Оставайтесь на связи! Если вам понравилась эта статья:

Дайте мне знать на Twitter И поделитесь этой статьей с друзьями! Кроме того, не стесняйтесь твитнуть мне любые последующие вопросы или мысли.
Поддержи меня на Парреон Действительно Если вам нравится моя работа, рассмотрите возможность сделать ежемесячное залог в размере 1 доллара. Вы сможете голосовать на будущих сообщениях в блоге, если вы зарабатываете залог \ 5 долларов или выше! Я также ежемесячно спроси мне что-нибудь сеанс для всех покровителей!
Будьте первым, кто узнает о моих сообщениях Для получения дополнительной доступности истекло!

Ваше здоровье! Желаю хорошей недели!

Оригинал: “https://dev.to/lkopacz/a11y-lessons-i-learned-when-starting-a-podcast-3l82”