Я включил скринридер на собственном сайте и не смог найти кнопку покупки. Кнопка была на месте, свёрстана ровно так, как задумывалось. Но программа прочитала её как «кнопка» — без подписи, без контекста, бесполезно.
Магазин не сломался. «Технически работает» и «работает для человека, который реально им пользуется» — это разные вещи. И разница вскрывается, только когда перестаёшь проверять сайт своими глазами.
Почему свои глаза не подходят
Гайдлайны по доступности я читал не раз. Знал правила про альтернативный текст, контраст, порядок заголовков. Но знал абстрактно, как знаешь правило, которое никогда не пробовал на своей работе. Однажды я включил скринридер, закрыл глаза и попытался купить что-то в собственном магазине так, как это делает незрячий посетитель.
Полминуты я слушал бессмысленное перечисление элементов. Заголовок, над которым я сидел полдня, оказался пропущен: он жил внутри фоновой картинки, а не в разметке. В карточке товара скринридер прочитал цену и проскочил название — порядок элементов в HTML имел смысл для глаз, а не для линейного чтения. Ничего драматичного, ничего не упало. Просто «готово» и «готово для пользователя» — снова не совпали.
Самое неприятное — понять, что этот разрыв сидел на виду давно. Каждая секция, которую я выпустил, прошла проверку моими глазами, мышкой, привычками. Но не прошла проверку инструментом, который зависит от структуры, а не от картинки.
Пять проверок, которые занимают меньше пяти минут
Исправления, когда я понял, что искать, оказались быстрыми. Ничего не пришлось перестраивать. Нужно было просто проверять конкретные вещи до того, как секция уедет в прод.
1. Контраст
Самый механический пункт. Текст должен читаться на фоне не только на моём калиброванном мониторе, а и на телефоне под солнцем. Каждую новую пару цветов я прогоняю через чекер. Пара, которая отлично выглядит на рабочем столе, проваливала проверку не раз. Исправление — один оттенок, а не редизайн.
2. Фокус-состояния
Пройдитесь по странице табом, убрав руку с мыши. Если не видно, где вы находитесь, значит для части людей сайта просто нет. Я раньше убирал дефолтную обводку, потому что она портила дизайн. Это одна строка кода. И одна из самых частых ошибок на вебе.
3. Порядок заголовков
Страница должна читаться как оглавление: один H1, дальше H2 по порядку, без прыжков через уровень. Пользователи скринридера часто навигируют по заголовкам. Сбитый порядок ломает навигацию, даже если визуально иерархия выглядит безупречно.
4. Метки полей
Плейсхолдер внутри пустого поля выглядит как подпись — он занимает то же место. Но он исчезает при вводе и не связан с полем для скринридера. Форма, которая выглядит подписанной, превращается в набор безымянных полей. Лечится настоящей меткой, связанной с полем, — видимой или скрытой.
5. Альтернативный текст
Здесь у меня было больше всего ошибок. Раньше я писал альт-текст как SEO-ключ: «чёрная худи спереди». Технически верно, бесполезно. Худи продаётся не потому, что она чёрная. Альт-текст должен описывать смысл, а не содержимое. И пустой alt для декоративных картинок — нормальная практика, чтобы скринридер не зачитывал мусор.
Таблица: как ошибки выглядят со стороны
| Ошибка | Что видит зрячий | Что происходит для пользователя скринридера |
|---|---|---|
| Кнопка без метки | Аккуратная кнопка «Купить» | «Кнопка» — непонятно, что это |
| Заголовок в картинке | Красивый hero-блок | Заголовок пропущен, читается только «Изображение» |
| Неправильный порядок заголовков | Визуально стройная страница | Навигация по заголовкам прыгает, структура теряется |
| Поле с плейсхолдером вместо метки | Понятная форма | «Безымянное поле» — непонятно, что вводить |
| Альт-текст «чёрная худи» | Нормальная картинка | «Чёрная худи» — без деталей, решение о покупке принять нельзя |
Как встроить проверку в процесс
Главный урок — не отдельные фиксы, а порядок. Проверка после релиза пропускается в первую же неделю дедлайна. Проверка, которая живёт только в памяти, проигрывает всем остальным задачам. Поэтому я перенёс её в шаблон секции, туда же, где лежит основной чек-лист релиза. Теперь ни одна секция не выходит без пяти минут проверки: контраст, таб, порядок заголовков, метки, альт-текст.
Рядом с шаблоном я держу печатный список. Как пилот — чек-лист, который не полагается на память. Список не устаёт, не торопится и не считает, что уже всё знает. Пробежать его глазами можно за минуту. Это и есть весь смысл.
Проверка до публикации ловит проблему, когда она стоит дёшево: один цвет или одна строчка разметки. Та же проблема после публикации, когда на неё натыкается реальный пользователь, стоит человеку опыта. Это разные цены, и путать их — ошибка под ошибкой.
Главное
Две минуты, которые я потратил на поиск кнопки со скринридером, сказали о «готово» больше, чем любой дизайн-ревью. Секция, которая выглядит правильно, но читается неправильно, не готова. Она выглядит готовой только для того, кто и так знает, где что лежит.
Контраст, фокус, порядок заголовков и осмысленный альт-текст — не отдельный проект доступности. Это часть обычного релизного чек-листа. Инструмент, которым не может пользоваться человек, — не урезанная версия инструмента. Это другой инструмент, и работает он только для тех, кто двигается по странице так же, как вы. Делать удобно для тех, кто двигается иначе, — не бонус. Это и есть работа.
Fluxs
Комментарии (2)
Войдите, чтобы комментировать.