Следующая статья поможет вам: Контрольный список веб-сайтов, совместимых с ADA, на 2023 г.
Постоянно напоминать себе о многочисленных стандартах соответствия, особенно касающихся людей с ограниченными возможностями в Соединенных Штатах, имеет первостепенное значение. У людей есть общее понимание того, что предприятия должны устанавливать физические вспомогательные средства для инвалидов в соответствии с Законом об американцах-инвалидах (ADA), но многие не понимают, что этот закон также распространяется на онлайн-мир.
Поскольку мы являемся ведущим профессиональным агентством веб-дизайна, мы подумали, что было бы полезно поделиться контрольным списком веб-сайтов, совместимых с ADA, который мы используем, чтобы гарантировать, что создаваемые нами веб-сайты доступны для людей с любым уровнем способностей.
Что такое соответствие требованиям ADA?
В 1990 году был принят Закон об американцах-инвалидах, призванный положить конец дискриминации, основанной на разном уровне способностей человека. Закон направлен на обеспечение того, чтобы люди имели доступ к одинаковым правовым средствам защиты и возможностям.
Это относительно новаторское усовершенствование проложило путь к стандартизации пандусов для инвалидных колясок, адаптированных туалетов и других удобств с равным доступом, которые теперь присутствуют практически в каждом бизнесе в Соединенных Штатах.
Почему важно, чтобы веб-сайты соответствовали стандартам ADA?
Закон об американцах-инвалидах (ADA) — это закон о гражданских правах, который охватывает широкий круг тем. Он был принят для защиты людей с инвалидностью от различного обращения из-за их инвалидности. Законодательство охватывает очень широкий круг ситуаций, в том числе следующие:
- Правительство на государственном и муниципальном уровнях
- Транспорт
- Работа
- Как общественные, так и частные зоны
- Строительные нормы
- Телекоммуникации
Закон об американцах-инвалидах (ADA) сыграл решающую роль в обеспечении того, чтобы люди с ограниченными возможностями в Соединенных Штатах имели базовую доступность. ADA является причиной, по которой наши строительные стандарты регулируют установку пандусов для инвалидных колясок и парковочных мест для инвалидов.
Эта статья не предназначена для использования в качестве юридической консультации по соблюдению требований ADA; скорее, в нем обсуждается доступность веб-сайтов для всех пользователей. Доступность для всех пользователей — одна из основных целей веб-сайтов, совместимых с ADA. Это гарантирует, что посетители смогут быстро и легко найти нужную им информацию.
Почему так важно, чтобы веб-сайты были доступны?
Ниже приведены основные причины доступности веб-дизайна, соответствующего требованиям ADA:
- Доступность, часто известная как отзывчивость, — это практика, позволяющая пользователям получать доступ к контенту любым способом по своему выбору, а не ограничивать доступ только тем способом, которым вы хотели бы, чтобы они это делали.
- Ваш веб-сайт должен предлагать клиентам различные варианты, а не заставлять их взаимодействовать заранее определенным образом.
- Пользователи будут более лояльны к вашему бренду, если вы сделаете свой сайт доступным для всех, поскольку они оценят то, что вы потратили время и усилия, чтобы сделать его доступным для всех.
- Реакция общественности может возникнуть, когда ваша компания ведет себя не так, как другие считают правильным с этической и моральной точки зрения, например, предлагая равный доступ. Это может негативно сказаться на репутации вашей компании.
Контрольный список веб-сайта соответствия требованиям ADA
Если вы хотите убедиться, что ваш веб-сайт соответствует изложенным рекомендациям, контрольный список соответствия веб-сайта ADA может послужить полезным ориентиром.
Чтобы помочь вам сделать ваш веб-сайт совместимым с ADA, мы включили самый последний и актуальный контрольный список соответствия ADA для веб-сайтов, в котором указаны все важные функции.
1. Используйте подписи и звуковые описания
Функции доступности, такие как звуковые описания изображений, должны быть включены в видео, чтобы сделать их доступными для всех зрителей. Синхронизированные текстовые титры с видеоизображениями и звуковыми дорожками также должны быть включены.
2. Формы для включения описательных тегов
Поля веб-формы должны быть помечены описательными элементами HTML, чтобы помочь пользователям с ограниченными возможностями.
3. Добавьте текст, эквивалентный каждому изображению.
Программы чтения с экрана и обновляемые дисплеи Брайля — это две технологии, которые позволяют слепым или слабовидящим людям получать доступ к веб-контенту. Эти читатели, однако, не могут понять изображения, диаграммы и другой визуальный контент. Ответ заключается в том, чтобы потребовать простой HTML-тег alt для текстовой альтернативы для каждого изображения. В зависимости от того, что требуется для того, чтобы выразить картинку словами, этот текст может быть простым или сложным по вашему выбору.
4. Создайте удобный репозиторий для документов
Хотя PDF-файлы стали стандартом де-факто для обмена документами, они не всегда могут хорошо работать со вспомогательными технологиями, такими как программы чтения с экрана или инструменты для увеличения текста пользователями с плохим зрением. В дополнение к PDF вы также должны предоставить документ в текстовом формате, таком как HTML или RTF.
5. Не ограничивайтесь неизменными цветовыми схемами и размерами шрифта.
Веб-браузеры и операционные системы позволяют пользователям настраивать цвет дисплея и размер шрифта для пользователей с нарушениями зрения. Сайт не должен быть построен таким образом, чтобы пользователи не могли изменять цвета и шрифты темы.
6. Создайте кнопку, чтобы пропустить навигационную ссылку
Текст с низкой контрастностью можно найти на 86,4% домашних страниц. Наиболее распространенная проблема доступности, которую люди замечают, — это текст с низким коэффициентом контрастности и не отвечающий требованиям WCAG 2 AA.
Веб-страницы можно сделать более доступными для людей, использующих программы чтения с экрана, включив параметр «пропустить навигацию» в верхней части каждой страницы.
7. Отвлекающие элементы должны иметь кнопку паузы
Если функция визуально раздражает, потому что она мигает, мигает или делает что-то подобное, у нее должна быть кнопка паузы или отключения.
8. Важно предоставлять стенограммы и предупреждения
В дополнение к звуковому предупреждению и расшифровке для веб-сайтов также рекомендуется использовать автоматически воспроизводимый звуковой эффект. Наши услуги веб-дизайна помогают обеспечить такие преимущества и функции для вашего веб-сайта.
9. Включение пользователей с ограниченными возможностями в тестирование сайта
Включайте пользователей с ограниченными возможностями в тестирование на каждом этапе процесса проектирования, чтобы убедиться, что собранные данные репрезентативны для аудитории сайта в целом.
10. Структура
Используйте соответствующие заголовки, чтобы пользователи с программами чтения с экрана или другими нарушениями зрения могли легко прочитать вашу информацию. Это требует использования подходящих тегов заголовков. За заголовком или H1 должен следовать заголовок H2, а заголовок H3 следует использовать под заголовком H2. Таким образом, становится ясна значимость и значимость структуры содержания.
11. Удобочитаемость
Сделать материал доступным для читателей с когнитивными нарушениями крайне важно, но это также приносит пользу другим пользователям, упрощая просмотр и понимание. Пишите короткими предложениями по существу.
Упростите чтение с помощью маркированных списков, резюме и выделенных терминов. Поместите самые важные детали на первое место и переходите к менее важным. Используйте простой язык и держитесь подальше от жаргона. Весь текст, включая заголовки, должен быть выровнен по левому краю.
12. Текст ссылки
Избегайте использования «нажмите здесь» в качестве текста ссылки при ссылке на внешние веб-сайты. Пользователи с программами чтения с экрана или нарушениями зрения без труда поймут, какие ссылки куда ведут, благодаря использованию описательного языка ссылок.
13. Видео
Существует три основных подхода к повышению доступности видео.
- Все видео должны иметь субтитры. Помимо помощи тем, у кого проблемы со слухом, это удобно для тех, кто находится в шумной обстановке или просто предпочитает не носить наушники при просмотре видео в общественных местах.
- Текстовая расшифровка должна сопровождать произнесенное слово в видео. Высшим стандартом является стенограмма, точно описывающая происходящее на видео.
- Аудиоописание — это устный эквивалент описательной стенограммы, помогающий людям с нарушениями зрения понимать и получать удовольствие от мультимедиа.
14. Изображения
Альтернативный текст, представляющий собой краткое описание содержания изображения, написанное нейтральным тоном, должен сопровождать все фотографии. Это язык, который программы чтения с экрана читают вслух всякий раз, когда встречается изображение; включение номеров файлов или другой не относящейся к делу информации может значительно затруднить доступ к веб-сайту для посетителей с нарушениями зрения.
15. Шрифты
Поскольку в них отсутствуют крошечные засечки, шрифты без засечек являются наиболее разборчивыми. Не используйте слишком много разных шрифтов. Используйте шрифт размером не менее 12; используйте жирный шрифт вместо курсива, если вам нужно что-то подчеркнуть. Очень важно воспользоваться помощью профессиональных услуг по разработке веб-сайтов, если вы новичок в этом.
16. Клавиатурная навигация
Людям с нарушениями зрения и движений может быть очень полезно научиться навигации с помощью клавиатуры. Ваш сайт по-прежнему должен быть удобен для слепых или людей с двигательными нарушениями за счет предоставления альтернативных методов навигации, таких как сочетания клавиш или интерфейс преобразования текста в речь. Гарантируйте, что навигация по вкладкам работает со всеми меню, кнопками и другими формами навигации по сайту.
Фокус или индикатор должен появляться на элементах, когда пользователи наводят на них курсор.
17. Этикетки для форм и таблиц
По мнению наших экспертов по веб-дизайну, Этикетки — самая важная часть любой формы, когда речь идет об удобстве использования. Используйте элемент label в коде для каждого поля формы, чтобы дать ему описательное имя. Таким образом, имена полей будут слышны тем, кто использует программы чтения с экрана. Вместо использования текста-заполнителя в поле для передачи информации пользователю (например, минимальной длины пароля) добавьте эту информацию под заголовком поля.
Убедитесь, что формы просты и имеют разумную структуру. Пользователи должны иметь возможность перемещаться по полям формы с помощью клавиатуры. Формы, которые не соответствуют инструкциям вверху, могут быть заполнены неправильно.
18. Кнопки призыва к действию
Призывы к действию (CTA) играют жизненно важную роль в успехе любой маркетинговой кампании, поэтому убедитесь, что ваша целевая аудитория может легко получить к ним доступ. Всегда следует использовать доступное имя, обычно это текст кнопки. Предоставьте информацию о кнопке пользователям программ чтения с экрана, включив метку aria. Чтобы гарантировать, что призывы к действию (CTA) вашего веб-сайта доступны для всех, может быть полезно обсудить некоторые передовые методы доступности кнопок с вашей командой веб-разработчиков.
19. Код должен уметь определять язык страницы
Убедитесь, что вспомогательные технологии могут правильно отображать текст на вашем сайте, отметив язык каждой страницы в коде.
20. Пользователи должны быть предупреждены, когда они отправляют форму с неверной информацией.
Уведомления должны быть точными и понятными. В частности, уведомления об ошибках должны быть четкими и содержать действия по устранению проблемы. Подтверждение завершения работы с помощью сигналов об успехе также имеет решающее значение.
21. Во все формы должны быть включены правильные этикетки и легенды.
Крайне важно маркировать такие элементы, как формы, чтобы обеспечить доступность всего контента для всех пользователей.
22. Не должно быть пустых заголовков или анкорного текста
Если вы используете теги заголовков без текста, людям, использующим навигацию с помощью клавиатуры, будет сложнее ориентироваться на вашем сайте. Убедитесь, что каждый тег заголовка служит определенной цели в навигации по сайту.
23. Избегайте ярлыков
Не используйте жаргон или сокращения, которые могут запутать программы чтения с экрана. Чтобы что-то подчеркнуть, используйте HTML-элемент «strong» или «em» вместо тега «b» или «i».
24. Функция ограничения времени
Люди с ограниченными возможностями с большей вероятностью справятся с задачами, если они не чувствительны ко времени. Те, кому нужно больше времени для завершения задач, получают возможность отключить ограничения по времени, изменить продолжительность ограничений по времени или запросить дополнительное время до того, как истечет ограничение по времени.
25. Плагины и виджеты
Используя плагины и виджеты, вы можете повысить удобство использования и производительность своего веб-сайта. Большинство проблем с доступностью можно решить с помощью плагина, и эти плагины также гарантируют, что ваш сайт всегда будет в актуальном состоянии. Во многих ситуациях требуется дополнительная ручная помощь. Вы можете улучшить удобство использования своего сайта, добавив на него виджеты.
Дополнительный контрольный список веб-сайта ADA
Процесс изготовления лучшие веб-сайты, совместимые с ADA является непрерывным. За прошедшие годы появились новые контрольные списки, и для организаций становится все более важным использовать их для соблюдения требований законодательства. Несмотря на то, что процесс обеспечения доступности веб-сайта может быть быстрым, следующие контрольные списки помогут вам не сбиться с пути. Тем не менее, контрольные списки не должны рассматриваться как последнее слово в отношении соответствия требованиям ADA. Также важно провести аудит соответствия вашего сайта.
- Субтитры должны быть включены во все видео и аудио.
- Для веб-сайтов важно иметь достаточно высокий коэффициент цветовой контрастности, чтобы их могли использовать люди с нарушениями зрения.
- Любой выделенный текст должен быть кликабельным.
- Важно, чтобы читатели могли увеличить размер шрифта любой формы на 200% без изменения макета.
- Изображения не должны использоваться на веб-сайтах, если текст может передать ту же идею.
- Несмотря на языковые сдвиги, код должен по-прежнему четко идентифицировать каждый язык.
- Пользователь должен быть проинструктирован о том, как исправить ошибки ввода.
- Рекомендуется контраст между фоном страницы и текстом не менее 4,5:1.
- Читатели должны иметь доступ к страницам несколькими способами.
- Каждый интерактивный компонент должен иметь четкую функцию.
- Сверху вниз и слева направо — правильный порядок чтения, так же как и правильный порядок презентации.
- Символам не разрешается передавать какое-либо значение.
- Цвета не должны использоваться для передачи смысла.
- Движущийся контент, такой как карусели, должен иметь возможность приостанавливать, останавливать и скрывать.
- Такие элементы, как аккордеоны, кнопки и поля со списком, должны определяться их развернутым/свернутым или выбранным состоянием.
- Каждый раздел приложения должен иметь описательный и отчетливый заголовок страницы.
- Визуальная метка элемента соответствует его доступному или программному имени.
- В приложении отсутствуют функции или возможности автоматического запуска.
- Изменение настроек элемента пользовательского интерфейса не приводит к глобальному сбросу контекста приложения.
- Иконки должны иметь всплывающую подсказку.
- Все интерактивные элементы должны иметь видимый индикатор фокуса вкладки.
- Программе чтения с экрана и когнитивному пользователю легче предвидеть расположение различных веб-элементов, когда они появляются на странице, потому что они повторяются в одной и той же последовательности на всех страницах программы.
- Элементы с одинаковой функциональностью на нескольких экранах в приложении имеют одинаковую метку или имя.
- Ознакомьтесь с соответствующими юридическими материалами.
- Тег «alt» обязателен для всех изображений и карт.
- Теги HTML следует использовать для описания полей во всех онлайн-формах.
- Якорный текст — это текст, который появляется при нажатии на ссылку.
- Вы включили кнопки «пропустить навигацию» на каждой странице вашего сайта.
- Используйте соответствующие теги заголовков, чтобы упорядочить всю текстовую информацию.
- Все PDF-файлы должны быть доступны для просмотра.
- Субтитры, стенограммы и аудиоописания должны быть включены в каждое видео.
- Цветовой контраст на ваших веб-сайтах должен соответствовать стандартам WCAG.
- Все шрифты должны быть доступны.
- Имена столбцов, метки строк и данные ячеек должны быть включены во все таблицы HTML.
- Текстовое описание должно сопровождать любые аудиофайлы, загруженные на ваш сайт.
- Все кнопки CTA на вашем веб-сайте должны быть помечены доступным именем и идентификатором ARIA.
- Каждая часть вашего сайта должна быть полностью доступна с помощью сочетаний клавиш.
- Создайте страницу политики доступности для веб-сайта.
- Предоставьте посетителям четкий способ связаться с ними, если им понадобится помощь в получении сведений о доступности.
- Проверьте удобство использования вашего сайта в свете Стандартов доступности веб-контента.
- Чтобы не игнорировать серьезные проблемы с доступностью, рекомендуется автоматизировать проверку доступности вашего веб-сайта.
Заключение
Суть в том, что каждый пользователь должен иметь одинаковый уровень доступа ко всем веб-сайтам. Поскольку отказ даже от небольшой части клиентов компании может привести к падению конверсии и доходов, эта концепция является этически и морально обоснованной и имеет разумный финансовый смысл.
Наш контрольный список дизайна веб-сайта, отвечающего требованиям ADA, — это полезный инструмент, который можно использовать, чтобы гарантировать, что ваш сайт отвечает требованиям каждого клиента, что в конечном итоге поможет вашей репутации и прибыльности.
Если вы все еще думаете, как действовать дальше, позвоните нашим специалистам из JanBask Digital Design, чтобы воспользоваться нашими услуги по дизайну сайта.
