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