Маленькая иконка без подписи ведёт к карточке приложения — но куда нажать, поймут не все. Меню, которое открывается только при наведении мыши, не сработает при управлении с клавиатуры и создаст трудности на сенсорном экране. Такие препятствия закладываются ещё при выборе структуры страницы и поведения элементов. После запуска исправлять их сложнее.
Что означает доступность для сайта об Android
На доступном сайте человек может найти информацию и выполнить нужное действие независимо от того, как он воспринимает страницу и управляет устройством. Кто-то увеличивает текст, кто-то пользуется экранным диктором, а кто-то выбирает ссылки с клавиатуры. На Android есть также системное увеличение, голосовое управление и настройка размера шрифта. Удобство заметно и без вспомогательных средств: по крупной кнопке проще попасть на ходу, а ясный заголовок легче найти на небольшом экране.
Отдельная «упрощённая версия» для этого не нужна. Продуманные заголовки, подписи и элементы управления должны работать на основном сайте. В обзоре игры, например, читателю важно быстро найти требования к устройству, описание игрового процесса и изменения версии. Если всё собрано в одном длинном блоке или разделы различаются только цветом, искать нужное становится трудно.
Почему планирование дешевле переделки
Доступность зависит от решений всей команды. Редактор задаёт порядок информации, дизайнер выбирает контраст и состояния кнопок, разработчик отвечает за разметку и поведение интерфейса. Если о требованиях вспоминают перед публикацией, может обнаружиться, что готовый компонент не открывается с клавиатуры, а в карточке нет места для понятного названия. Исправлять придётся уже шаблон, дизайн и страницы, где он используется.
С повторяющимися элементами это особенно ощутимо: ошибка в шаблоне карточки разойдётся по всему каталогу. Лучше проверить одну карточку до массового наполнения и сразу предусмотреть поля для названия, назначения, версии, совместимости и понятного текста ссылки. Дальнейшее тестирование всё равно понадобится, зато ошибку не придётся устранять на десятках страниц.
Что предусмотреть до дизайна и разработки
Сценарии посетителей
Начните с задач, а не с перечня нарушений зрения или моторики. Читателю нужно найти приложение, проверить совместимость со своим устройством, посмотреть скриншоты, узнать об обновлении и перейти к официальному источнику установки. Для каждого шага спросите: можно ли выполнить его без мыши, при увеличенном тексте и не различая цвета?
Так проще расставить приоритеты. Если минимальная версия Android указана только на изображении, экранный диктор её не прочитает, а при масштабировании надпись может стать нечёткой. Разместите сведения о совместимости текстом в предсказуемом месте. Если данных нет, не подменяйте их догадкой: точность информации здесь не менее важна, чем её оформление.
Структура и словарь интерфейса
На схеме страниц заранее задайте основные разделы и порядок заголовков. Заголовок страницы обозначает тему, подзаголовки отделяют требования, функции и изменения версий. Читатель сможет просмотреть материал глазами или перейти к нужному разделу средствами экранного диктора.
Название элемента должно объяснять действие или место назначения. Если рядом несколько одинаковых кнопок, «Открыть сведения о совместимости» понятнее, чем «Подробнее». Иконке поиска нужна доступная подпись «Поиск». А декоративную иконку рядом с текстом кнопки не стоит озвучивать повторно. Согласуйте такие названия до того, как компонент появится на десятках страниц.
Контент, который не зависит от картинки или цвета
Скриншот помогает показать интерфейс приложения, но не должен быть единственным источником важных сведений. Если на нём видна настройка тёмной темы, упомяните функцию и в тексте. Для содержательного изображения подготовьте краткое альтернативное описание; декоративному оно не нужно. Подпись под картинкой видят все, а альтернативный текст передаёт её содержание тем, кто не видит изображение.
Не полагайтесь и на один цвет. Статус совместимости лучше обозначить словом «совместимо», а не только зелёной меткой. При ошибке формы напишите рядом с полем «Введите адрес электронной почты» вместо одной красной рамки. Сообщение останется понятным при нарушениях цветовосприятия и плохом освещении.
Какие решения заложить в интерфейс
В макете покажите, как элементы выглядят не только в обычном состоянии, но и при наведении, нажатии и получении фокуса. Видимый индикатор фокуса помогает человеку с клавиатурой понять, где он находится. Порядок переходов должен соответствовать порядку меню, поиска и форм на странице. Если всплывающее окно перекрывает работу, его нужно уметь закрыть понятным способом.
- Текст и масштаб. Проверьте, остаются ли заголовки, кнопки и карточки читаемыми при увеличении текста. Важные действия не должны уходить за край экрана или перекрываться другими элементами.
- Контраст. Светло-серую подсказку на белом фоне бывает трудно прочитать. Контраст текста, кнопок и индикатора фокуса лучше измерять, а не оценивать на глаз.
- Области нажатия. Значкам и ссылкам нужны достаточный размер и расстояние друг от друга: на телефоне трудно попасть пальцем в маленькую цель.
- Предсказуемые действия. Кнопка запускает действие, ссылка ведёт на другую страницу. Окна, которые открываются сами, и содержимое, меняющееся без предупреждения, сбивают с толку.
- Формы. Полям нужны видимые подписи и понятные сообщения об ошибках. Подсказка внутри пустого поля исчезает, как только человек начинает вводить текст.
При составлении требований можно опираться на рекомендации WCAG, но одной ссылки на стандарт недостаточно. Запишите проверяемые условия: «меню открывается с клавиатуры», «ошибка формы названа текстом», «при увеличении текста кнопка остаётся доступной».
Как проверять доступность на Android
Проверка на компьютере не выявит все проблемы мобильной страницы. На Android посмотрите, что происходит при увеличении системного шрифта и масштаба отображения. Затем пройдите основной сценарий с экранным диктором TalkBack: откройте меню, найдите обзор, прочитайте требования к устройству, воспользуйтесь поиском. На слух быстро обнаруживаются кнопки без названий, неясные ссылки и заголовки, за которыми трудно угадать содержание раздела.
Проверьте и управление без точных жестов. Внешняя клавиатура или другой способ последовательного выбора элементов поможет найти недоступные пункты меню и места, где фокус застревает. Для видео с важной речью нужны субтитры, для аудиоматериала — текстовая альтернатива. Если видео лишь повторяет текстовую инструкцию, укажите это рядом с ним.
Автоматические инструменты находят часть технических ошибок, например отсутствие подписей или недостаточный контраст. Но они не скажут наверняка, передаёт ли альтернативный текст важную деталь скриншота и понятен ли порядок действий. Сопоставляйте результаты таких проверок с ручным прохождением страниц, по возможности на настоящем телефоне.
Как закрепить требования в работе сайта
После запуска сайт продолжает меняться, и новые материалы легко нарушат уже проверенные правила. Добавьте в редакционный шаблон поля для альтернативного текста, совместимости и описания изменений версии. В библиотеке компонентов сохраните проверенные кнопки, поля форм и состояния фокуса. Перед выпуском нового шаблона пройдите типовые страницы: каталог, карточку приложения, статью и поиск.
Полная переработка нужна не всегда. Если диктор объявляет три ссылки «Скачать» в карточках разных приложений, сначала добавьте в названия ссылок названия самих приложений. Затем откройте список ссылок в экранном дикторе и проверьте, понятна ли каждая без текста карточки.