Распознавание речи

Сайтами и приложениями пользуются разные люди. Кто-то может это делать с любого устройства, а другим нужны вспомогательные технологии (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="clickOnButton()"> вместо старого доброго <button>, пользователи не смогут её нажать ни голосом, ни с клавиатуры. Это же не настоящая кнопка с ролью button.

Конечно, явная ARIA-роль кнопки сделает <div> доступным для голосового управления, но это плохая практика. Так нарушаете одно из базовых правил ARIA — не использовать ARIA. Ещё в теге <button> уже по умолчанию есть и роль, и нужное поведение. Вам не придётся писать лишний код.

Плохой пример: <div> с role="button" и событием onclick.

        
          
          <!-- Не надо так --><div  class="button"  role="button"  onclick="clickOnButton()">  Оплатить доставку</div>
          <!-- Не надо так -->
<div
  class="button"
  role="button"
  onclick="clickOnButton()"
>
  Оплатить доставку
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Хороший пример: для кнопки используем <button>.

        
          
          <button>  Оплатить доставку</button>
          <button>
  Оплатить доставку
</button>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Видимое имя. Имена — это то, как называются ссылки, кнопки и другие элементы. Они могут быть видимыми всем или только скринридерам. Атрибут aria-label и визуально скрытый CSS-стилями текст — два распространённых способа добавить невидимое имя.

Казалось бы, всё хорошо, элемент как-то называется, в чём проблема? Пользователи голосового управления смотрят на интерфейс, а не слушают его. Когда у элемента нет видимого имени, с ним нельзя взаимодействовать голосовыми командами. Из-за этого приходится открывать сетку, а это занимает больше времени. Также не все люди знают, что такая функция вообще есть в программах распознавания речи.

Называйте интерактивные элементы так, чтобы их имена не только слышали, но и видели.

Плохой пример: полю задан aria-label, который визуально скрыт.

        
          
          <!-- Не надо так --><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-label.

        
          
          <!-- Не надо так --><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="0".

Плохой пример: кнопка на <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="-1", когда они уже в нём. Исключение — временно скрытые интерактивные элементы как в модальных окнах или раскрывающихся меню.

Плохой пример: кнопка убрана из порядка фокуса с помощью tabindex="-1".

        
          
          <!-- Не надо так --><button tabindex="-1">  Подписаться на рассылку</button>
          <!-- Не надо так -->
<button tabindex="-1">
  Подписаться на рассылку
</button>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Хороший пример: просто кнопка и ничего лишнего.

        
          
          <button>  Подписаться на рассылку</button>
          <button>
  Подписаться на рассылку
</button>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Наконец, не удаляйте стили фокуса. Без них пользователи не узнают, на каком элементе находятся.

Одно имя. На сайтах часто встречаются кнопки, поля и другие интерактивные элементы с видимым именем и атрибутом aria-label одновременно.

        
          
          <!-- Не повторять в домашних условиях --><button aria-label="Удалить">  Отменить</button>
          <!-- Не повторять в домашних условиях -->
<button aria-label="Удалить">
  Отменить
</button>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Визуально кнопка называется «Отменить». Для вспомогательных технологий она станет «Удалить», так как aria-label перезаписывает видимое имя. Пользователь голосового управления не отменит действие командой «Нажать отменить», потому что для браузера и программы распознавания речи на странице нет такого элемента.

Проблему с перезаписыванием имени легко решить — просто не используйте aria-label для элемента, у которого уже есть видимое имя.

        
          
          <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) и юзабилити. Обычно его проводят компании, которые разрабатывают голосовые интерфейсы.