Ускоренный курс по обеспечению доступности веб-контента (WCAG 2.1)

• Видео начинается с приветствия и объяснения, что участники собрались для изучения руководства по обеспечению доступности веб-контента.  

• Автор планирует рассмотреть руководство сверху донизу, а также привести примеры из реальной жизни.  

• Она также упоминает, что участники прислали ей свои веб-сайты для анализа.  

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

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

• Автор представляет себя как специалиста по трудотерапии, который перешел к веб-разработке после прохождения учебного лагеря.  

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

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

• WCAG (Web Content Accessibility Guidelines) - это международные стандарты для доступности веб-контента для людей с ограниченными возможностями.  

• WCAG разработаны консорциумом WWW (World Wide Web) и включают в себя три уровня соответствия: A, AA и AAA.  

• 20% людей в мире имеют инвалидность, и 62% из них не говорят об этом.  

• Доступность Интернета важна для всех, так как 20% населения мира имеют инвалидность.  

• Законы о доступности в Интернете включают раздел 508 и раздел 504.  

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

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

• Видео объясняет принципы WCAG, которые основаны на принципе "poor" (воспринимаемый, работоспособный, понятный и надежный).  

• Воспринимаемый: можно ли увидеть страницу, понять, где что находится, услышать информацию.  

• Работоспособный: можно ли управлять веб-сайтом, пользоваться элементами управления, ориентироваться, нажимать на кнопки без использования мыши.  

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

• Надежный: технология должна быть доступной для разных пользователей, в разных браузерах и экранах.  

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

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

• Видеоконтент должен иметь звуковые описания.  

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

• Пример: ссылки на квалификацию, контакт, светлый и темный режимы, а также название первого уровня.  

• Важно убедиться, что программа чтения с экрана следует в правильном порядке.  

• Не использовать цвет, звуки или зрение только для передачи информации.  

• Пример: сигнализация, которая становится красной, если пароль введен неправильно.  

• Если пользователь не может слышать или видеть, он не сможет узнать, что делать.  

• Важно, чтобы веб-сайты были ориентированы на пользователя и не зависели от местоположения.  

• Использование цвета должно быть объяснено, чтобы пользователи понимали, что происходит.  

• Коэффициент контрастности текста и изображений должен быть не менее 4.14:5.  

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

• Размер текста должен быть изменяемым на 200% без странных эффектов.  

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

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

• Убедитесь, что вы можете изменить размер до 400 пикселей без горизонтальной прокрутки.  

• Обсуждение проверки контрастности изображений и важности изменения свойств отображения текста.  

• Упоминание о кнопках и вводах, которые должны иметь хорошую контрастность для удобства использования.  

• Обсуждение важности использования m и rems для изменения размера текста и доступности для пользователей с разными технологиями и программным обеспечением.  

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

• Упоминание о необходимости изменения кода для обеспечения доступности меню гамбургеров.  

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

• Пример использования сайта Энн для демонстрации клавиатурной ловушки.  

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

• Обсуждение настройки времени и ограничений по времени для предотвращения выхода из системы.  

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

• Обсуждение важности указания цели ссылки и использования жестов указателя для обеспечения доступности.  

• Обсуждение важности отмены указателя для людей с тремором или нарушениями подвижности.  

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

• Обсуждение важности использования альтернативных способов навигации по странице, таких как панель поиска или оглавление.  

• Упоминание о важности использования языка программирования для определения языка частей страницы.  

• Обсуждение важности идентификации ошибок при вводе данных и предоставления инструкций для исправления ошибок.  

• Упоминание о важности последовательной навигации по странице и использовании одного стиля оформления для всех элементов.  

• Обсуждение важности разбора кода для предотвращения серьезных ошибок и возможности исправления данных.  

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

• Обсуждение важности надежности и синтаксического анализа для веб-страниц.  

• Ошибки в коде могут привести к неправильному восприятию информации вспомогательными технологиями.  

• Ария - расширение HTML для интерактивных компонентов, таких как формы.  

• Важно, чтобы имя, роль и значение соответствовали друг другу.  

• Сообщения о статусе должны быть программными и понятными для вспомогательных технологий.  

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

• Вспомогательные технологии должны быть доступны на веб-страницах и в документах.  

• Документация должна соответствовать стандартам WCAG.  

• Автор прошел курс "100 дней союзника" для изучения WCAG.  

• Важно понимать и применять рекомендации WCAG для создания доступного контента.  

• Примеры и ссылки на WCAG можно найти в твиттере автора.