Контрольный список соответствия требованиям ADA: 11 обязательных доступных функций

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

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

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

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

Чтобы получить еще больше советов по цифровому маркетингу, подпишитесь на электронную почту, которой доверяют более 190 000 других маркетологов: Revenue Weekly.

Зарегистрироваться Сегодня!

Что значит быть совместимым с ADA?

Когда вы слышите «соответствует требованиям ADA», что это значит?

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

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

Несоблюдение требований ADA имеет многочисленные последствия, от потери клиентов до юридических проблем.

Контрольный список соответствия требованиям ADA: 11 пунктов, которые нужно вычеркнуть из списка

Чтобы убедиться, что ваш веб-сайт соответствует требованиям, ознакомьтесь с нашим контрольным списком соответствия веб-сайта ADA, чтобы узнать, как сделать ваш веб-сайт доступным для всех!

1. Следуйте Руководству по обеспечению доступности веб-контента (WCAG).

Первое в этом контрольном списке веб-сайта, отвечающего требованиям ADA, — следовать рекомендациям по доступности веб-контента (WCAG). WCAG устанавливает рекомендации, позволяющие компаниям создавать более доступный веб-контент. Следование этим рекомендациям — отличная отправная точка для создания позитивного и функционального веб-сайта.

Существует четыре основных элемента WCAG:

1. Воспринимаемость: Легко ли воспринимается информация на вашем сайте? Если вам трудно увидеть информацию на вашем веб-сайте или увидеть четкую структуру информации, вам необходимо адаптировать свой веб-сайт для четкого представления информации.
2. Работающий: Ваш веб-сайт прост в использовании и функционален? Если ваш веб-сайт имеет запутанный макет или сложную в использовании навигацию, вы не соответствуете рекомендациям WCAG. Вы захотите повторно оптимизировать свой веб-сайт, чтобы людям было легко находить информацию.
3. Понятный . Легко ли понять интерфейс вашего веб-сайта? Если ваша навигация сложна или вам нужно выполнить несколько шагов для выполнения задачи, она может оказаться слишком сложной для понимания. Вы хотите сделать процессы веб-сайта простыми и понятными.
4. Надежность: ваш веб-сайт адаптируется ко всем браузерам и вспомогательным программам? Если вы хотите, чтобы ваш веб-сайт соответствовал требованиям ADA, вам необходимо убедиться, что он совместим со вспомогательными программами, такими как программы чтения с экрана.

Если вы будете следовать рекомендациям WCAG, ваш веб-сайт быстро станет совместимым с ADA.

2. Добавьте замещающий текст изображения

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

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

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

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

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

3. Добавляйте подписи к видеоконтенту

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

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

4. Не используйте быстро мигающие огни или цвета.

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

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

5. Удалите пустые теги заголовков

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

Итак, какая разница, если теги заголовков пусты?

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

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

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

6. Помните о цветовом контрасте

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

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

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

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

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

7. Добавьте уведомление к своим ограничениям по времени

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

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

8. Организуйте свой сайт логически

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

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

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

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

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

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

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

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

• Стрелки вверх и вниз
• Вкладка
• Shift + таб
• Космос
• Войти

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

10. Используйте правильные шрифты

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

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

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

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

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

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

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

Нужна помощь в проверке пунктов в контрольном списке соответствия требованиям ADA?

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

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

Чтобы начать работу, свяжитесь с нами через Интернет или позвоните нам сегодня по телефону 888-601-5359 , чтобы поговорить со стратегом!