В этом видео Джейси из команды WebFX Interactive объясняет, как начать работу с доступным веб-дизайном.

Стенограмма:

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

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

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

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

Что такое доступность веб-сайта?

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

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

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

Эта документация включает:

• Руководство по доступности средств разработки (ATAG)
• Руководство по доступности веб-контента (WCAG)
• Руководство по доступности агента пользователя (UAAG)

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

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

С WCAG у вас есть три разных уровня соответствия: A, AA и AAA. По мере того, как вы переходите от А к АА и ААА, вы следуете большему количеству стандартов, установленных WCAG, и делаете свой сайт доступным для большего числа людей.

Итак, как узнать, есть ли у вас доступный веб-сайт? Проведите аудит!

Как проверить доступность вашего сайта

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

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

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

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

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

5 рекомендаций по доступности веб-дизайна

Просто помните, что это краткое изложение рекомендаций WCAG. Я рекомендую вам использовать краткое справочное руководство W3C, чтобы изучить более подробные методы доступного дизайна.

1. Убедитесь, что текст читаем

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

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

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

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

2. Оптимизируйте изображения для просмотра и чтения

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

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

3. Дайте вашей аудитории дополнительные способы понять видео

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

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

Вы также можете заказать субтитры с помощью такого инструмента, как Rev, а затем добавить их в свое видео.

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

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

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

Платформа хостинга, такая как Wistia, позволяет загружать описания аудио (и даже имеет контрольный список доступности видео при загрузке видео).

4. Сделайте свой веб-сайт удобным для мыши и клавиатуры

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

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

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

Чтобы соответствовать рекомендациям WCAG, эта функция должна работать при использовании клавиатуры.

5. Сделайте навигацию по сайту простой для понимания

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

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

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

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

В этом примере с веб-сайтом At Home, хотя я перехожу с одной страницы на другую, навигация в верхней части страницы не меняется.

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

Чтобы продолжать узнавать о различных темах веб-дизайна и цифрового маркетинга, подпишитесь на наш канал YouTube и нашу рассылку по электронной почте Revenue Weekly . Вы не будете разочарованы.

Спасибо, что присоединились ко мне!

Присоединяйтесь к 5000 маркетологов, которые получают свои маркетинговые знания из видеороликов WebFX.

Подпишись сейчас