Сегодня речь пойдет о доступности в дизайне, или, как ее часто называют в профессиональных кругах, a11y (почему так – расскажу чуть позже, это маленькая хитрость!).
Представьте на секунду:
- Вы пытаетесь разглядеть экран смартфона под ярким солнцем.
- Вы сломали правую руку и теперь вынуждены пользоваться мышкой левой (или вообще только клавиатурой).
- Вы сидите в шумном кафе и не можете расслышать звук уведомления.
- У вас временно ухудшилось зрение после визита к офтальмологу.
Знакомые ситуации? В такие моменты мы все немного ощущаем на себе, что такое ограничения. А теперь представьте, что для многих людей подобные или гораздо более серьезные ограничения – это часть повседневной жизни.
Вот доступность (accessibility) как раз о том, чтобы создавать продукты – сайты, приложения, любые цифровые сервисы – которыми могли бы комфортно пользоваться все люди, независимо от их физических, сенсорных или когнитивных особенностей, а также независимо от ситуативных ограничений.
Наша цель сегодня – развеять мифы о сложности доступности и показать, что это не какая-то "фича для избранных", а фундаментальная часть хорошего, человечного дизайна. И начать делать шаги в этом направлении можно (и нужно!) с самого начала своего пути в UX/UI.
Что такое доступность на самом деле?
Итак, a11y – это просто сокращение от английского слова "accessibility": буква "a", затем 11 пропущенных букв, и буква "y". Но что за этим стоит?
Доступность охватывает потребности людей с самыми разными особенностями:
- Зрительными: от полной слепоты (когда люди пользуются программами чтения с экрана – скринридерами) до слабого зрения, дальнозоркости, близорукости или особенностей цветовосприятия (дальтонизма).
- Слуховыми: от полной глухоты до частичной потери слуха.
- Моторными (двигательными): трудности с использованием мыши или клавиатуры из-за ограниченной подвижности рук, тремора, паралича.
- Когнитивными: особенности обучения, дислексия, синдром дефицита внимания и гиперактивности (СДВГ), расстройства аутистического спектра.
Но, как мы уже поняли из примеров выше, доступность важна не только для людей с постоянными ограничениями здоровья. Она помогает:
- Людям с временными ограничениями: сломанная рука, потерянные очки, ушная инфекция.
- Людям в определенных ситуациях: использование смартфона на ходу одной рукой, плохой интернет, шумное окружение, слишком яркий или тусклый свет.
- Пожилым людям, у которых могут естественным образом меняться зрение, слух и моторика.
Простая аналогия: Вспомните пандусы и лифты в зданиях. Изначально их устанавливали для людей на инвалидных колясках. Но по факту ими с удовольствием пользуются мамы с колясками, пожилые люди, которым тяжело подниматься по лестнице, путешественники с тяжелыми чемоданами и даже велосипедисты. Точно так же и в цифровом мире: дизайн, сделанный с учетом доступности, в итоге оказывается удобнее для всех.
Почему доступность – это не "для галочки", а суперважно?
- Это просто по-человечески правильно (этика): Каждый человек заслуживает равного доступа к информации и возможностям, которые предоставляет интернет. Инклюзивный дизайн – это проявление уважения и заботы.
- Вы расширяете свою аудиторию: По статистике Всемирной организации здравоохранения, более 1 миллиарда человек в мире (это около 15-20% населения!) живут с той или иной формой инвалидности. Делая свой продукт доступным, вы открываете его для огромного количества потенциальных пользователей. А это, в свою очередь, может быть выгодно и для бизнеса.
- Вы улучшаете UX для всех без исключения: Многие практики, направленные на повышение доступности, делают интерфейс в целом более качественным, понятным и удобным для абсолютно любого пользователя. Четкая структура, хороший контраст, понятные тексты – это оценят все.
- Это становится нормой (иногда и законом): Во многих странах принимаются законы, обязывающие делать цифровые ресурсы доступными, особенно в государственном секторе и крупных компаниях. Знание принципов доступности – это плюс к вашей профессиональной ценности.
- Это хорошо для репутации вашего бренда: Компания, которая заботится о доступности своих продуктов, демонстрирует социальную ответственность и вызывает больше доверия.
"Но я же только начинаю!" – Простые первые шаги к доступному дизайну
Многим новичкам кажется, что доступность – это что-то невероятно сложное, требующее глубоких технических знаний. Да, есть очень продвинутые аспекты, но начать можно с очень простых и понятных вещей, которые уже принесут огромную пользу. Вот ваш стартовый набор:
1. Контраст – всему голова!
- Проблема: Текст плохо читается, если он сливается с фоном. Это особенно критично для людей с ослабленным зрением или особенностями цветовосприятия.
- Решение: Убедитесь, что между цветом текста и цветом фона достаточный контраст. Существуют специальные стандарты (например, WCAG – Web Content Accessibility Guidelines), которые рекомендуют определенные коэффициенты контрастности. Но для начала просто воспользуйтесь онлайн-инструментами для проверки контраста (их много, просто вбейте в поиск "contrast checker"). Стремитесь хотя бы к уровню AA по WCAG для основного текста.
Простой тест: Если вам самому приходится щуриться, чтобы прочитать текст, – контраст, скорее всего, недостаточный.
2. Читаемый шрифт – лучший друг пользователя.
- Проблема: Слишком мелкий шрифт, вычурные декоративные шрифты для основного текста, недостаточный интерлиньяж (межстрочное расстояние) – всё это затрудняет чтение.
- Решение:Размер: Для основного текста на сайтах обычно рекомендуется не менее 16px. Дайте пользователю возможность увеличивать шрифт через настройки браузера.
Тип шрифта: Для экранов чаще всего лучше подходят простые, хорошо читаемые шрифты без засечек (sans-serif). Избегайте рукописных или слишком декоративных шрифтов для больших объемов текста.
Интерлиньяж: Делайте его достаточным (обычно в 1.4-1.6 раза больше размера шрифта), чтобы строки не слипались.
3. Не полагайтесь только на цвет для передачи информации.
- Проблема: Если вы используете только цвет, чтобы показать что-то важное (например, красная подсветка для поля с ошибкой или зеленый цвет для успешного выполнения операции), люди с нарушениями цветовосприятия (дальтоники) могут эту информацию не считать.
- Решение: Всегда дублируйте цветовую индикацию другими визуальными средствами: иконками, текстовыми метками, подчеркиванием, изменением жирности шрифта. Например, рядом с полем с ошибкой можно поставить иконку "!" и написать текст с описанием ошибки.
4. Делайте ссылки и кнопки понятными.
- Проблема: Тексты ссылок вроде "Нажмите здесь", "Читать далее", "Подробнее" без дополнительного контекста совершенно неинформативны, особенно для пользователей скринридеров, которые могут перемещаться по ссылкам отдельно от остального текста.
- Решение: Текст ссылки или кнопки должен четко описывать, куда она ведет или какое действие выполняет. Например, вместо "Подробнее" напишите "Подробнее о принципах доступности" или "Узнать больше о тарифах".
5. Не забывайте про альтернативный текст для изображений (альт-текст).
- Проблема: Если на странице есть важное изображение (график, схема, фотография продукта), а у него нет текстового описания (атрибут alt), то незрячие пользователи, использующие скринридеры, просто не поймут, что на нем изображено.
- Решение: Для всех информативных изображений добавляйте краткий, но осмысленный альтернативный текст, который передает суть картинки. Если изображение чисто декоративное и не несет никакой важной информации, атрибут alt можно оставить пустым (alt=""), тогда скринридер его проигнорирует.
6. Подумайте о навигации с клавиатуры.
- Проблема: Многие люди не могут пользоваться мышью (из-за моторных нарушений, или просто мышка сломалась) и перемещаются по сайтам и приложениям с помощью клавиатуры (в основном клавишей Tab для перехода между интерактивными элементами и Enter/Space для их активации). Если ваш интерфейс не поддерживает такую навигацию, он для них недоступен.
- Решение: Проверьте, можно ли "добраться" до всех кнопок, ссылок, полей ввода и других интерактивных элементов с помощью клавиши Tab. Убедитесь, что текущий активный элемент всегда визуально подсвечен (это называется "видимый фокус"). (Это чуть более продвинутый пункт, но о нем очень полезно знать с самого начала).
Доступность – это процесс, а не пункт назначения
Не пытайтесь сделать всё идеально и сразу. Это может показаться неподъемной задачей. Начните с малого, с тех простых шагов, которые мы обсудили. Каждое, даже самое маленькое улучшение в сторону доступности – это уже большая победа.
Главное – это выработать в себе привычку думать о разных пользователях и их потребностях на каждом этапе создания дизайна.
Надеюсь, эта статья помогла вам понять, что доступность – это не страшно, а очень важно и интересно. Это проявление профессионализма, эмпатии и желания создавать действительно качественные продукты, открытые для всех. Включая принципы доступности в свою работу, вы делаете цифровой мир лучше, шаг за шагом.
Не бойтесь этой темы, изучайте ее, и пусть ваши дизайны будут по-настоящему инклюзивными!
[Часть 2]
P.S. А вы когда-нибудь задумывались о доступности, работая над своими учебными проектами или просто пользуясь различными сайтами и приложениями в повседневной жизни? Какие примеры хорошей (или, наоборот, вопиюще плохой) доступности вам встречались? Поделитесь своими наблюдениями в комментариях! 👇