Java, UX, HTML, CSS, WEB-design

Доступность: улучшение UX для пользователей с цветовой слепотой

Краткое описание по статье Доступность: улучшение UX для пользователей с цветовой слепотой

Название: Доступность: улучшение UX для пользователей с цветовой слепотой . Краткое описание: [ad_1] ⭐ Адам Си . Дата публикации: 03.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Адам Сильвер

  • 0 Комментарии

Доступность: улучшение UX для пользователей с цветовой слепотой

  • 8 минут чтения

  • UX-дизайн, Цвета, UX, Доступность

Краткое резюме ↬

По данным Color Blind Awareness, 4,5% населения дальтоники. Если ваша аудитория в основном состоит из мужчин, этот показатель увеличивается до 8%. О дизайне для дальтоников можно легко забыть, потому что большинство дизайнеров не дальтонизм. В этой статье я даю 13 советов по улучшению восприятия для дальтоников — то, что часто может быть полезно и для людей с нормальным зрением. Существует много типов дальтонизма, но все они сводятся к нечеткому восприятию цветов, смешению цветов или неспособности различать определенные цвета.

По данным Color Blind Awareness, 4,5% населения дальтоники. Если ваша аудитория в основном состоит из мужчин, этот показатель увеличивается до 8%. О дизайне для дальтоников можно легко забыть, потому что большинство дизайнеров не дальтонизм. В этой статье я даю 13 советов по улучшению восприятия для дальтоников — то, что часто может быть полезно и для людей с нормальным зрением.

Что такое цветовая слепота?

Существует много типов дальтонизма, но все они сводятся к нечеткому восприятию цветов, смешению цветов или неспособности различать определенные цвета.

Дальнейшее чтение на SmashingMag:

  • API специальных возможностей: ключ к веб-доступности
  • Примечания о клиентской доступности
  • Упрощаем доступность с помощью Ally.js
  • Недооцененная сила цвета в дизайне мобильных приложений

Еще после прыжка! Продолжить чтение ниже ↓

Эти проблемы также могут усугубляться средой, в которой люди используют веб-сайты. Это могут быть низкокачественные мониторы, плохое освещение, блики на экране, крошечные мобильные экраны и сидение вдали от огромного телевизионного экрана.

полагаясь исключительно на цвете для удобочитаемости и доступности делает веб-сайт сложным в использовании, что в конечном итоге влияет на читательскую аудиторию и продажи.

Хотя приведенные ниже советы не являются исчерпывающими, они охватывают большинство проблем, с которыми сталкиваются дальтоники при использовании веб-сайтов.

1. Читаемость текста

Чтобы текст был удобочитаемым, он должен соответствовать рекомендациям по доступности, основанным на сочетании цвета текста, цвета фона и размера текста, а именно:

«Уровень AA WCAG 2.0 требует коэффициента контрастности 4,5: 1 для обычного текста и 3: 1 для крупного текста (14 пунктов и полужирный или больше, или 18 пунктов или больше)».
— Проверка цветового контраста WebAim

Вот несколько примеров сочетаний цветов и размеров, которые проходят и не проходят:

Контраст основан на цвете и размере
Это иллюстрирует, как контраст основан на сочетании цвета и размера. (Посмотреть большую версию)

2. Текст, наложенный на фоновые изображения

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

Описание изображения.
Текст, наложенный на изображение без маски. (Изображение предоставлено Джей Веннингтон) (Просмотреть большую версию)

Уменьшение непрозрачности фона увеличивает контрастность, что облегчает чтение текста.

Описание изображения.
Текст, наложенный на изображение с маской. (Посмотреть большую версию)

В качестве альтернативы вы можете оформить сам текст, чтобы он имел сплошной цвет, тень или что-то еще, что соответствует вашим рекомендациям по бренду.

3. Цветовые фильтры, палитры и образцы

На приведенном ниже снимке экрана показан цветовой фильтр на Amazon, как его видит человек с протанопией (красно-зеленая цветовая слепота) и без нее. Без описательного текста невозможно провести различие между многими доступными опциями.

Палитра цветов Амазон
Цветной фильтр без меток, как его видит человек с протанопией, использовать невозможно. (Посмотреть большую версию)

Amazon показывает описательный текст, когда пользователь наводит курсор, но наведение недоступно на мобильных устройствах.

Gap решает эту проблему, добавляя текстовую метку рядом с каждым цветом, как показано ниже:

Палитра цветов Амазон
Цветной фильтр с метками, которые видит человек с протанопией, прост в использовании. (Посмотреть большую версию)

Это оказывается полезным и для людей с нормальным зрением. Например, черный и темно-синий цвета трудно различить на экране. Текстовая метка избавляет от догадок.

4. Фотографии без полезных описаний

На скриншоте ниже показана футболка SuperDry, выставленная на продажу на ее веб-сайте. Он описывается как «листовая яшма», что неоднозначно, поскольку листья могут быть разных цветов (зеленые, желтые, коричневые и т. Д.).

Описание изображения.
Людям с цветовой слепотой трудно понять, какого цвета эта футболка SuperDry. (Посмотреть большую версию)

