Делаем сайты более удобными для общения

Веб-сайт без экрана звучит неправильно. Как книга без страниц или машина без руля. Еще есть аудиокниги, аппараты без рук. И все чаще веб-сайты используются даже без просмотра — по крайней мере, людьми.

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

Вторжение в домашние колонки

Мировые продажи умных колонок в 2019 году превысили 147 миллионов, и тенденция к пандемии растет. В конце концов, говорить быстрее, чем печатать. От Google Home до Alexa, помощников для смартфонов, автомобилей и даже холодильников — все больше и больше людей используют программы для поиска в Интернете от их имени.

Отложив довольно зловещий большой Brother Inctontones от этой тенденции, безопасно сказать, что сотни миллионов людей уже исследуют сеть каждый день, не глядя на него. Экраны больше не нужны для просмотра веб-страниц, и сайты должны адаптироваться к этой новой реальности. Те, кто этого не делает, отрезают себя от сотен миллионов людей.

Разработчики, дизайнеры и писатели должны быть готовы к тому, что их работу вообще не увидят и не кликнут — ее услышат и о ней будут говорить.

“

Проектирование невидимости

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

Вековые фонды

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

В центре внимания этой статьи есть нечто большее, чем это, но создание веб-сайтов, удобных для чтения с экрана, обеспечивает прочную основу для более причудливых вещей, описанных ниже. Я не буду задерживаться на этом слишком долго, так как другие много писали по этой теме (ссылки ниже), но ниже приведены вещи, о которых вы всегда должны думать:

• Четкая навигация внутри страницы и по всему сайту.
• Согласуйте структуру DOM с визуальным дизайном.
• Замещающий текст, не более 16 слов или около того, если изображение не нуждается в замещающем тексте (например, если это фон), имеет пустой замещающий текст, а не замещающий текст.
• Описательные гиперссылки.
• «Перейти к ссылкам на содержимое».

Визуальное мышление на самом деле закрывает нам глаза на многие недостатки дизайна. Пользователи могут и часто сами собирают части воедино, но это мало что дает для машиночитаемых веб-сайтов. Чтобы сделать веб-сайты удобными для общения, нужно сделать их удобными для преобразования текста в речь (TTS). Это хорошая практика, и она значительно улучшает доступность. Выиграй, выиграй.

Дальнейшее чтение о дизайне и доступности TTS

• Преобразование текста в речь от W3C
• Front End North Pt 2: Леони Уотсон поразила меня
• Преобразование текста в речь с помощью AWS (часть 1)
• Преобразование текста в речь и обратно с AWS (часть 2)
• Примечания о клиентской доступности
• Маркировка элементов управления W3C
• Использование атрибута aria-label от Mozilla
• Я использовал Интернет в течение дня, используя программу чтения с экрана
• От экспертов: глобальные изменения в области цифровой доступности во время COVID-19

Причудливые вещи

Дизайн для программ чтения с экрана и специальных возможностей не только закладывает прочный фундамент, но и хорош сам по себе. Это достаточная причина, чтобы упомянуть об этом в первую очередь. Тем не менее, это не совсем обеспечивает всплеск «свободных рук», о котором я говорил в начале этой статьи. Голосовые пользовательские интерфейсы или VUI. Для этого нам нужно покопаться в семантической разметке.

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

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

