Содержание · 9
Контраст, размеры целей, клавиатурная навигация, альтернативный текст. Разбираем базовые требования и то, как проверить их без специальных знаний.
Доступность — это не про меньшинство
Требования доступности выглядят как забота об узкой группе, но на практике улучшают интерфейс для всех: контрастный текст читается на солнце, крупные кнопки удобнее в транспорте, клавиатурная навигация ускоряет работу опытных пользователей.
Кроме того, во многих юрисдикциях доступность цифровых сервисов регулируется законодательно.
Контраст
Минимальные требования: 4,5:1 для основного текста и 3:1 для крупного текста и графических элементов вроде иконок и границ полей.
Самая частая ошибка — светло-серый вторичный текст на белом фоне. Он выглядит элегантно в макете и нечитаем на реальном экране при ярком свете.
Клавиатура
Всё, что можно сделать мышью, должно быть доступно с клавиатуры. Проверяется за минуту: пройдите по странице клавишей Tab и убедитесь, что видно, где вы находитесь, и порядок обхода логичен.
Убранная обводка фокуса — самая распространённая и самая вредная «оптимизация» дизайна.
- Видимый focus-visible на всех интерактивных элементах.
- Логичный порядок обхода, совпадающий с визуальным.
- Возможность закрыть модальное окно клавишей Escape.
- Фокус не уходит за пределы открытого модального окна.
- Ссылка «к содержанию» в начале страницы.
Размеры и расстояния
Минимальный размер цели касания — 44 × 44 пикселя с зазором не меньше 8 пикселей между соседними. Это касается и десктопа: точность мыши выше, но у людей с тремором она не помогает.
Как проверить самому
Полный аудит требует специалиста, но базовые проблемы находятся за десять минут без инструментов.
- Пройдите страницу клавишей Tab от начала до конца.
- Увеличьте масштаб до 200% — вёрстка не должна ломаться.
- Отключите изображения — понятен ли смысл.
- Проверьте контраст пипеткой в любом онлайн-калькуляторе.
- Прочитайте страницу вслух по заголовкам — есть ли структура.
Пройдите свою страницу одной клавишей Tab от начала до конца. Половина проблем доступности обнаружится за минуту.
Что чаще всего ломают из лучших побуждений
- Убирают рамку фокуса, потому что она «портит вид»: интерфейс становится непроходимым с клавиатуры.
- Ставят светло-серый текст на белом — контраст 2,7 при минимуме 4,5.
- Делают ссылку из слова «здесь»: в списке ссылок, который читает диктор, все они называются одинаково.
- Передают смысл одним цветом: красная и зелёная строки без подписи различаются не для всех.
- Отключают масштабирование на телефоне, чтобы вёрстка не ехала.
- Пишут в alt название файла или порядковый номер — это не описание.
Что слышит программа чтения с экрана
Скринридер читает не то, что нарисовано, а то, что написано в разметке. Кнопка, сделанная из div с обработчиком, для него не кнопка: её не объявят, на неё не встанет фокус, и нажать пробелом не выйдет. Отсюда правило, которое закрывает большую часть проблем: пользоваться теми элементами, которые для этого существуют, — button, a, input, label — и не воспроизводить их поведение вручную.
Второе — порядок и имена. Диктор идёт по документу сверху вниз, поэтому визуальная перестановка колонок стилями меняет то, что он читает первым. Заголовки для него оглавление: по ним прыгают, как зрячий прыгает глазами, и пропущенный уровень ломает эту навигацию. Ссылка объявляется своим текстом, поэтому «здесь» и «подробнее» в списке ссылок превращаются в ряд одинаковых пунктов.
Модальные окна и фокус
- Открывая модальное окно, фокус переводят внутрь него, а закрывая — возвращают на элемент, который его открыл.
- Фокус-ловушка обязательна: за пределы открытого окна Tab уходить не должен, иначе человек ходит по странице, которой не видит.
- Escape закрывает окно всегда — это единственная клавиша, которую ждут все.
- Содержимое под окном скрывают от диктора атрибутом, а не только визуально: иначе он читает две страницы сразу.
- Анимация появления не должна задерживать фокус: он переносится сразу, а не по окончании перехода.
Что в итоге
Базовая доступность — это контраст 4,5:1, видимый фокус, цели от 44 пикселей и смысл, не зависящий от цвета.
Проверить основное можно за десять минут клавишей Tab и увеличением масштаба до 200%.
Коротко
- С чего начать, если о доступности не думали вообще?
- С трёх вещей: контраст текста не ниже 4,5:1, возможность пройти весь сценарий с клавиатуры и осмысленные подписи у элементов. Это закрывает большую часть проблем и не требует переделки интерфейса.
- Достаточно ли цвета, чтобы показать ошибку?
- Нет. Цвет не воспринимает часть людей, и он пропадает при печати и на плохом экране. Ошибку показывают цветом, значком и текстом одновременно.
Документация системы
Большая часть документации дизайн-систем не читается. Разбираем, какие разделы действительно нужны и как оформлять правила, чтобы им следовали.ДальшеЧитайте также
Посмотреть примеры
Нашли ошибку или неточность в атрибуции? Напишите нам
Обсуждение
Загружаем…