Джасп (или, скорее, «яшма») означает случайно пестрый или пестрый, поэтому было бы полезно использовать это в дополнение к конкретному цвету: «серо-зеленая листовая яшма».

Ссылки должны быть легко видны, не полагаясь на цвет. Скриншот ниже имитирует зрение человека с ахроматопсией (не видит цвета), просматривающего веб-сайт цифровой службы правительства Великобритании (GDS). Многие ссылки плохо видны. Например, вы заметили, что «Команда GDS, Исследование пользователей» (находится под заголовком) — это ссылки?

ГДС
Блог GDS глазами человека с ахроматопсией. (Посмотреть большую версию)

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

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

ГДС
Подчеркнутые ссылки легко увидеть человеку с ахроматопсией. (Посмотреть большую версию)

6. Цветовые сочетания

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

  • зеленый/красный
  • зеленый/коричневый
  • синий/фиолетовый
  • Зеленый, голубой
  • светло-зеленый/желтый
  • серо-голубой
  • зеленый/серый
  • зеленый/черный
Цветовые комбинации на примере протанопии
Цветовые комбинации, как видно с протанопией. (Посмотреть большую версию)

7. Заполнители формы

Использование заполнителя без метка проблематична, потому что тексту-заполнителю обычно не хватает контраста. У Apple есть эта проблема с регистрационной формой, как показано ниже:

Регистрационная форма Apple
В регистрационной форме Apple используется заполнитель без метки. (Посмотреть большую версию)

Увеличивать контраст не рекомендуется, потому что тогда будет трудно определить разницу между текстом-заполнителем и пользовательским вводом.

Лучше использовать метки — в любом случае это хорошая практика — с достаточным контрастом, что и делает Made.com, как показано ниже:

Этикетки
Made.com использует метки с хорошей контрастностью. (Посмотреть большую версию)

8. Основные кнопки

Часто основные кнопки используют только цвет, чтобы представить себя таковыми, и Argos делает именно это на своем экране входа в систему:

Экран входа в Аргос
Экран входа в систему Argos использует цвет, чтобы выделить основную кнопку. (Посмотреть большую версию)

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

Кнопки Kidly Basket
Кидли использует размер, цвет и иконографию, чтобы выделить основную кнопку. (Посмотреть большую версию)

9. Предупреждающие сообщения

Сообщения об успехах и ошибках часто окрашены в зеленый и красный цвет соответственно. Большинство людей с цветовой слепотой не страдают ахроматизмом и поэтому естественным образом ассоциируют разные цвета с разными сообщениями. Однако использование префикса текста, такого как «Успех» или, как я предпочитаю, значка, делает его быстрым и легким для чтения, как показано ниже:

Обмен сообщениями с помощью значков и текста
Предупреждающие сообщения с текстовыми префиксами и значками. (Посмотреть большую версию)

10. Обязательные поля формы

Обозначение обязательных полей цветом является проблемой, поскольку некоторые люди могут не увидеть различий.

Обмен сообщениями с помощью значков и текста
Обозначение обязательных полей цветом. (Посмотреть большую версию)

Вместо этого вы можете рассмотреть:

  • Пометка обязательных полей звездочкой.
  • Еще лучше, пометив обязательные поля «обязательно».
  • По возможности полностью удалите необязательные поля.

11. Графики

Цвет часто используется для обозначения различных сегментов графика. На изображении ниже показано, как это увидят люди с другим зрением. График для дальтоников находится справа.

Графики, видимые обычным зрением
Графики, просматриваемые обычным зрением (Просмотреть увеличенную версию)
Графики с протанопией
Графики, просмотренные при протанопии (Просмотреть увеличенную версию)
Графики, видимые обычным зрением
Графики, просмотренные с ахроматопсией (Просмотр увеличенной версии)

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

12. Масштаб

Одна из функций доступности, которую имеют браузеры, позволяет кому-то увеличивать изображение настолько, насколько ему нужно. Это улучшает читаемость, что особенно полезно на мобильном устройстве.

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

13. Относительный размер шрифта

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

Инструменты

Существует множество инструментов, которые помогут вам создать дизайн для дальтоников:

  1. Проверьте мои цвета: если у вас есть существующий веб-сайт, вы можете просто ввести URL-адрес и получить отзыв о том, что нужно улучшить.
  2. Средство проверки цветового контраста WebAim: укажите два цвета, чтобы проверить, соответствуют ли они требованиям доступности.
  3. Я хочу видеть, как дальтоник: применяйте фильтры дальтонизма к своей веб-странице прямо в Chrome.
  4. Color Oracle: симулятор цветовой слепоты для Windows, Mac и Linux, показывающий, что увидят люди с обычными нарушениями цветового зрения.

Вывод

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

Более важно убрать принципы, чтобы вы могли интегрировать их в свой собственный процесс проектирования. В конечном счете, веб-сайты должны не просто хорошо выглядеть — они должны быть просты в использовании для всех, включая людей, страдающих дальтонизмом.

Сокрушительная редакция
(cc, og, il)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Доступность: улучшение UX для пользователей с цветовой слепотой

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»