Маркетинг | Дизайн

5 способов сделать UI доступнее

Ниже в статье вы увидите просты способы того, как можно внедрить доступность в UI ваших дизайнов и разработок.
Знайте, что даже если у вашего проекта нет требований к доступности, всё равно стоит понимать последствия ваших дизайн решений. Если вы не думаете о доступности, то вы в полной мере не задумываетесь о UX, а точнее удобстве взаимодействия пользователя. Учитывая это, ниже вы увидите просты способы того, как можно внедрить доступность в UI ваших дизайнов и разработок.
Отрегулируйте цвет и размер текста, чтобы создать комбинации подоступнее взгляду пользователя
Одним из самых простых способов подстроить ваш дизайн под требования доступности в вебе - это использование сильного цветового контраста. WebAim Color Contrast checker это один из наших самых любимых инструментов, которые позволяют нам это сделать. Он отлично подходит для того, чтобы создавать цветовую палитру с нуля или если вы работаете с существующей палитрой и вам нужно создать дополнительный набор цветов для доступности в вебе. Тут вы сможете вставлять нужные hex коды или выбирать из цветовой палитры, постепенно делая корректировки, для того, чтобы достигнуть AA или AAA контрастов между элементами. Ниже вы увидите табличку по этим контрастам.

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

Сочетание цвета с формами, иконками, поясняющим текстом или другими комбинациями из всех трех, может помочь вам убедиться в том, что вы доступно взаимодействуете с пользователем. Представьте светофор, где каждое состояние показывается через уникальный цвет или уникальную позицию.
Чтобы посмотреть на то, как люди с разными отклонениями зрения будут видеть ваш дизайн - скачайте Color Oracle. http://www.colororacle.org/
Сочетание цвета с формами, иконками, поясняющим текстом или другими комбинациями из всех трех, может помочь вам убедиться в том, что вы доступно взаимодействуете с пользователем.
Применяйте теги заголовков в логическом порядке
Этот пункт довольно прост и понятно, но его можно легко проглядеть, если вы работаете над разными частями страницы раздельно, даже без беря во внимание то, как они будут работать вместе. Скринридеры прочтут теги заголовков в том порядке, в каком они появятся, так что сделайте шаг назад и убедитесь в том, что вы сделали логическую иерархию, что даст вам больше доступности контенту на странице.
Пишите текст для ссылок и кнопок, которые могут работать и без контекста
У скринридеров есть одна простая функция, они могут читать все ссылки на странице. Если страница использует один и тот же текст для ссылок, которые делают уже другие вещи, например "click here", то это может довольно сильно затруднить навигацию. Очень важно быть уверенным в том, что когда вы пишите текст для какого-либо действия, этот текст является уникальным и может быть понят вне контекста приложения или текста всей страницы.
Или сотрудничайте с разработчиками, чтобы убедиться в том, что код дополняет дизайн
Есть особые случаи, когда стратегии описанные пунктом выше, могут только посодействовать плохому UX. В этом случае, решение может быть в руках ваших разработчиков.

К примеру, мы работали над сайтом одной городской администрации, где нужно было показать список форм. Каждая форма была ассоциируема с PDF файлом, который можно было легко скачать. Нашим первым решением было применение такой схемы "Download {Имя формы}" для каждой кнопки. Однака, взглянув на длину имен каждой из форм, мы поняли, что этот формат создаст кучу огромных кнопок с многострочным текстом, который будет иметь негативное влияние на UX.

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

Делайте для всех
Перед запусками наших проектов, мы делаем тест юзабилити, с кем либо, кто использует скринридеры. Предварительно мы всей командой задаёмся вопросом: "Зачем нам что-то делать, если это кто-то не сможет использовать?"
Я очень рад, что вы прочитали статью. Надеюсь, что наш сервис и наш блог помогут вам развивать ваш бизнес.
Антон Столповский
основатель Pagecard.me
Узнавайте первыми о выходе новых функций и получайте скидки на создание сайтов

Узнавайте первыми о выходе новых функций
и получайте скидки на создание сайтов