Accessibility *

Новый интерфейс карт Яндекс и глухонемой водитель.

Сегодня мой заказ на такси выполнял глухонемой водитель. Тут только Яндекс выкатил повсеместно новый интерфейс карт и, по горячим следам, можно было наблюдать за тем, как же он непривычен профессиональным пользователям. Такие пользователи стали чаще увеличивать карту на экране по ходу движения, потому что указания видимо стали другими. Не могу сам сравнить с привычными звуковыми указаниями на этом регулярном для меня маршруте потому, что звуковое сопровождение команд отключено, есть только индикации "не забудьте пристегнуться" и "не забудьте свои вещи".

Первый указанный навигатором поворот, под немного острым углом, водитель пропустил. Вероятно из-за нового показа серых дорог с разбивкой полосами. Перед вторым поворотом и далее очень вглядывался в новый интерфейс, увеличивая масштаб pinch-to-zoom жестом.

Кажется, что процесс, описанный @kefiijrw в итоговой статье про выкатку нового интерфейса, не включал расширенное тестирование на некоторых специальных группах, для которых критически важна доступность интерфейса.

Изменения привычных цветов для тех, кто ориентируется только визуально, критически влияет на комфорт и безопасность. Поэтому резко менять, без переходного периода, как-то слишком оптимистично. В телефонии, например, тянут поддержку древних TTY релеев, потому что есть US Rehab Act Chapter 508 и попробуй ему не соответствовать принято думать о поддержке наработанного пользовательского опыта

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

Привет, Хабр! 👋 Сегодня говорим про

WCAG и подбор цветов: когда можно сделать исключения и как это влияет на доступность проекта

При проектировании интерфейсов важно учитывать доступность (a11y) и следовать Web Content Accessibility Guidelines (WCAG). Однако иногда возникают ситуации, когда строгие требования контрастности могут мешать эстетике или логике интерфейса. Сегодня разберём, когда можно делать исключения и как это влияет на UX.

Как WCAG регулирует цвет и контраст

WCAG (Web Content Accessibility Guidelines) — набор рекомендаций, который делает цифровые продукты доступными для людей с ограничениями зрения. Основные требования:

✅ Минимальный контраст текста к фону: 4.5:1 для обычного текста и 3:1 для крупного (AAA — 7:1 и 4.5:1 соответственно).

✅ Элементы интерфейса должны иметь контраст 3:1 относительно фона.

✅ Информация не должна передаваться только через цвет (например, ошибки должны сопровождаться иконкой или текстом).

Но есть ситуации, когда эти правила можно гибко адаптировать.

Когда можно отступить от строгих требований?

1. Дизайн под слабовидящих пользователей Если аудитория вашего продукта — пользователи с нарушениями зрения, они часто используют персонализированные настройки контраста и цвета. В таком случае важно дать им возможность адаптировать интерфейс (например, смена темы, поддержка high contrast mode в OS).

2. Декоративные элементы Если текст является неинтерактивным и несёт лишь декоративную нагрузку, требования к контрасту могут быть мягче. Например, логотипы брендов или фоновые иллюстрации не обязаны соответствовать 4.5:1.

3. Темные интерфейсы (Dark Mode) В тёмных темах контрастность воспринимается иначе. Чрезмерный контраст (белый текст на чёрном фоне) может быть утомительным. В таких случаях допускается снижение контраста для улучшения читабельности.

4. Ультраминималистичные интерфейсы В проектах, где важно сохранить чистоту композиции, можно снижать контраст для вторичных элементов, если это не мешает пользователю ориентироваться.

5. Игровые и мультимедийные продукты Если цвет является частью художественного замысла (например, в видеоиграх или анимации), строгий контраст может испортить атмосферу. Но в таких случаях лучше давать альтернативные режимы или настраиваемую палитру.

Как сделать интерфейс доступным даже при отклонениях от WCAG

💡 Добавьте альтернативные способы восприятия информации — используйте иконки, текстовые метки, контуры для важных элементов.

🎨 Тестируйте цвета на симуляторах дальтонизма — инструменты вроде Stark или встроенные в Figma помогают оценить восприятие цветов разными группами пользователей.

🔄 Позвольте пользователю выбрать контрастную тему — динамические настройки темы решают множество проблем.

📊 Проводите тестирование с реальными пользователями — иногда теоретически допустимый цвет в реальности оказывается плохо читаемым.

Итоги

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

Где почитать:
Самый полный гайд по контрастности интерфейсов от DSGNERS
Про инклюзивность и доступность от AGIMA на Хабре
Руководство по доступности контента от WCAG

До связи 🤝