Accessibility
Основные проблемы доступности
Контраст
Низкая контрастность при высокой информационной плотности
Загруженность
Плотный лейаут без существенного количества заметных акцентов
Состояние
Невыраженная реакция на действия пользователя и состояние элементов
Контраст
Часто пользователи сталкиваются с такой проблемой, что плохо виден текст или какие-либо элементы. К сожалению не многие дизайнеры поддерживают контрастность элементов дизайна, версии для дальтоников и слабовидящих и тем более озвучку интерфейсов.
Примерно 30% население страны испытываю проблемы со зрением, 5% глухие, 40% используют плохие мониторы, 1% уменьшают размер страницы в 100 раз.
Существует три уровня допустимости (Российский стандарт):
- Гост А (Уровень минимальной допусимости) Учитывает только контрастность.
- Гост АА (Уровень средней допустимости) Учитывает контрастность, состояния.
- Гост ААА (Уровень полной допустимости) Учитывает контрастность, состояния, версии для дальтоников и для глухих.
Для того чтобы понять виден ли людям с проблемой зрения ваши элементы достаточно проверить контрастность элементов с помощью ресурсы:
Accessible Colors | WCAG 2.0 AA and AAA color contrast checker
Рекомендуемый коффициент Ratio 4.5
Восприимчивость к цвету (Дальтонизм)
Данный тест осуществляется с помощью двух ресурсов:
- Плагин для хрома с помощью которого можно проверить Figma файл на то как видят разные типы дальтоников. NoCoffee
- Далее полученные цвета мы вносим в ресурс и получаем нужно Ratio Accessible Colors | WCAG 2.0 AA and AAA color contrast checker
Так как чаще всего встречается вид дальтонизма - Дейтераномалия, мы основываемся на этом виде.
Загруженность
Для того чтобы пользователи с ограничениями с легкостью ориентировались, необходимо учитывать несколько условии в интерфейсе:
Визуальная иерархия:
Создайте внутренние и внешние стандартизированные отступы. Внешние должны иметь градацию.
Так же не забывайте про внешние отступы.
Создайте воздух между объектами, чтобы их было проще считывает и распознавать.
Создайте четкую иерархию вашей типографики от самых крупных заголовков до подсказок.
Группировка объектов
Ваши объекты должны быть сгруппированы, не должны висеть в воздухе. Вспомните или прочитайте "Теория близости" - https://www.artlebedev.ru/kovodstvo/sections/136/
Если объекты расположены рядом, они воспринимаются как группа.
Четкая иерархия важности
Очень важно учитывать разные цвета для подчеркивания важности, а так же сопровождайте их иконками. Так как люди с Дальтонизмом не смогут их считать.
К тому же можно использовать размер объектов для указывания на важность объекта.
Состояния
У каждого элемента с которым взаимодействует пользователь необходимо создать состояния (Наведена, Нажатое, Заблокированное, Фокус)
Пользователи старше 55 лет, а так же пользователи без мышки используют Табуляцию, на это действие необходимо создать состояний Фокус (Покажите пользователю что данный элемент выделен, к примеру обводкой).
Постарайтесь сделать озвучку интерфейса, опишите элементы. Для того чтобы слабовидяшие пользователи смогли прослушать что находиться на сайте.
Итог
Постарайтесь сделать Ваш интерфейс легким и не нагруженным. С быстрой навигацией и с легко считываемыми элементами (не забывайте про текст, его необходимо тоже легко считывать). Проверяйте контрастность ваших цветов. И не забывайте протестировать ваш интерфейс на людях с ограниченными возможностями (или постарайтесь как то испортить себе зрение, залепите себе один глаз).
Статью буду постоянно обновлять и пополнять