Мы постоянно проектируем для идеального пользователя: с острым зрением и слухом, ловкими руками и скоростью чтения ИИ. Такой подход помогает быстро закрывать задачи, но игнорирует реальных людей.
В Российской Федерации общая численность инвалидов по состоянию на 31 декабря 2023 г. составила 11 млн человек, из них 4.2 млн человек находились в трудоспособном возрасте. При неудачном дизайне за бортом остаются 7.5% населения страны (при численности 147 млн).
Контент должен быть доступен всем
Доступность
Доступность — не только про людей с инвалидностью. У всех пользователей разные потребности в разное время и в разных обстоятельствах. На то, как человек получает доступ к вашему контенту, влияет:
- где он находится — шумное кафе, солнечный парк, зона с паршивым интернетом
- как себя чувствует — устал, восстанавливается после инсульта, сломал руку
- что использует — кнопочный мобильник, смартфон, десктоп
Возможности пользователей меняются от ситуации к ситуации. На ярком солнце экран телефона плохо видно из-за низкой контрастности. В шумном помещении ничего не слышно. Когда люди устали или в стрессе — информация хуже воспринимается. Все эти временные ограничения усложняют взаимодействие и понимание контента.
Доступность нужно закладывать в контент с самого начала. А не прикручивать потом как костыль
Вот примеры разных расстройств. Изучите их — поймете, как люди работают с контентом, и как его адаптировать.
Нарушение зрения:
- Я дальтоник — не различаю некоторые цвета
- У меня слабое зрение, увеличиваю текст в браузере
- Плохо вижу, пользуюсь экранной лупой — текст с низкой контрастностью не прочитать
- Я слепой, использую скринридер
- Я слепоглухой, работаю с брайлевским дисплеем
Нарушения слуха:
- Слабо слышу, большинство звуков различаю с трудом
- Я глухой. Жестовый язык — мой родной, русский читать и писать тяжело
Двигательные нарушения:
- Легкие нарушения моторики — мышкой управлять точно не получается
- Средние нарушения — работаю только с клавиатуры
- Серьезные нарушения моторики, ни мышку, ни клавиатуру использовать не могу — только голосовое управление
- Тяжелые двигательные нарушения плюс проблемы с речью — использую кнопочные переключатели
Когнитивные нарушения:
- Дислексия — письменный текст воспринимаю с трудом
- Аутизм — понимаю текст буквально
- СДВГ — сложно концентрироваться
- Трудности с обучением — нужно, чтобы все было просто и понятно
- Память уже не та, легко запутаться
Нарушения речи:
- Дефект речи — говорить сложно. В письменном общении чувствую себя увереннее
Судорожные расстройства:
- Эпилепсия — мигающий / мерцающий контент может спровоцировать приступ
Чтобы цифровой сервис был доступным, человек должен воспринимать контент — получать его хотя бы одним органом чувств.
WCAG
WCAG — это международные рекомендации по веб-доступности: как сделать так, чтобы вашим продуктом могли пользоваться все.
В них объясняется, как создавать цифровые сервисы, сайты и приложения для людей с особенностями:
- зрения — слепые, слабовидящие, дальтоники
- слуха — глухие и слабослышащие
- моторики — кому трудно работать мышью или клавиатурой
- мышления — с дислексией, аутизмом, трудностями в обучении
Четыре принципа WCAG
Весь стандарт держится на четырех китах:
- воспринимаемость
- управляемость
- понятность
- надежность
Фокус на принципах, а не на технологиях. Это заставляет думать о том, как по-разному люди взаимодействуют с контентом:
- кто-то использует только клавиатуру
- кто-то настраивает браузер под себя
- кто-то слушает скринридер
- кто-то увеличивает экран лупой
- кто-то управляет голосом
Принципы касаются всего сервиса целиком — кода, контента, взаимодействий. Поэтому понимать их должна вся команда.
Принцип 1: Воспринимаемость
Пользователи должны воспринимать сервис теми органами чувств, которые у них работают.
Что делать:
- добавляйте alt-текст к изображениям
- делайте расшифровки аудио и видео
- добавляйте субтитры к роликам
- структурируйте контент логично — чтобы скринридер / ИИ его понял (заодно поможет при отключенных стилях)
- используйте правильную разметку везде — в формах, таблицах — чтобы связи были понятны
- не объясняйте что-то только цветом
- выбирайте контрастные цвета текста и фона
- обеспечьте работу при увеличении текста на 200% и перестройку в колонку при 400%
- не делайте изображения из текста
- делайте адаптивный дизайн — под устройство, поворот экрана, размер шрифта
- размечайте важные сообщения так, чтобы скринридер понял их важность
Принцип 2: Управляемость
Люди должны находить и использовать контент любым удобным способом — клавиатурой, голосом, чем угодно.
Что делать:
- обеспечьте работу только с клавиатуры
- дайте возможность управлять движущимся контентом — воспроизвести, остановить, поставить на паузу
- не используйте мерцающую, стробоскопическую анимацию
- добавьте ссылки-якоря к содержанию в начале статьи
- пишите понятные заголовки страниц
- делайте логичную навигацию
- пишите понятные ссылки — чтобы было ясно, куда ведут
- используйте осмысленные заголовки и подписи
- показывайте, где сейчас фокус клавиатуры
- используйте события мыши и жесты только когда нужно — или дайте альтернативу
- позвольте настраивать горячие клавиши
- делайте кнопки достаточно большими, чтобы в них легко было попасть
Принцип 3: Понятность
Контент и логика работы сервиса должны быть понятными.
Что делать:
- указывайте язык контента и предоставляйте возможность его изменения
- делайте интерфейс последовательным и предсказуемым
- понятно подписывайте поля форм
- добавьте форму обратной связи в случае возникновения ошибок
- упрощайте повторный ввод информации
- упрощайте вход в систему
Принцип 4: Надежность
Ваш контент должен корректно работать с любыми программами, включая вспомогательные технологии.
Что делать:
- пишите код так, чтобы вспомогательные технологии понимали назначение каждого элемента, его состояние и изменения
- размечайте статусные сообщения и модальные окна так, чтобы пользователи знали о них и могли с ними взаимодействовать
