Как отличный дизайн влияет на доступность веб-сайта

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

Что такое доступность?

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

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

Почему важна доступность?

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

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

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

Как добиться доступности?

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

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

Мы собираемся глубоко погрузиться в 5 больших областей:

1. Цветовой контраст
2. Альтернативный текст
3. Состояния фокуса
4. Формы
5. Типография

Цветовой контраст

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

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

Чтобы поддерживать приличный контраст между текстом и фоном, следует соблюдать соотношение как минимум 4,5 к 1. Это позволяет пользователям с плохим зрением или дальтонизмом различать их четкость.

Коэффициент контрастности от 4,5 к 1 соответствует уровню соответствия AA (из трех уровней: A, AA и AAA), но он меняется в зависимости от размера шрифта и уровня соответствия, который вы хотите достичь. Для более крупных шрифтов требуется меньший коэффициент контрастности - всего 3 к 1, если шрифт 18 pt (или 14 pt жирным шрифтом).

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

Альтернативный текст

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

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

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

Состояния фокуса

Скорее всего, вы уже знакомы с индикаторами фокуса, даже не осознавая этого. Состояния фокуса - это (часто) синие контуры, которые появляются при выборе элемента, например, ссылки, меню, кнопки и поля формы.

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

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

Формы

Формы могут быть сложными для любого, но те, у кого есть дополнительные проблемы с доступностью, часто могут столкнуться с трудностями, когда формы слишком минималистичны и неясны. Ниже перечислены некоторые общие вопросы, которые необходимо решить, чтобы решить проблему доступности:

• Ярлыки - использование текста-заполнителя в качестве подписи, а не текста вне поля создает путаницу, поскольку текст исчезает, когда пользователь начинает печатать. Упускать важные для пользователя указания в пользу минимализма или эстетики - серьезная ошибка, которой следует избегать.
• Границы - что-то такое простое, как рамка вокруг ввода текста, важно для пользователей с когнитивными нарушениями, чтобы было ясно, где им нужно щелкнуть
• Дополнительные инструкции - часто формы используют минималистский подход в попытке убрать беспорядок в дизайне, однако это мешает удобству использования и, следовательно, доступности.
• Сообщения об ошибках - они должны обозначаться несколькими элементами, обычно используется цвет, но в дополнение к этому ошибки следует указывать с помощью символов или текста.
• Проверка - формы должны предусматривать период проверки перед отправкой, чтобы пользователь мог исправить любую информацию.

Типография

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

Как видите, сложно читать с 9 пт.

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

• Расстояние между буквами: x0.12 размер шрифта
• Расстояние между словами: x0.16 размер шрифта
• Межстрочный интервал: x1,5 размера шрифта
• Интервал между абзацами : x2 размер шрифта

Заключение

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

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

Если вам нужна помощь с креативом, не стесняйтесь обращаться к нам.