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