Обход сайта клавиатурой: что ломается в первую очередь

Доступность обычно обсуждают как отдельную большую работу с аудитом на сорок страниц. На практике 80% проблем видно за двадцать минут: нужно отложить мышь и пройти сайт клавишей Tab. Мы прогнали так двенадцать сайтов, которые вели в тот момент, — четыре поломки нашлись на одиннадцати из двенадцати.

Как мы проверяем

Сценарий один и тот же: с первого экрана дойти клавиатурой до заявки и отправить её. Только Tab, Shift+Tab, стрелки, Enter и Escape. Параллельно смотрим, видно ли, где сейчас фокус, и не уходит ли он в места, которых на экране нет.

Второй проход — с включённой экранной лупой на 200%, третий — с уменьшенной шириной окна до 320 px. Это не заменяет проверку скринридером, и мы честно говорим клиенту: полноценный аудит с NVDA и VoiceOver мы не делаем, для этого есть профильные специалисты. Но клавиатурный проход — обязательная часть приёмки любой нашей страницы.

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

Четыре поломки, которые встречаются всегда

Невидимый фокус

Кольцо фокуса убрано правилом, отключающим контур у всех элементов, и заменено ничем. Человек жмёт Tab и не понимает, где находится.

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

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

Ловушка в модальном окне

Окно открылось, фокус остался под ним, на странице снизу. Tab уводит по ссылкам, спрятанным за затемнением. Обратная ситуация тоже частая: фокус зашёл в окно и не выходит, Escape не закрывает.

Как поймать: открыть окно с клавиатуры и нажать Tab на один раз больше, чем в окне элементов. Фокус обязан вернуться на первый элемент окна, а не уехать на страницу под ним. Потом Escape: окно закрывается, и фокус встаёт на кнопку, которой его открыли. Если после закрытия фокус оказался в начале документа, весь путь до этой кнопки человек проходит заново.

Как чинится: на открытии фокус переводится в окно, на время показа обход ограничен его содержимым, Escape закрывает, на закрытии фокус возвращается на кнопку-источник. Четыре правила, и каждое проверяется тем же способом, каким было найдено.

Меню, которое раскрывается только по наведению

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

Как поймать: дойти Tab до пункта верхнего уровня, нажать Enter, потом стрелку вниз. Если подпункты не появились ни от того, ни от другого, для клавиатуры их нет. Второй шаг — то же касанием на планшете: первое касание должно раскрывать список, а не уводить со страницы.

Как чинится: раскрытие вешается на фокус и на нажатие, а не только на наведение. Если у пункта есть и своя страница, и подпункты, это два элемента рядом: ссылка на раздел и кнопка раскрытия. Совмещение их в одном элементе и даёт сразу обе поломки — и клавиатурную, и планшетную.

Кнопки, сделанные из ссылок и div-ов

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

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

Как чинится: кнопка становится кнопкой, ссылка — ссылкой. Это дешевле, чем дописывать к div-у роль, атрибут обхода и два обработчика клавиш, и не разъезжается при следующей правке вёрстки. Граница простая: ведёт на другой адрес — ссылка, меняет состояние на этой же странице — кнопка.

Сетка слотов: где это ломается на живом проекте

Четыре поломки выше — типовые, они находятся на первом же проходе. Интереснее там, где на экране не кнопка и форма, а сетка данных. В сети стоматологий мы делали расписание врача: выбор филиала, свободные слоты на две недели, запись без звонка администратору. Без звонка проходит 41% записей, то есть сетка слотов — не украшение экрана, а основной путь к заявке.

Сетка слотов ломает клавиатурный обход тремя способами.

• Каждый слот становится отдельной остановкой. Две недели расписания дают десятки нажатий Tab до нужного дня, и пропустить их нечем. Лечится тем, что вся сетка становится одной остановкой, а внутри перемещение идёт стрелками, как в любой таблице с выбором.
• Занятые слоты. Если сделать их заблокированными кнопками, они выпадают из обхода: быстрее, но человек не понимает, почему во вторник тишина. Мы оставляем занятое время в обходе с текстовой пометкой, что оно занято, — это данные, а не декорация.
• Смена филиала перерисовывает сетку. В этот момент фокус теряется проще всего: элемент, на котором он стоял, исчезает вместе со старой разметкой, и человек оказывается в начале документа. Правило — после перерисовки фокус ставится на осмысленный элемент, а число свободных слотов сообщается текстом, а не только видом сетки.

Каждый слот подписан временем: «10:30». Тому, кто видит колонку дня целиком, этого хватает. Тому, кто получает одну ячейку, подпись обязана сообщать и дату. Принцип тот же, что с цветом: если смысл держится только на положении элемента, для части людей смысла нет.

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

Порядок обхода и скрытые поля

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

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

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

Сколько это стоит

На средний сайт из десяти шаблонов исправление четырёх типовых поломок занимает от шести до двенадцати часов. Это меньше, чем один раунд правок дизайна, и это единственная работа по доступности, которая окупается сразу: клавиатурой пользуются не только люди с нарушениями зрения, но и все, кто заполняет форму быстро.

Дешевле всего делать это, когда вёрстка и так переписывается. Редизайн без смены адресов — ровно тот момент, когда шаблоны открыты и кольцо фокуса, роли элементов и порядок обхода правятся заодно. Отдельной работой «починить доступность» те же часы стоят дороже: половина уходит на то, чтобы разобраться в чужих шаблонах.

Мы не обещаем соответствие WCAG уровня AA по итогам такой проверки — это другой объём и другие деньги. Мы обещаем, что заявку можно отправить с клавиатуры, а фокус видно на каждом шаге.