На зов голоса: как заставить веб-сайт слышать пользователя

Как и зачем взаимодействовать с сайтом голосом? Как это делается сейчас, что такое скринридеры и как они помогают делать сайты доступнее? Какие спецификации и API для синтеза и распознавания голоса уже есть? О том, как это может работать, рассказал Алексей Охрименко, организатор Angular Moscow, автор Пятиминутки Angular и создатель дизайн-паттерна MALEVICH. Выступление состоялось в рамках конференции Web Standards Days, организованной объединением веб-разработчиков Web Standards. Конференция Web Standards Days начиналась как регулярные встречи разработчиков, а со временем переросла в масштабное событие, которое сегодня проходит не только в Москве и Петербурге, но и в других странах и городах  в Минске, Риге и Киеве. А накануне конференция состоялась в Университете ИТМО.

Существующие способы взаимодействия с веб-сайтом

Самый простой и банальный способ взаимодействия с веб-сайтом — мышь. На девайсах, где мышь не предусмотрена, она эмулируется. Другой способ, получивший наибольшее распространение в последние годы, — touch-девайсы, которые пропагандирует компания Apple. Такие девайсы поддерживаются большим количество мобильных устройств, однако далеко не везде используются на компьютерах.

Существует спецификация Pointer Events, которая умеет работать с touch-events и дополнительно со стилусами. Pointer — это абстракция над тремя разными способами взаимодействия: мышь, стилус и touch-events. Другими словами, один способ абстракции, который позволяет работать со всеми тремя инструментами удобным образом. 

Сегодня один из главных игроков рынка Apple поддерживает спецификацию Touch Events и игнорирует спецификацию Pointer Events, поэтому распространение последней значительно отстает. Еще один способ взаимодействия — геймпад (джойстик). Такой способ хорошо поддерживается, поэтому можно с легкостью управлять сайтом с помощью геймпада.

Другой распространенный и неотъемлемый вид взаимодействия с веб-сайтом — клавиатура. В девайсах, где она не предусмотрена, она, как правило, симулируется визуальной клавиатурой или иными способами. Также существует способ взаимодействия — клавиатура + Screen reader (форма вспомогательных технологий, которая необходима людям с ограниченными возможностями по зрению, грамотности или обучению). Вместе они работают через программное обеспечение с собственным алгоритмом взаимодействия.

Accessibility (A11y)

Наряду с понятием «юзабилити» (usability) все чаще можно встретить термин «аксессибилити» (accessibility), что означает «доступность сайта». Чаще всего термин accessibility употребляется как обозначение доступности сайта для пользователей с ограниченными возможностями. Например, людям, страдающим заболеваниями зрительного аппарата сайт в традиционном виде может быть неудобен для просмотра. Как правило, выстроить accessibility на высоком уровне — трудоемкий процесс, так как разработчикам необходимо определенным образом верстать сайт, прописывать атрибуты, работать со спецификацией.

Второй отрицательный момент — accessibility не приносит заработка. По мнению Алексея Охрименко, существует способ улучшения accessibility, который сделает интересным процесс взаимодействия не только для людей с ограниченными возможностями, но и для рядовых пользователей. Более того, этот способ сделает интересной процесс разработки сайта.

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

Алексей Охрименко
Алексей Охрименко

WebSpeech API нестандартный способ улучшения A11y

WebSpeech API состоит из двух базовых спецификаций — SpeechSynthesis (генерация речи) и SpeechRecognition (понимание компьютером человека). Если первая спецификация распространена хорошо (ее покрытие составляет 80 %), то вторая значительно уступает в распространении, что создает ограничение в ее использовании. О том, как работать со спецификациями, можно узнать здесь.

Сложность NLP (Natural Language Processing) и как ее обойти

Так как на сегодняшний день нет готовых библиотек и нет ничего, что позволит быстро обрабатывать речь, то разработчику придется иметь дело с NLP (Natural Language Processing) — наукой о том, как работать с языками алгоритмически. Однако потратить на изучение науки придется порядка 20 лет. Поэтому существует «грязный трюк», которым последние пару лет пользуются крупные компании Amazon, Apple, Yandex, Google с помощью своих голосовых ассистентов (Amazon Alexa, Apple Siri, Google Assistant, Yandex Алиса).

