10 принципов цифровой доступности для современных маркетологов

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

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

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

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

Принципы для разработчиков

1. Применяйте стандартную семантику HTML

Доступный дизайн начинается со стандартной семантики HTML.Стандартный HTML позволяет программам чтения с экрана объявлять элементы на странице, чтобы пользователь знал, как взаимодействовать с содержимым. Когда используются теги HTML без семантической информации, такие как <div> и <span> для визуального оформления, браузер отображает элементы в соответствии с намерениями разработчика, что, к сожалению, может оказаться не очень полезным для пользователя.

Имейте в виду, что пользовательский опыт работы с программой чтения с экрана может сильно различаться. Например, использование <div class = ”h1”> Введение в семантику </ div> или пользовательское кодирование для переопределения стилей браузера по умолчанию создаст что-то, похожее на заголовок. Однако программа чтения с экрана не будет понимать или объявлять этот элемент в качестве заголовка.

Ключевые

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

2. Включить навигацию с помощью клавиатуры

Все веб-сайты должны быть доступны с клавиатуры, потому что не все потребители могут использовать мышь или просматривать экран. На самом деле, по данным WebAIM Low Vision , 60,4% респондентов всегда или часто используют клавиатуру для навигации по веб-страницам.Кроме того, люди с постоянной или временной потерей рук или контролем тонких мышц могут также использовать клавиатуру или модифицированные клавиатуры для навигации.

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

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

Ключевые

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

3. Используйте атрибуты

Когда речь идет о связывании текста и описаний URL-адресов, программы чтения с экрана могут переходить от ссылки к ссылке в статье. Если используется расплывчатый текст ссылки, такой как «Нажмите здесь» или «Читать дальше», он дает очень мало контекста или смысла для интерпретации с помощью программы чтения с экрана.

Будьте конкретны и описательны с текстом ссылки и включайте осмысленные фразы, описывающие контент, к которому подключается ссылка. Вместо «Свяжитесь с нами» используйте более конкретный язык, например «Свяжитесь с нашим отделом продаж». Для изображений и видео присвойте атрибуты ALT и используйте описательные имена файлов.

Ключевые

  • Избавьтесь от лишних и не описательных слов в ваших ссылках, таких как «Нажмите здесь», «Здесь» и «Подробнее». «10 принципов доступности» читается лучше, чем «Нажмите здесь, чтобы прочитать 10 принципов доступности».
  • Оптимизация имен файлов и URL-адресов и использование как открытых, так и закрытых субтитров для видеоконтента.Подумайте о добавлении точных стенограмм видео.

4. Используйте атрибут ярлыка ARIA

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

В следующем примере ссылки программа чтения с экрана объявит «Bing Ads. Ссылка на сайт.»

<a href= Обработ……> Bing Ads </a>

Однако, если сама кнопка является кнопкой призыва к действию, владелец сайта может использовать метку ARIA, чтобы программа чтения с экрана могла произносить текст призыва к действию, видимый на кнопке. В этом примере программа чтения с экрана сообщит: «Зарегистрируйте учетную запись Bing Ads. Ссылка на сайт.»

<a href= договор …… ситуация aria-label= LocationSign для аккаунта Bing Ads> Bing Ads </A>

Ключ на

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

5. Правильно маркируйте и форматируйте формы

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

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

Ключевые

  • Будьте осторожны при использовании JavaScript в формах, что может затруднить заполнение формы с помощью клавиатуры.

6. Используйте таблицы для данных

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

Ключевые

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

Принципы для писателей и графических дизайнеров

7. Пишите контент структурированным способом

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

Ключевые

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

8. Выровняйте влево

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

Ключевые

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

9. Разумно выбирайте шрифты

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

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

Ключевые

  • Выбирайте простые шрифты с простым окончанием без засечек, чтобы глазам было легче распознавать буквы.
  • Ограничьте использование вариантов шрифта и размеров.

10. Положите цвет на работу

Применение цвета также влияет на доступность. Согласно исследованию WebAIM, проведенному в 2018 году пользователями Low Vision , 75% респондентов сообщают о множественных типах нарушений зрения, в том числе 61% с чувствительностью к свету или бликам и 46% с контрастной чувствительностью.

Подумайте о своей цветовой схеме и контрасте цветов, чтобы текст был легко различим по цвету фона. В Руководстве по доступности веб-контента (WCAG) рекомендуется использовать контрастность 4,5: 1 для обычного текста. Чтобы поместить это в перспективу, черный текст на белом фоне — 21: 1, тогда как серый текст на белом фоне — 4,5: 1.

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

Ключевые вынос

  • Убедитесь, что ваши цвета имеют достаточный контраст и объедините цвет с графикой или символами, чтобы помочь передать значение.

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