Доступность сайта: как проверить чтение, навигацию и формы без специальных знаний

Сначала выберите действие, которое нельзя потерять

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

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

Ориентиром служит WCAG 2.2 — рекомендации W3C по доступности веб-контента. Короткая самопроверка выявляет отдельные препятствия, а заявление о соответствии всем критериям требует более широкого обследования.

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

Пройдите меню и форму без мыши

Пользователь клавиатуры тоже выбирает услугу. Уберите мышь и попробуйте дойти до формы последовательными нажатиями Tab. Обратное движение обычно выполняется сочетанием Shift+Tab.

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

Ловушку видно по выходу. Из раскрытого меню или окна человек может продолжить движение и вернуться к странице, не перезагружая её и не включая мышь.

• Достижимость: Tab доводит до кнопки открытия меню и до отправки формы.
• Действие: ссылка или кнопка выполняет своё назначение с клавиатуры.
• Выход: после закрытия окна можно продолжить работу.
• Порядок: фокус не уходит на скрытые элементы.

Где находится текущая кнопка?

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

В WCAG этому посвящён критерий 2.4.7 Focus Visible. Требование можно найти в тексте стандарта. Наличие рамки на первом поле ещё ничего не говорит о меню и кнопке закрытия окна, поэтому путь стоит пройти целиком. Посмотрите также, не закрывает ли отметку закреплённая панель: при прокрутке человек может достичь ссылки, но увидеть только шапку поверх неё. Для замечания полезен снимок в момент остановки, где показан и элемент, и перекрывающий его блок. Если отметка видна только после дополнительной прокрутки мышью, запишите обе ситуации: разработчику нужно сохранить видимость выбранного действия при последовательном движении клавиатурой по всей странице сайта, включая те элементы, которые появляются после раскрытия меню.

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

• Отметка различима на светлом и тёмном фоне.
• При раскрытии меню видно активное управление.
• Закреплённая шапка не скрывает выбранную ссылку.
• После закрытия окна внимание возвращается в понятное место.

Подписи и ошибки объясняют, что делать

Исчезающая подсказка внутри поля плохо хранит смысл вопроса. После ввода имени посетитель всё ещё видит, как называется поле и что от него ожидается.

Критерий 3.3.2 в WCAG относится к подписям и инструкциям при вводе. Ошибкам посвящён критерий 3.3.1. Для ручной оценки оставьте обязательное поле пустым и посмотрите, называет ли сообщение место проблемы, вместо общего красного предупреждения, после которого приходится искать ошибку самостоятельно. Если формат ограничен, объяснение стоит дать до отправки. Точное сообщение позволяет продолжить работу, а не гадать, какие символы сайт считает допустимыми. Для замечания лучше переписать сообщение полностью и указать поле, в котором оно появилось, чтобы исполнитель мог оценить понятность объяснения, а редактор предложить более точную формулировку, сохранив связь сообщения с действием человека и причиной отказа.

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

Бледная надпись требует измерения

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

Для обычного текста критерий 1.4.3 WCAG задаёт отношение контраста не менее 4,5:1. Для крупного текста действует порог 3:1. Размер и начертание влияют на то, какое правило применимо, поэтому специалисту передают и сочетание цветов, и сведения о шрифте. Цвет, взятый из макета, может отличаться от итогового цвета на странице после прозрачности или наложения изображения. Измерять нужно то сочетание, которое действительно видит посетитель. Если фотография меняется в слайдере, читаемость подписи стоит оценить на каждом фоне, потому что удачное сочетание на первом снимке может превратиться в бледную надпись на следующем.

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

• Основной текст читается на фактическом фоне.
• Подсказки не исчезают из-за светлого оттенка.
• Ошибка имеет словесное объяснение.
• Ссылка узнаётся по отчётливому оформлению, которое сохраняет смысл без различения оттенков.

Увеличьте текст и повторите действие

Крупный текст обнажает ограничения вёрстки. Подпись выходит из кнопки, окно закрывает отправку, а сообщение об ошибке обрезается по высоте.

Требование увеличения текста из WCAG предусматривает увеличение текста до 200% без потери содержания и функций, кроме перечисленных в нём исключений. После увеличения на сайте услуг посетитель видит подпись целиком и может завершить обращение: именно так становится понятно, что новый размер букв сохранил возможность работать с формой. Повторите заполнение и откройте сообщение об ошибке. Уместившийся заголовок не спасает форму, если её нижняя кнопка осталась за пределами недоступной прокрутки. Масштаб увеличивают заранее, до раскрытия окна, чтобы увидеть не только перестроение уже открытой формы, но и доступность самого перехода к ней с основной страницы описания услуги.

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

• Текст кнопки не перекрывается и не пропадает.
• Сообщение об ошибке видно целиком.
• Окно допускает прокрутку до последнего действия.
• Увеличение не убирает доступ к меню.

Изображение и видео тоже передают смысл

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

Для нетекстового содержимого WCAG содержит критерий 1.1.1. Он требует текстовой альтернативы с исключениями для отдельных видов материалов. Назначение этого правила описано в стандарте W3C. У смыслового изображения текст передаёт нужную посетителю информацию, а у декоративного рисунка нет самостоятельного сообщения. Не стоит автоматически копировать имя файла: оно редко объясняет, что изображение добавляет к предложению услуги. Если на рисунке показано ограничение или различие вариантов, текстовое объяснение сохраняет именно это различие, позволяя выбрать услугу без необходимости рассматривать изображение и угадывать смысл подписи, которая может описывать общий сюжет и не сообщать существенное условие выбора.

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

• Сведения из изображения доступны и текстом.
• Сложную схему сопровождает объяснение.
• Условия услуги не спрятаны только в видео.
• Значок без подписи имеет понятное назначение при доступном чтении.

Соберите препятствия в одну карту

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

Рабочая запись выглядит так: «Страница услуги, форма обращения. После перехода клавишей Tab к кнопке отправки отметка фокуса скрыта закреплённой панелью. Ожидается видимая кнопка и возможность продолжить ввод». Такой образец сообщает задачу и препятствие, не предписывая разработчику случайный способ исправления, который может сломать соседние элементы. При необходимости приложите снимок и название браузера. После правки повторяют тот же путь, чтобы оценить именно найденную проблему. Замечание закрывают после возвращения к исходному состоянию страницы: описанное препятствие исчезло, а соседние ссылки, поля и кнопки по-прежнему доступны человеку, который пользуется выбранным способом управления.

Самопроверка заканчивается повтором действия. Если без мыши удаётся выбрать услугу, прочитать подписи и исправить ошибку при увеличенном тексте, перечисленные препятствия сняты, а для полной оценки доступности остаётся работа специалиста с более широким набором критериев.

• Для каждого замечания указана страница и состояние.
• Описано действие посетителя.
• Названо препятствие и его последствие.
• Сформулирован ожидаемый результат.
• Повтор после исправления сохранён рядом с замечанием.