Какая часть вашей повседневной жизни связана с использованием Интернета?
Действительно подумайте об этом. Как вы сделали рождественские покупки? Ваше банковское дело? Как найти рецепты блюд на ужин? Как вы поддерживаете связь с семьей и друзьями? Лично я бы даже не смог выполнять свою работу без Интернета.
Для многих из нас Интернет стал неотъемлемой частью нашей повседневной жизни, однако многие люди не осознают, что не все люди используют этот вездесущий ресурс одинаково.
Если вы один из миллиарда людей в мире, страдающих той или иной формой инвалидности, то подключение и простота использования Интернета не всегда гарантированы.
На самом деле, отчет, в котором проанализирован миллион самых популярных веб-сайтов, показал, что только 1% этих веб-сайтов соответствуют наиболее широко используемым стандартам доступности.
Честно говоря, для человека, который борется с красно-зеленой дальтонизмом, это действительно отстой, и с точки зрения бизнеса это также может быть юридической проблемой.
Положительным моментом является то, что, хотя нам еще предстоит добиться большого прогресса, мы начинаем видеть, что компании уделяют больше внимания доступности и подчеркивают важность создания равных (или, как мы будем см. в этой статье инклюзивный) опыт просмотра веб-страниц.
Многие компании не спешат внедрять тактику обеспечения доступности веб-сайтов и инклюзивного дизайна на свои веб-сайты, потому что ошибочно полагают, что это сложный и дорогостоящий процесс.
Я здесь, чтобы сказать вам, что это совсем не так.
На самом деле, есть несколько действительно простых вещей, которые вы можете реализовать на своем веб-сайте, чтобы ускорить процесс.
Ниже я расскажу вам 11 способов сделать свой веб-сайт более доступным и использовать инклюзивный дизайн.
Что такое инклюзивный дизайн?
Доступный дизайн и инклюзивный дизайн - две области, которые идут рука об руку; похоже на то, как люди говорят о UX и UI.
Проще говоря, инклюзивный дизайн гарантирует, что ни одна группа не будет упущена из виду в ваших усилиях, а доступность - это тактика для достижения этой цели.
Многие компании совершают ошибку, создавая веб-сайты и маркетинговые кампании так, как если бы они были их собственным конечным пользователем. Однако это почти никогда не так.
В 2021 году вам нужно позаботиться о разнообразии, равенстве и инклюзивности. Это означает расширение ваших сообщений, средств массовой информации и дизайна, чтобы учитывать растущую аудиторию, состоящую из разных слоев общества, включая возрастные группы, уровень образования, сексуальную ориентацию, пол, социально-экономические классы и религии, среди прочего.
Pinterest - вдохновляющий пример компании, которая добилась больших успехов в усилении своих усилий по обеспечению многообразия и инклюзивности. За последний год они внедрили ряд новых функций, таких как фильтры телесных тонов, чтобы усилить голоса недостаточно представленных сообществ, и предприняли сознательные усилия по диверсификации своей руководящей команды.
Теперь я понимаю, что это может быть для вас новым, и вы не знаете, с чего начать, и это нормально.
Чтобы помочь вам начать, главный редактор IMPACT Рамона Сухрадж недавно написала статью под названием «5 быстрых изменений, которые помогут начать инклюзивный маркетинг в 2021 году». Я настоятельно рекомендую прочитать статью полностью, но некоторые основные выводы включают в себя:
- Обновление стоковых фотографий и видео на вашем сайте более разнообразными фотографиями.
- Разнообразие ваших отзывов, тематических исследований и обзоров, чтобы показать, что вы добились успеха у более широкой аудитории.
- Добавление большего количества видео и аудио в ваш контент, чтобы удовлетворить потребности потребителей, у которых могут быть невидимые различия, такие как ограниченные возможности обучения или зрения.
- Предлагайте контент или поддержку на других языках
Реализация этих выводов на вашем сайте направит вас на правильный путь к созданию более инклюзивного опыта.
На этой основе давайте углубимся в некоторые подробности того, как начать работу с инклюзивным дизайном.
11 способов сделать ваш сайт более доступным и инклюзивным
1. Переосмыслите структуру своего контента
Содержимое вашего сайта - самый важный его актив.
Да, правда?
Отличный контент - это то, что привлекает посетителей вашего сайта, помогает им обучать и в конечном итоге превращает их в потенциальных клиентов, отвечающих требованиям продаж, но что, если ваши потенциальные клиенты не смогут прочитать ваш контент?
Для 253 миллионов человек во всем мире, страдающих той или иной формой нарушения зрения, это вполне реальный сценарий. Это также множество потенциальных перспектив, с которыми вы можете упустить возможность связаться.
Когда дело доходит до вашего контента, убедитесь, что вы структурируете его так, чтобы его было легко читать пользователям с нарушениями зрения, языка и когнитивных функций.
Одна из самых простых вещей, которые вы можете сделать, - это разбить длинные блоки контента на более мелкие разделы, разделенные заголовками и подзаголовками.
Людям с ограниченными возможностями чтения или зрения может быть трудно удерживать свое место и следить за потоком текста, когда блоки контента слишком длинные.
Помимо разделения вашего контента, W3C также предлагает следовать этим рекомендациям, когда дело доходит до структурирования вашего контента:
- Убедитесь, что между контентом и его фоном имеется достаточный контраст
- Старайтесь, чтобы максимальная ширина вашего контента составляла около 80 символов в строке
- Увеличьте высоту строки как минимум в 1,5 раза больше размера шрифта
- Избегайте полностью выровненного текста
Эти простые вещи могут изменить мир к лучшему для людей с нарушениями зрения или чтения.
2. Используйте правильную разметку в своем контенте
Помимо внимания к тому, как вы структурируете свой контент во внешнем интерфейсе, вам также необходимо убедиться, что вы используете правильную HTML-разметку для структурирования контента во внутренней части вашего веб-сайта.
Это означает использование HTML-элементов, таких как тег, для обозначения наличия кнопки на странице, а также включение в код так называемых атрибутов ARIA.
Не менее важно использовать теги заголовков (H1, H2, H3 и т. д.) в вашем контенте.
Теги заголовков не только создают визуальную иерархию во внешнем интерфейсе вашего веб-сайта, облегчая пользователям с плохим зрением лучшее понимание порядка контента; но также придает структуру вашему коду в серверной части.
Создание такой структуры и использование этих тегов имеют решающее значение, когда речь идет о доступности, поскольку именно это дает контекст программам чтения с экрана, на которые полагаются многие слабовидящие или слепые пользователи при просмотре веб-страниц.
БОНУС: Поисковые системы также используют эти теги заголовков при сканировании ваших веб-страниц, поэтому включение этих тегов может помочь улучшить ваш рейтинг в поиске.
3. Поддержка навигации с помощью клавиатуры
Доступность клавиатуры - важная часть общей картины доступности веб-сайта.
Для людей с ограниченными возможностями моторики или людей с нарушениями зрения клавиатура может быть основным средством навигации по веб-сайту.
Это означает, что если ваш веб-сайт не оптимизирован для навигации с помощью клавиатуры, это может очень разочаровать этих пользователей. Представьте себе ощущение, что вы не можете легко нажать кнопку воспроизведения или заполнить форму, чтобы загрузить предложение.
Основная цель навигации с помощью клавиатуры - дать пользователям возможность выбирать каждый интерактивный элемент на веб-странице с помощью клавиши табуляции. Клавиша табуляции позволяет пользователям, использующим только клавиатуру, перемещаться по веб-сайту.
Пример навигации по веб-странице с помощью клавиатуры
Самый простой способ проверить это - просто посетить одну из ваших веб-страниц и попытаться перемещаться по ней с помощью клавиши табуляции. Наблюдайте и отмечайте, насколько легок или сложен этот процесс. Обязательно проверьте движение в обратном направлении с помощью Shift + Tab и выбор элементов с помощью клавиши ввода.
Возможно, вы обнаружите, что ваш сайт требует некоторой доработки, прежде чем на нем можно будет полностью управлять клавиатурой. Если это так, то существует ряд доступных ресурсов, но я настоятельно рекомендую вам прочитать эту статью, чтобы стать лучше.
4. Создавайте полезные состояния фокуса
Вы когда-нибудь прокручивали страницу и замечали синие контуры, которые иногда появляются вокруг ссылок или кнопок?
Эти контуры известны как состояния фокуса и являются невероятно полезным инструментом обеспечения доступности для людей, использующих клавиатуру для навигации по веб-сайтам. Состояния фокуса подчеркивают, какой элемент на странице выбран в данный момент, и позволяют пользователю узнать, где именно он находится на странице.
В приведенном выше примере из Википедии вы можете увидеть базовые состояния фокуса, которые встроены во все браузеры, однако они не совсем визуально привлекательны. Вот почему некоторые веб-сайты на самом деле скрывают их, но что бы вы ни делали,не скрывайте состояния фокуса на своем веб-сайте! Вместо этого используйте их как возможность улучшить свой бренд.
Приложив немного внимания, вы можете создать состояния фокуса, которые будут хорошо сочетаться с вашим брендом и создать более инклюзивный и удобный для пользователя опыт.
Примеры состояний фокуса | Источник / Верфь
Как упоминалось выше, перемещайтесь по своему веб-сайту с помощью клавиши табуляции и убедитесь, что состояния фокуса вашего сайта легко видны на всех кнопках, ссылках и полях форм. W3C предполагает, что все элементы с состоянием фокуса имеют коэффициент контрастности по крайней мере 3:1 по отношению к цвету фона, чтобы их было легче увидеть.
5. Напишите полезный альтернативный текст для ваших изображений
Написание полезного и описательного альтернативного текста (также известного как альтернативный текст) для ваших изображений, вероятно, является одной из самых простых в реализации, но наиболее игнорируемых областей доступности.
Ранее я упоминал, что программы чтения с экрана зависят от правильных HTML-тегов, помогая пользователям с нарушениями зрения понимать веб-сайт и перемещаться по нему. Аналогично, программы чтения с экрана также используют замещающий текст, чтобы правильно описать пользователям изображения на веб-сайте.
Замещающий текст можно просто добавить к изображению, используя атрибут внутри тега изображения HTML. Когда дело доходит до написания замещающего текста, постарайтесь описать, что происходит на изображении и как оно связано с окружающим контентом. Это позволяет пользователям, которым интерпретация изображения зависит от замещающего текста, понять, что именно представляет собой изображение и как оно связано с остальным содержимым и страницей
И наоборот, могут быть случаи, когда изображение является чисто декоративным или избыточным, и в этом случае вы можете добавить к изображению пустой атрибут, который сообщит программам чтения с экрана пропустить это изображение.
6. Избегайте создания изображений, содержащих текст
В темные времена Интернета создание изображений, содержащих текст, было обычной практикой.
Пример веб-сайта, созданного с использованием изображений в качестве текста. Синие кнопки вверху имеют текст, встроенный в саму кнопку; его нельзя выделить или прочитать отдельно от изображения. | Источник / Логрокет
Дизайнеры и разработчики были ограничены отсутствием стандартов кодирования и возможностей браузера, поэтому им пришлось придумать несколько «творческих» обходных путей для создания визуально привлекательных макетов.
К счастью, с тех пор веб-дизайн прошел долгий путь, и нам больше не нужно прибегать к таким дизайнерским хакам. Однако это не означает, что в Интернете полностью отсутствуют изображения такого типа.
Многие компании до сих пор используют этот подход к графике, такой как карты, графики и диаграммы, и это может вызвать различные проблемы, когда дело касается доступности.
Основная проблема заключается в том, что программы чтения с экрана не могут точно прочитать текст, встроенный в изображение. Изображения также имеют тенденцию изменять размер в зависимости от того, использует ли пользователь настольный компьютер, планшет или мобильный телефон.
Это означает, что чем меньше окно браузера, тем меньше становится и изображение с текстом. Это может чрезвычайно затруднить, если не сделать невозможным, чтение для любого пользователя, не говоря уже о пользователях с ослабленным зрением.
Когда дело доходит до контента и изображений, всегда старайтесь сделать контент живым текстом и, как упоминалось выше, также обязательно включите замещающий текст для изображения, описывающий его важность.
7. Используйте описательные метки для полей формы
Одно из наиболее эффективных мест, с которых вы можете начать работу по обеспечению доступности, - это ваши формы. Для многих из нас доходы от маркетинга и продаж зависят от заполнения форм, поэтому крайне важно, чтобы каждый мог легко их заполнить.
Распространенная ошибка брендов на своих веб-сайтах - использование текста-заполнителя в качестве меток.
Обычно это делается для экономии места на экране, но за это приходится платить удобством использования.
Текст-заполнитель - это светло-серый текст с низкой контрастностью, который можно увидеть в некоторых формах, который исчезает, как только вы начинаете вводить текст в поле. Людям с ослабленным зрением это может быть сложно прочитать.
Поскольку этот текст также исчезает при вводе информации, может быть сложно запомнить, для чего изначально предназначалось это поле.
Кроме того, для тех пользователей, которые используют программы чтения с экрана, программа чтения с экрана обычно считывает только элементы для каждого поля, а текст-заполнитель пропускается.
Помимо использования тегов для именования полей формы, всегда следите за тем, чтобы люди понимали, что им следует делать и писать в форме. Вы можете сделать это в виде небольшого вспомогательного текста над полем формы или подсказки.
Имейте в виду, что это не означает, что вам нужно загромождать формы ненужной информацией, просто убедитесь, что вы предоставляете важные подсказки, чтобы пользователи могли избежать каких-либо догадок.
8. Делайте свой копирайтинг простым
Ясный и краткий контент - это доступный контент. Просто и понятно.
Если ваш контент будет ясным, кратким и избегает ненужного жаргона, вы откроете его для более широкой аудитории. Это поможет людям с когнитивными нарушениями, носителям языка или людям с ограниченными возможностями обучения легче читать и понимать ваш контент.
Помимо того, чтобы содержание было ясным и кратким, при написании постарайтесь также учитывать следующие правила:
- Если вам все же необходимо использовать аббревиатуру, жаргон или технический термин, попробуйте предоставить пользователям глоссарий этих терминов, а также предоставить простой английский вариант
- При использовании аббревиатур используйте расширенную версию аббревиатуры при первом использовании
- Используйте списки, когда это возможно
- Рассмотрите возможность использования изображений или видео, чтобы прояснить сложные идеи
9. Проверьте цветовой контраст вашего сайта
Цветовой контраст – это элемент доступности веб-сайта, который часто упускают из виду. Многие из нас могут посмотреть на блок текста на фоне другого цвета и не задуматься об этом, однако для 285 миллионов людей, живущих с нарушениями зрения, текст, который не имеет достаточного контраста с фоном, может стать кошмаром. читать.
Согласно W3C, идеальный коэффициент контрастности между текстом и его фоном должен составлять не менее 4,5:1.
Эти коэффициенты контрастности становятся более щадящими по мере увеличения текста. Для содержимого, выделенного жирным шрифтом не менее 18 или 14 пунктов, минимальный коэффициент контрастности снижается до 3:1, что открывает больше вариантов цвета для дизайна.
Увидев все эти цифры и соотношения, вы можете подумать: «Это похоже на математику. Как, черт возьми, я должен это понять?!»
Не бойтесь, поскольку Интернет - прекрасное место, существует ряд бесплатных инструментов, которые помогут вам выполнить все математические расчеты и догадки. Мой любимый инструмент для этого - средство проверки цветового контраста WebAIM.
Трудно говорить, но это самый простой в использовании инструмент. Вы просто вводите шестнадцатеричный код цвета для вашего текста и фона, и он сообщит вам, прошла ли комбинация цветов.
Используйте этот инструмент, чтобы проверить цветовой контраст не только основного контента, но и таких элементов, как кнопки, поля форм и даже значки.
10. Не полагайтесь на цвет для отображения важной информации
Для человека с цветовой слепотой этот вопрос действительно задел.
Когда вы показываете важную информацию, например данные на графике или ошибку в поле формы, никогда не следует использовать цвет как единственный визуальный сигнал. Людям со слабым зрением или дальтонизмом может быть трудно увидеть только цветовые различия.
Лично меня ничто не сводит с ума больше, чем когда я смотрю на круговую диаграмму, в которой для различения данных используются только разные оттенки синего, и в конечном итоге я понятия не имею, на что смотрю.
При показе людям любого типа данных используйте дополнительные элементы, такие как метки или узоры, а также цвет, чтобы данные было легче различить.
Пример диаграммы с использованием цвета и текстуры для отображения данных | Источник / Государственный университет Северной Каролины
То же самое касается выбранных параметров в приложении или состояний ошибок в поле формы. Не полагайтесь только на цвет, чтобы показать эти элементы, вместо этого сочетайте их с чем-то более визуальным, например значком, сообщением об ошибке или даже чем-то простым, например выделением текста жирным шрифтом.
Spotify - отличный пример того, как легко можно сделать такие элементы, как выбранные параметры в приложении, более доступными.
Источник / Мы дальтоники
В примере выше показано изображение панели управления Spotify. Обратите внимание на значки перемешивания и повтора.
Когда выбран любой из этих значков, они становятся зелеными. Сам по себе зеленый цвет значка не подходит для пользователей с нарушениями зрения. Значки маленькие, а зеленый цвет плохо контрастирует с черным.
Чтобы решить эту проблему, Spotify просто добавил маленькую точку под значком, чтобы обозначить, что опция выбрана. Это такое простое, но эффективное решение. Точка не меняет внешний вид приложения и не сбивает с толку пользователей, не страдающих дальтонизмом, но значительно улучшает удобство работы для пользователей, которым она действительно нужна.
Учитывайте это, предоставляя пользователям подобную информацию. Такая тонкая деталь может иметь большое значение.
11. Избегайте мигающей анимации пользовательского интерфейса
Я помню, как учился в начальной школе и слышал, как дети на детской площадке рассказывали об эпизоде из «Покемонов», от которого у детей случились судороги. В то время это больше походило на фольклор, но годы спустя я узнал, что в этой истории была доля правды.
По-видимому, в эпизоде «Электрический солдат Поригон» была сцена боя, в которой использовались быстро мигающие красные и синие огни, которые длились около шести секунд. Сообщалось, что мигающие огни в этой сцене вызвали у тысяч детей приступы.
В последующие годы фактическое количество припадков, вызванных этим эпизодом, подвергалось сомнению, но инцидент, теперь известный как «Шок покемонов», является одной из основных причин, почему сегодня мы видим предупреждения о светочувствительных припадках на шоу. и видеоигры с мигающими огнями.
Этот эпизод является напоминанием о том, как осторожно нам нужно быть с анимацией и эффектами, которые мы размещаем на наших веб-сайтах и в нашем видеоконтенте.
Эпилепсия - очень серьёзное заболевание, которое может вызывать судороги, вызванные мигающим светом. Вот почему так важно убедиться, что мы следуем так называемому «Правилу трех вспышек». Правило гласит, что любая анимация или контент, который мигает более трех раз в секунду, небезопасны.
Лучшее решение - просто избегать мигающих анимаций на вашем веб-сайте, чтобы обеспечить его безопасность для всех.
Инструменты и ресурсы, которые помогут обеспечить доступность и инклюзивный дизайн
В дополнение к этим 11 тактикам, которые помогут сделать ваш веб-сайт более доступным, существует также масса ценных инструментов и ресурсов, которые помогут вам на пути к доступности и инклюзивному дизайну.
W3C проделала потрясающую работу по составлению списка инструментов и ресурсов для обеспечения специальных возможностей. Вы можете просмотреть полный список ресурсов здесь, но вот некоторые из моих любимых, которые помогут вам начать:
Рекомендации W3C Web Accessibility Initiative
Руководство W3C Web Accessibility Initiative, о котором я упоминал в этой статье, - это Библия рекомендаций по обеспечению доступности веб-сайтов. Я настоятельно рекомендую добавить этот сайт в закладки и регулярно возвращаться к нему, поскольку информация постоянно обновляется.
Сайт содержит массу полезных советов, инструментов, информации о действующем законодательстве, судебных делах, презентациях и оценках, которые способствуют развитию доступности веб-сайта.
Доступность к Интернету
WebAccessibility - это бесплатный инструмент, который каждый может использовать для проверки доступности веб-сайта. Это отличный ресурс, с которого можно начать свой путь к доступности. Инструмент просканирует ваш веб-сайт и создаст отчет, показывающий ошибки, оповещения и функции, которые работают хорошо.
Проверка цветового контраста WebAIM
Мы говорили об этом инструменте при обсуждении цветового контраста, но мне нужно еще раз подчеркнуть, насколько он на самом деле полезен. Последовательная проверка достаточного контраста между элементами фона и переднего плана гарантирует, что все пользователи смогут легко читать ваш контент и взаимодействовать с вашим веб-сайтом, что в конечном итоге обеспечит лучший пользовательский опыт. Я постоянно обращаюсь к этому инструменту, и его простой, но подробный макет делает его действительно простым в использовании.
Все сводится к сочувствию
Если вы проведете исследование, вы найдете массу различных ресурсов, в которых обсуждаются преимущества создания доступного веб-сайта и DEI в целом. Многие из этих преимуществ связаны с созданием убедительного экономического обоснования доступности.
Вы увидите такие преимущества, как:
- Доступность может ускорить ваши усилия по SEO, поскольку Google предпочитает веб-сайты с лучшим пользовательским интерфейсом
- Вы минимизируете свои юридические риски. Мы видели ряд историй о том, как известным компаниям предъявлены иски о соблюдении требований ADA. Только в 2019 году было подано 2256 исков о доступности веб-сайтов.
- Создание доступного веб-сайта означает, что больше людей смогут взаимодействовать с вашим брендом и использовать ваш веб-сайт, что поможет расширить вашу аудиторию.
Хотя эти преимущества, безусловно, важны, в конечном итоге создание доступных продуктов сводится к сочувствию. Речь идет о понимании и заботе о различных потребностях и проблемах пользователей, а также о желании создать равные условия для всех.
Как дизайнеры и маркетологи, мы имеем право и ответственность гарантировать, что каждый сможет использовать то, что мы создаем. На мой взгляд, это самое лучшее в доступности. Это создает лучший опыт для всех.