Блог

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

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

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

Если говорить простым языком, доступные веб-сайты позволяют широкому кругу пользователей беспрепятственно взаимодействовать с сайтом, - получать необходимую информацию, пользоваться навигацией, делать покупки, регистрироваться и т.д.
Если смотреть более глобально, каждый сайт (сам по себе, с точки зрения разработки, дизайна и наполнения) должен представлять собой качественный продукт, подходящий для разнообразной аудитории, в том числе и для людей с ограниченными возможностями.
Нужно сказать, что ограничение возможностей – это явление, которое может быть постоянным, временным или ситуативным. Авинаш Каур (Avinash Kaur Sarin, индийская  тележурналистка) писала, что разнообразная аудитория «распространяется на всех, кто страдает какой-либо постоянной, временной или ситуативной инвалидностью, например наличие только одной руки - это постоянное состояние, травмированная рука - временное явление, а удержание ребенка на одной руке - ситуационный процесс - в каждом случае пользователь может выполнять задачи только одной рукой».

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

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

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

  • Цветовой контраст
  • Альтернативный текст
  • Состояния фокуса
  • Формы

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

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

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

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

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

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

Типографика

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

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

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


Читайте по теме:
How a blind girl opened my eyes on business

Made on
Tilda