Недооценённая аудитория: Как сделать сайты удобными для людей с инвалидностью

Около 15% людей в мире живут с инвалидностью, а это более миллиарда человек. Если вы не учитываете их потребности при разработке продуктов, вы их теряете. Когда разработчики Google Primer обратились ко мне за консультацией по улучшению сайта и приложения, я решила не допускать этих ошибок. Всего есть 4 основные категории: инвалидность по зрению, по слуху, физическая и психическая. Работая над сайтом и приложением Google Primer, я учитывала их все.

Спустя несколько месяцев работы команда Primer представила усовершенствованные сайт и приложение. Теперь я хочу поделиться основными рекомендациями.

1. Сделайте контент удобным для восприятия

Обычно на сайтах очень много контента: подробности о товаре, инструкции, новости, статьи. Но это всё пригодится только тем, кто сможет найти эту информацию и использовать ее. Удобство восприятия во многом зависит от контрастности. Приложение и сайт Primer мы специально сделали довольно контрастными, чтобы текст выделялся на фоне. При этом мы пользовались Material Design для работы с цветом.

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

Google Primer

2. Добавьте разные варианты навигации

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

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

Google Primer

3. Подключите поддержку других сервисов и технологий

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

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

Google Primer

4. Тестируйте всё и всегда 

Инструменты для тестирования помогут определить, что ещё стоит изменить. Получить отчет по сайту можно с помощью расширений для браузера. Например, Lighthouse для Google Chrome проводит около 30 тестов на специальные возможности. Если что-то не так, вы получите рекомендации по устранению неполадок. Для мобильных устройств я рекомендую приложение Accessibility Scanner. Инструменты — не панацея, поэтому обязательно тестируйте элементы вручную. Понаблюдайте, как люди работают с вашим приложением или сайтом. Тестируйте функции во время разработки, а не когда уже всё готово. Проверка на каждом этапе поможет вовремя остановиться, если где-то допущена ошибка.

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

Чтобы узнать о том, как создавать сайты и приложения с поддержкой специальных возможностей, скачайте бесплатное приложение Primer и выполните в нем поиск по запросу «accessibility».

A/Б-тестирование сайтов: как это работает