Сайтами и приложениями пользуются разные люди. Кто-то может это делать с любого устройства, а другим нужны вспомогательные технологии (assistive technology). Это такие программы и устройства, которые упрощают взаимодействие пользователей с особыми потребностями с содержимым сайтов.
В статье разберёмся с тем, что такое технологии распознавания речи. Скорее всего, вы уже знаете или пользовались ими в повседневной жизни и не воспринимали их как особые вспомогательные технологии. В действительности распознавание речи устраняет барьеры для людей, которые не могут взаимодействовать с интерфейсами руками из-за физического состояния или внешних факторов.
Кратко
СкопированоТехнологии распознавания речи (speech recognition technology) — это общий термин для программ и приложений, которые слушают человеческую речь и превращают её в цифровой текст или выполняют голосовые команды на разных устройствах. Такие технологии ещё называют автоматическим или компьютерным распознаванием речи 🗣️
Программы и приложения для распознавания речи нужны нескольким группам пользователей.
- Люди с моторными особенностями. Например, с ампутацией рук, параличом или артритом.
- Пользователи с особенностями зрения: слабовидящие, со слепотой, светобоязнью и так далее.
- Пользователи с когнитивными особенностями, которым сложно писать и читать. К примеру, с дислексией, дисграфией или тем, кто плохо знает язык.
- Люди с временными ограничениями: переломами, травмой повторяющихся нагрузок и похожими состояниями.
Конечно, другим людям тоже удобно управлять интерфейсами голосом. Мы не всегда можем взять в руки телефон или сесть за компьютер из-за внешних ограничений. К примеру, в этот момент ведём машину, готовим ужин или держим на руках кота 🐈
Технологии распознавания речи часто сочетают с другими вспомогательными технологиями — скринридерами, экранными лупами, выносными компьютерными кнопками и эргономическими клавиатурами.
Виды технологий
СкопированоВыделяют несколько видов технологий распознавания речи в зависимости от задач и устройств. Они бывают уже встроенными в операционную систему или устанавливаемыми отдельно.
Преобразование речи в текст (speech-to-text, коротко STT). Расшифровывают сказанные слова и преобразуют их в цифровой текст, по которому можно перемещаться и редактировать голосом. Другая важная функция — распознавание и выполнение голосовых команд. Примеры — клик по кнопке, запуск программы, переход по ссылке или навигация по странице.
Функция преобразования текста в речь по умолчанию есть во всех операционных системах. Это голосовой доступ на Windows и Android, голосовой контроль на macOS и iOS. Другие, уже скачиваемые программы, — Dragon и e-Speaking Voice.
Диктовка. Помогает людям набирать и редактировать текст голосом, а ещё записывает аудио.
Программы и приложения для диктовки тоже есть в операционных системах. К примеру, на macOS и в iOS это функция диктовки текста, а в Android — Gboard. Эта функция встречается и в разных программах и веб-сервисах. Например, голосовой набор в Google Документах или диктовка в Windows Word. Можете найти и отдельные сервисы для записи текстов и голосовых заметок. Примеры — Otter.ai и Speechnotes.
Расшифровка. Анализирует аудио, видео и превращает речь в текст. Тексты бывают со временными отметками, если это субтитры, или в виде сплошного текста, когда это расшифровка. Примеры — Amazon Transcribe и Whisperer.
Виртуальные собеседники (conversational artificial intelligence). Распознают человеческую речь и отвечают на запросы текстовыми сообщениями или голосом, похожим на человеческий. Они делают письменные заметки, устанавливают таймеры, напоминают о событиях в календаре, ищут информацию по сайтам и консультируют, прокладывают маршруты на картах и не только.
К виртуальным собеседникам относятся голосовые ассистенты Alexa, Siri, Google Assistant, Cortana, Алиса или Ultifi для автомобилей General Motors. Другая разновидность таких интерфейсов — чат-боты. Их можно встретить во многих веб-сервисах и на сайтах. К примеру, Manychat и Woebot.
Как работают
СкопированоТехнологии распознавания речи находятся на стыке информатики и лингвистики. Они решают проблему взаимодействия людей с компьютерами и другими устройствами с помощью голоса.
Современное распознавание речи основано на нейронных сетях. Такие сети построены на математических моделях. Это последовательный набор связанных математических операций, которые обрабатывают или приблизительно рассчитывают входные данные. В случае распознавания речи это аудиосигнал, который может быть, например, аналоговым аудио. Такая модель помогает быстрее и эффективнее решать задачи, а ещё точнее подбирать способы их решения (приближённые функции).
Теперь представим, что вы используете Dragon и управляете интерфейсом сайта голосом. Что именно происходит в этот момент?
Сначала программа записывает ваш голос и находит посторонние звуки, помехи и искажения. После аналоговая запись и информация о её качестве передаётся в модуль, который её оцифровывает. Дополнительно он убирает шумы, выравнивает громкость, подстраивается под темп и другие особенности речи. На следующем этапе выделяются небольшие кусочки слов (фонемы), а ещё определяется язык и его правила. Данные о языке и его особенностях берутся из акустической и языковой моделей. На последнем шаге происходит главное — обработанная запись превращается в понятные команды для устройств или преобразуется в текст на естественном языке. Например, на английском, японском или норвежском.
Подробнее о технологии на сайте IBM 🔗
Программы и приложения для распознавания речи не всегда понимают, что говорит человек. Например, из-за сильного акцента, заикания и других особенностей произношения. Чтобы решить эту проблему, технологические компании объединили усилия в проекте Speech Accessibility Project. Его цель — собрать как можно больше образцов речи людей с разными особенностями и научить акустические и языковые модели понимать их. То есть сделать их персонализированными.
Кроме диктовки текстов, заполнения форм, открытия и закрытия вкладок в браузере, можно просматривать сайты и управлять ими с помощью голосовых команд. Они отличаются друг от друга в разных программах и приложениях, а ещё их можно настраивать под себя. Вот несколько списков с командами в разных программах и приложениях:
- Список команд для голосового доступа на Windows
- Команды для голосового контроля на macOS
- Список команд для голосового контроля в iOS
- Команды голосового доступа в Android
- Шпаргалка с командами в Dragon
Навигация голосом по сайтам похожа на навигацию с клавиатуры или с помощью касаний. К примеру, страницы прокручивают командами «Стрелка вверх», «Стрелка вниз» или «Скролить в конец». Для перехода от одного интерактивного элемента к другому говорят «Нажать Tab», для возврата к предыдущему — «Нажать Shift Tab». В мобильных версиях сайтов для перемещения между элементами используют команды «Свайпнуть вперёд» и «Свайпнуть назад». Чтобы нажать на кнопку или ссылку, читают название элемента и называют команду «Нажать», «Перейти» или «Тап».
Программы распознавания речи даже имитируют движения мышки. Чтобы управлять таким образом страницей, используют команды «Переместить мышку вниз», «Переместить мышку вверх» и «Стоп». Голосом регулируют и скорость перемещения курсора мыши. Звучит удобно, но пользователи распознавания речи чаще используют имитацию клавиатуры. Управление курсором с помощью голоса отнимает много времени и требует точности.
Также элементы активируются не только по имени, а ещё и по порядковому номеру на странице. Если в меню не так много пунктов, достаточно сказать «Перейти два» и так открыть вторую ссылку из четырёх.
Другая важная команда — «Показать сетку». Сетка (grid или mouse grid) визуально делит интерфейс сайта на несколько пронумерованных ячеек. На картинке показано, как она примерно выглядит. Страница разделена на девять ячеек с помощью вертикальных и горизонтальных линий. В углу каждой ячейки подписан её номер: 1, 2, 3, 4, 5, 6, 7, 8 и 9.
Сетки включают, когда на сайте есть кнопки с графикой или несколько одинаковых ссылок. Предположим, на странице три кнопки с иконкой денежной купюры, шестерёнкой и корзиной. Пользователь хочет перейти в настройки, но команда «Нажать настройки» не работает. Чтобы решить проблему, он использует команду «Показать сетку», называет номер ячейки с нужной кнопкой и команду «Нажать».
Во многих программах сетка включается автоматически, если у разных ссылок одно и то же название. В этом случае элементы с повторяющимся текстом визуально пронумеруются. Пользователю останется только сказать номер нужной ссылки и команду «Перейти».
Если сложно всё это представить, посмотрите видео с примером навигации по сайту голосом.
Как сделать доступно
СкопированоДоступность графических интерфейсов сайтов и приложений может как упростить, так и усложнить жизнь пользователям программ преобразования речи в текст и конкретно голосового управления. Есть даже отдельные пользовательские голосовые интерфейсы (voice-user interface, коротко VUI) и специальное Web Speech API.
Разберём основные советы, как сделать графический интерфейс сайта более доступным для управления голосом.
Семантика. Да-да, опять семантика. Мы уже упоминали, что голосовое управление похоже на навигацию с клавиатуры. Если используем <div onclick
вместо старого доброго <button>
, пользователи не смогут её нажать ни голосом, ни с клавиатуры. Это же не настоящая кнопка с ролью button
.
Конечно, явная ARIA-роль кнопки сделает <div>
доступным для голосового управления, но это плохая практика. Так нарушаете одно из базовых правил ARIA — не использовать ARIA. Ещё в теге <button>
уже по умолчанию есть и роль, и нужное поведение. Вам не придётся писать лишний код.
Плохой пример: <div>
с role
и событием onclick
.
<!-- Не надо так --><div class="button" role="button" onclick="clickOnButton()"> Оплатить доставку</div>
<!-- Не надо так --> <div class="button" role="button" onclick="clickOnButton()" > Оплатить доставку </div>
Хороший пример: для кнопки используем <button>
.
<button> Оплатить доставку</button>
<button> Оплатить доставку </button>
Видимое имя. Имена — это то, как называются ссылки, кнопки и другие элементы. Они могут быть видимыми всем или только скринридерам. Атрибут aria
и визуально скрытый CSS-стилями текст — два распространённых способа добавить невидимое имя.
Казалось бы, всё хорошо, элемент как-то называется, в чём проблема? Пользователи голосового управления смотрят на интерфейс, а не слушают его. Когда у элемента нет видимого имени, с ним нельзя взаимодействовать голосовыми командами. Из-за этого приходится открывать сетку, а это занимает больше времени. Также не все люди знают, что такая функция вообще есть в программах распознавания речи.
Называйте интерактивные элементы так, чтобы их имена не только слышали, но и видели.
Плохой пример: полю задан aria
, который визуально скрыт.
<!-- Не надо так --><input type="text" aria-label="Кличка собаки">
<!-- Не надо так --> <input type="text" aria-label="Кличка собаки">
Хороший пример: поле связано с видимой подписью в <label>
.
<label for="dog-name">Кличка собаки</label><input type="text" id="dog-name">
<label for="dog-name">Кличка собаки</label> <input type="text" id="dog-name">
Что делать, если не заменить картинки и иконки на текст? В этом случае придумайте простое и очевидное имя. Мало кто угадает, что ссылка с иконкой шестерёнки называется «Настройки личного кабинета нашего дорогого пользователя». У текста «Настройки» больше шансов, что его угадают.
Плохой пример: длинное и неочевидное имя ссылки, которое берётся из aria
.
<!-- Не надо так --><a href="#" aria-label="Настройки личного кабинета нашего дорогого пользователя"> ⚙️</a>
<!-- Не надо так --> <a href="#" aria-label="Настройки личного кабинета нашего дорогого пользователя" > ⚙️ </a>
Пример получше: ссылка с коротким и более очевидным именем в ARIA-атрибуте.
<a href="#" aria-label="Настройки"> ⚙️</a>
<a href="#" aria-label="Настройки"> ⚙️ </a>
Интерактивные элементы. Пользователи голосового управления взаимодействуют со ссылками, кнопками, полями и похожими элементами так же, как пользователи клавиатуры. Это значит, что на них устанавливается клавиатурный фокус при помощи клавиш Tab или Shift Tab.
Опять возвращаемся к семантике. Теги <a>
или <input>
доступны для клавиатуры по умолчанию. Когда вместо тега для кнопки действительно нужен <div>
, добавьте к нему хотя бы tabindex
.
Плохой пример: кнопка на <div>
с явно заданной ролью button
, событием onclick
и с нулевым значением tabindex
.
<!-- Не надо так --><div class="button" role="button" onclick="clickOnButton()" tabindex="0"> Оплатить доставку</div>
<!-- Не надо так --> <div class="button" role="button" onclick="clickOnButton()" tabindex="0" > Оплатить доставку </div>
Хороший пример: нет ничего лучше <button>
.
<button> Оплатить доставку</button>
<button> Оплатить доставку </button>
Не убирайте элементы из порядка фокуса атрибутом tabindex
, когда они уже в нём. Исключение — временно скрытые интерактивные элементы как в модальных окнах или раскрывающихся меню.
Плохой пример: кнопка убрана из порядка фокуса с помощью tabindex
.
<!-- Не надо так --><button tabindex="-1"> Подписаться на рассылку</button>
<!-- Не надо так --> <button tabindex="-1"> Подписаться на рассылку </button>
Хороший пример: просто кнопка и ничего лишнего.
<button> Подписаться на рассылку</button>
<button> Подписаться на рассылку </button>
Наконец, не удаляйте стили фокуса. Без них пользователи не узнают, на каком элементе находятся.
Одно имя. На сайтах часто встречаются кнопки, поля и другие интерактивные элементы с видимым именем и атрибутом aria
одновременно.
<!-- Не повторять в домашних условиях --><button aria-label="Удалить"> Отменить</button>
<!-- Не повторять в домашних условиях --> <button aria-label="Удалить"> Отменить </button>
Визуально кнопка называется «Отменить». Для вспомогательных технологий она станет «Удалить», так как aria
перезаписывает видимое имя. Пользователь голосового управления не отменит действие командой «Нажать отменить», потому что для браузера и программы распознавания речи на странице нет такого элемента.
Проблему с перезаписыванием имени легко решить — просто не используйте aria
для элемента, у которого уже есть видимое имя.
<button> Отменить</button>
<button> Отменить </button>
Уникальное имя. Все хоть раз в жизни встречали легендарные ссылки «читать дальше» и «тут». Бывает, что на одной странице их несколько. Когда видите интерфейс, полагаетесь на контекст. Например, ссылка «тут» после предложения «багеты на заказ» ведёт на страницу об условиях и ценах на багеты.
Контекст не поможет пользователям голосового управления, когда на странице одни «тут». Показ сетки, даже автоматически, тоже отнимает время.
Лучший выход из ситуации с неуникальными ссылками — называть их по-разному. Это не только упростит голосовое управление, но порадует пользователей скринридеров и поисковых роботов.
Плохой пример: лаконичная ссылка с текстом «тут».
<!-- Не надо так --><p> Рассказываем про багеты на заказ <a href="#">тут</a>.</p>
<!-- Не надо так --> <p> Рассказываем про багеты на заказ <a href="#">тут</a>. </p>
Хороший пример: более описательная ссылка «багеты на заказ».
<p> Рассказываем о персональных решениях ваших проблем в разделе про <a href="#">багеты на заказ</a>.</p>
<p> Рассказываем о персональных решениях ваших проблем в разделе про <a href="#">багеты на заказ</a>. </p>
Всё важное — не скрывать. Не перекрывайте важное содержимое и элементы другими блоками. К примеру, немодальное окно с ловушкой фокуса или большое по высоте плавающее меню загораживают кнопки, ссылки, важные тексты и другие детали на странице. Что касается элементов вроде тултипов, то их вряд ли найдут все категории пользователей.
Дизайн. Не будем вдаваться в дизайнерские подробности. Просто напомним, что стоит использовать крупные и читаемые шрифты, большие по размерам интерактивные элементы и контрастные тексты.
Тестирование
СкопированоДоступность интерфейсов для технологий преобразования речи в текст тестируют автоматически, вручную и с пользователями. Автоматические тесты находят самые базовые ошибки в коде и дизайне, а ручное и пользовательское — остальные, более сложные проблемы.
Для автоматического тестирования подойдут любые инструменты, которые проверяют код и отдельные части интерфейса. Например, браузерные Google Lighthouse и axe DevTools, консольные Pa11y и @axe-core/cli, встраиваемые в рабочие процессы AccessLint и много-много других программ, расширений и пакетов. Только посмотрите на полный список инструментов от W3C!
Ручное тестирование — непростая задача, особенно если вообще не пользовались программами для преобразования речи в текст. Его преимущество в том, что оно находит баги, о которых даже не догадывались. На что стоит обращать внимание в первую очередь, когда тестируете сайты вручную:
- активируются ли голосом интерактивные элементы: кнопки, ссылки, вкладки, выпадающие списки и другие;
- скроллятся ли блоки с вертикальной полосой прокрутки, к примеру, карусели;
- работают ли как надо поля форм: фокус, ввод текста и редактирование, отправка на сервер и прочее.
Подробные руководства по ручному тестированию есть у команды доступности BBC.
- Тестирование с Dragon в Windows
- Тестирование голосового доступа на Android
- Тестирование голосового контроля на iOS
Пользовательское тестирование вскрывает проблемы с UX (user experience) и юзабилити. Обычно его проводят компании, которые разрабатывают голосовые интерфейсы.