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