Для этого уже существует семантическая разметка. Одно из них называется «speakable» — это свойство Schema.org, которое в настоящее время находится в стадии бета-тестирования и выделяет те части веб-страницы, которые «особенно подходят для преобразования текста в речь».

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

 { "@context": "https://schema.org", "@type": "Review", "reviewBody": "It's breathless, explosive music, the kind of stuff that compels listeners to pick up an instrument or start a band. Origin of Symmetry listens like a spectacular jam — with all the unpolished, patchy, brazen energy that entails — and all in all it's pretty rad, man.", "datePublished": "2015-05-23", "author": [ { "@type": "Person", "name": "Andre Dack" }, { "@type": "Person", "name": "Frederick O'Brien" }, { "@type": "Person", "name": "Andrew Bridge" } ], "itemReviewed": { "@type": "MusicAlbum", "name": "Origin of Symmetry", "@id": "https://musicbrainz.org/release-group/ef03fe86-b54c-3667-8768-029833e7e1cd", "image": "https://alpha.audioxide.com/api/images/album-artwork/origin-of-symmetry-muse-medium-square.jpg", "albumReleaseType": "https://schema.org/AlbumRelease", "byArtist": { "@type": "MusicGroup", "name": "Muse", "@id": "https://musicbrainz.org/artist/9c9f1380-2516-4fc9-a3e6-f9f61941d090" } }, "reviewRating": { "@type": "Rating", "ratingValue": 26, "worstRating": 0, "bestRating": 30 }, "speakable": { "@type": "SpeakableSpecification", "cssSelector": [ ".review-header__album", ".review-header__artist", ".review-sidebar__summary" ] } }

Таким образом, если кто-то просит своего дому докладчика ассистента, какой аудиоксид мысли о происхождении симметрии муза, дурамируемая должна направлять его к имени альбома, художника и резюме размером с укусом обзора. Удобно и по делу. (И избавляет людей от необходимости слушать наши полные сводки.) Нет ничего, чего не было раньше; просто правильно помечено. Вы также заметите, что достаточно выбрать класс CSS. Легкий.

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

Помимо того, что большие мозги в таких местах, как Google и Mozilla, усердно работают над выделенной веб-речью API, что позволяет для более сложных взаимодействий пользователей с такими вещами, как формы и элементы управления. Это первые дни для таких технологий, но это то, за чем нужно следить.

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

Дальнейшее чтение

• Разговаривающие веб-приложения — введение в API синтеза речи
• Концепции веб-речи и использование Mozilla
• Что такое голосовые пользовательские интерфейсы? Фонд интерактивного дизайна

Писать для разговора

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

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

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

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

Что это означает в лингвистических терминах:

• лаконичные фразы,
• Обычный, простой язык,
• Предварительная загрузка информации (вспомните перевернутую пирамиду),
• Формулировка ответов в виде полных предложений.

Говорите то, что вы пишете вслух, пусть бесплатные системы преобразования текста в речь, такие как TTSReacher, ответят вам. Слова могут звучать вслух совсем иначе, чем на бумаге, и наоборот. У меня есть сомнения по поводу алгоритмов удобочитаемости, но они полезны для оценки ясности.

Дальнейшее чтение

• «Тестирование читабельности голосового контента» в списке отдельно
• Элементы стиля Уильяма Странка-младшего.

HAL, без плохих битов

Общение с веб-сайтами является частью более широкого перехода к независимому от канала веб-опыту. Природа веб-сайтов меняется. От настольных компьютеров к мобильным устройствам и от мобильных устройств к системам умного дома они становятся все более гибкими. Мы все знаем об индексации для мобильных устройств. Сколько времени осталось до «голоса в первую очередь»?

Уход от жестких ограничений пугает, но это также и освобождает. Мы смотрим на сайты, слушаем их, разговариваем с ними. Каждый из них подобен маленькому HAL, с таким количеством индивидуальности и/или убийственных намерений, которые мы считаем нужным в него вложить.

Вот шаги, которые мы можем предпринять, чтобы упростить общение с веб-сайтами, будь то создание с нуля или обновление старых проектов:

• Навигация по сайту с помощью программ чтения с экрана.
• Попробуйте голосовые запросы через телефон/домашних помощников.
• Используйте семантическую разметку.
• Реализуйте говорящую разметку.

Разработка веб-сайтов для безэкранных ситуаций улучшает их доступность, но также обостряет их индивидуальность, их цель и их полезность. Как пишет Престон Со для A List Apart , «это эффективный способ анализа и стресс-тестирования того, насколько ваш контент действительно независим от канала».

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