10 основных принципов инклюзивного веб-дизайна

Исследования показали, что около 70% веб-сайтов хотя бы частично нечитаемы с помощью вспомогательных технологий.

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

Когда мы принимаем во внимание, как часто люди с ограниченными возможностями становятся невидимыми в обществе и бизнесе, это, к сожалению, становится более понятным.

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

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

Преимущества инклюзивности для вашего бизнеса и клиентов огромны.

Доступность увеличит долю аудитории, но это также ключ к укреплению доверия клиентов.

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

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

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

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

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

Рекомендации по инклюзивному дизайну

1. Будьте гибкими

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

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

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

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

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

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

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

2. Избегайте слишком большого количества клиентов.

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

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

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

Слишком много трогательной и срочной информации отталкивает и подавляет.

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

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

Это также должно относиться к использованию вашей компанией приложений для обмена текстовыми сообщениями. Не заваливайте клиентов уведомлениями.

3. Используйте четкую типографику.

WCAG четко определяет требования к типографике:

• Выровнять текст по левому или правому краю (без выравнивания)
• Расстояние между строками и абзацами должно быть не менее 1,5x.
• Максимальная ширина абзаца - 80 символов.

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

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

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

Еще одна важная проблема - текст внутри изображений. По возможности этого следует избегать.

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

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

4. Сделайте изображения доступными

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

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

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

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

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

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

В то время как случайные изображения для украшения не имеют требований к контрастности, контрастность текста на фоне должна составлять 4,5: 1. Графические элементы, такие как диаграммы, и элементы пользовательского интерфейса, такие как интерактивные значки, имеют требование 3: 1.

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

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

5. Обеспечьте доступность сенсорного экрана.

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

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

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

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

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

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

6. Обеспечьте легкий ввод данных пользователем.

Это тесно связано с доступностью сенсорного экрана.

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

Вы также можете поместить заполнители в поля, чтобы проиллюстрировать, что клиенты должны вводить. Например, адрес электронной почты-заполнитель, например [электронная почта защищена]

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

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

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

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

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

7. Стремитесь к информативной простоте

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

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

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

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

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

8. Поддерживайте последовательность

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

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

Последовательность также должна поддерживаться на стороне обслуживания клиентов.

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

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

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

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

9. Поддерживайте бесперебойную работу вашего сайта

Еще одна проблема доступности заключается в том, что не у всех будет доступ к быстрому интернету или мощному оборудованию.

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

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

Еще раз подумайте, как клиенты заходят на ваш сайт.

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

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

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

10. Создайте визуальную иерархию в дизайне веб-сайтов.

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

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

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

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

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

Заключительные слова об инклюзивности

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

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

Автор биографии

Джон Аллен (John Allen) - директор по глобальной оптимизации поисковых систем в RingCentral, глобальном поставщике программного обеспечения UCaaS, VoIP и автоматического набора номера. У него более 14 лет опыта и обширный опыт в создании и оптимизации программ цифрового маркетинга. Он писал для таких сайтов, как Vault и 3DCart.