Последовательный диалог (Intent)

Таким «грязным трюком» стал последовательный диалог (Intent). Все голосовые ассистенты серьезно ограничивают область речи, сводя все к последовательным командам. Человек разделяет свое общение с компьютером на цели (определенное запрограммированное взаимодействие). Алгоритмы научились понимать цель, с которой человек обращается к компьютеру, что легко превратить в абстракции, которые также легко обрабатывать. Для реализации этой задачи необходимы простые алгоритмы и поисковые движки.

Лекция Алексея Охрименко в рамках Web Standards Day
Лекция Алексея Охрименко в рамках Web Standards Day

Как реализовать диалог

Существует объект SpeechGrammar, который позволяет создавать диалоги. Спецификация JSpeech Grammar Format (JSGF) в свое время пришла от компании SunMicrosystems, входящей в корпорацию Oracle с 2010 года. Компании сделали публичное объявление о том, что использовать спецификацию может любой человек.

«Чем больше мы изучаем SpeechRecognition, тем чаще сталкиваемся с проблемами. Например, что будет, если кто-то вместо числа назовет имя или укажет параметры в неправильной последовательности? В таком случае даже с помощью SpeechGrammar диалог сложно выстроить. Однако есть выход девайс Google Home Mini. Это динамик с микрофоном, который мы подключаем к Wi-Fi и начинаем общаться», — сказал спикер.

Для того, чтобы реализовать взаимодействие с веб-сайтом с помощью Google Home Mini нужны шесть часов рабочего времени (без чтения документации), девайс стоимостью от 3000 до 5000 рублей (в зависимости от места покупки), программа Google Assistant, которую можно установить на Google Home Mini бесплатно. Также понадобится сервис Dialogflow — он создан, чтобы создавать диалоговые приложения с Google ассистентом, и выполняет всю черновую работу: поправляет ошибки, корректирует последовательность и другое (Dialogflow можно также подключать к Yandex Алиса). Замыкающее звено — любой бэкенд. С механизмом взаимодействия компонентов можно ознакомиться здесь.

Лекция Алексея Охрименко в рамках Web Standards Day
Лекция Алексея Охрименко в рамках Web Standards Day

«Мы поняли, что с помощью WebSpeech API можем самостоятельно создать полноценный интерфейс взаимодействия пользователя с веб-сайтом с помощью речи, причем как с помощью произношения речи, так и ее распознавания. При этом интерфейс становится доступнее, и мы контролируем то, как он выглядит, можем прочитать веб-сайт, как нам угодно. Также есть альтернативный вариант, с помощью которого мы можем заглянуть в будущее, когда SpeechRecognition распространится на все платформы», — прокомментировал эксперт. 

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

«По сути, это новая игрушка. Конечно, лет через 10-20 этот метод может стать скучным и привычным, но сейчас это интересно всем. Я показал основной способ, который плохо поддерживается в текущий момент браузерами, и альтернативный «хитрый» способ, с помощью которого можно взглянуть в будущее в реальный момент времени и попробовать уже сейчас, каково с этим работать. На своем любимом веб-сайте ты задаешь «найти любимую статью» от любимого автора тебе не надо тратить время на ввод текста, поиск Search Bar, смотреть анимацию. Сайт сразу понимает команду. Подход с использованием WebSpeech API появился довольно давно, он распространен уже два-три года. Такой подход, к сожалению, развит в виде маленьких демок или игрушек, а мейнстримного использования взаимодействия с сайтом голосом пока нет. Спецификации SpeechSynthesis и SpeechRecognition в текущий момент работают не идеально, поэтому приходится пользоваться альтернативным способом. Неслучайно компании стали продвигать своих голосовых ассистентов», — заключил Алексей Охрименко.

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

Архив по годам:
Пресс-служба