--- title: "WCAG" description: "WCAG 2.2 AA, рекомендации W3C по доступности сайтов: контраст, навигация с клавиатуры, alt-тексты, субтитры. Делаем сайты доступными для всех." url: https://seo7.es/ru/wcag canonical: https://seo7.es/ru/wcag lang: ru type: WebPage --- # WCAG > WCAG 2.2 AA, рекомендации W3C по доступности сайтов: контраст, навигация с клавиатуры, alt-тексты, субтитры. Делаем сайты доступными для всех. Страница: https://seo7.es/ru/wcag ## Описание для ИИ WCAG (Web Content Accessibility Guidelines): руководство W3C по обеспечению доступности веб-контента для людей с ограниченными возможностями. Уровень AA является обязательным стандартом для государственных сайтов ЕС согласно директиве об общедоступности. Google также учитывает доступность при оценке качества сайта. Доступный сайт охватывает более широкую аудиторию и лучше индексируется поисковиками. Семантическая вёрстка и alt-тексты напрямую влияют на позиции в Google. ## Вопросы и ответы ### Что означают четыре принципа WCAG? Воспринимаемость: контент доступен через разные органы чувств. Управляемость: сайтом можно пользоваться с клавиатуры, без мыши. Понятность: текст читаем, а поведение интерфейса предсказуемо. Устойчивость: сайт совместим со вспомогательными технологиями, например экранными читалками. На этих четырёх принципах строится всё руководство W3C по доступности веб-контента. ### Сколько критериев входит в уровень AA? Уровень AA включает больше 50 критериев успеха. Они распределены по четырём принципам WCAG: воспринимаемость, управляемость, понятность и устойчивость. Среди них контраст текста не ниже 4.5:1 и управление с клавиатуры. Студия реализует AA семью практиками, от семантической разметки до тестов с экранными читалками. ### Для кого WCAG 2.2 AA обязателен в ЕС? Уровень AA обязателен для государственных сайтов Евросоюза: этого требует европейская директива об общедоступности 2016/2102. Для коммерческих сайтов прямой обязанности страница стандарта не называет, зато отмечает, что соответствие снижает юридические риски в ряде стран, а Google учитывает доступность при оценке качества сайта. ### Сколько людей нуждаются в доступном сайте? По странице стандарта 15% населения мира имеют те или иные ограничения возможностей. Сайт без доступности рискует оставить эту часть аудитории без нужной информации и услуг. Поэтому доступный сайт охватывает более широкую аудиторию, и это первая польза WCAG, которую называет страница в блоке о бизнесе. ### Как доступность влияет на SEO? Google использует семантику страницы и alt-тексты изображений при ранжировании. Поэтому семантическая вёрстка и alt-тексты для значимых изображений напрямую влияют на позиции в Google. Доступный сайт к тому же лучше индексируется поисковиками и охватывает более широкую аудиторию. Об этом прямо сказано в блоке о пользе для бизнеса. ### Чем проверяют сайт на доступность? Сайт тестируют с экранными читалками NVDA и VoiceOver. Сайт полностью поддерживает клавиатурную навигацию и focus-состояния, то есть видно, где находится фокус при переходе по элементам. Так проверяется управляемость, второй принцип WCAG: сайтом можно пользоваться без мыши. Тестирование входит в каждый проект студии. ### Какой контраст текста закладывает студия? Минимум 4.5:1 между текстом и фоном, этого требует уровень AA. Где возможно, контраст поднимают до 7:1, это уже уровень AAA. Контраст входит в семь практик, по которым студия реализует WCAG, вместе с семантической разметкой, alt-текстами и субтитрами и транскриптами для видео и аудио. ### Зачем субтитры и транскрипты на сайте? Субтитры и транскрипты к видео- и аудиоконтенту делают его воспринимаемым для тех, кто не может слушать звук. Это прямо следует из первого принципа WCAG: контент доступен через разные органы чувств. Если на сайте есть видео или аудио, текстовая версия входит в работу по уровню AA. ### Нужны ли alt-тексты для каждой картинки? Alt-тексты пишутся для всех значимых изображений, то есть тех, что несут смысл. По ним экранные читалки пересказывают картинку человеку, который её не видит, а Google использует их для ранжирования. Alt-тексты стоят среди четырёх главных практик в карточке WCAG вместе с контрастом, клавиатурой и ARIA-разметкой. ### Что такое ARIA-атрибуты и где они нужны? ARIA-атрибуты добавляются интерактивным компонентам: кнопкам, меню, раскрывающимся блокам и окнам. Они сообщают вспомогательным технологиям, что это за элемент и в каком он состоянии. Так соблюдается принцип устойчивости WCAG, совместимость со вспомогательными технологиями, и сайт правильно работает в экранных читалках NVDA и VoiceOver. ### Чем WCAG 2.2 AA полезен бизнесу в Испании? В Испании и ЕС соответствие WCAG снижает правовые риски и открывает доступ к государственным тендерам. Это выгода сверх расширения аудитории и роста позиций в поиске, о которых говорят остальные пункты страницы. Студия закладывает WCAG 2.2 AA в каждый проект вместе с GDPR, ISO 27001 и ISO 9001. ### Почему семантическая HTML-разметка важна для доступности? Семантическая HTML-разметка с правильной иерархией заголовков от H1 до H6 описывает структуру страницы так, что её понимают и вспомогательные технологии, и поисковики. Это первая из семи практик, которыми студия реализует WCAG 2.2 AA в каждом проекте, и основа принципа устойчивости: совместимости со вспомогательными технологиями. ### Где официальная документация WCAG? На странице стандарта есть ссылка на официальную документацию W3C по стандартам и руководствам WCAG. Консорциум W3C и выпускает эти рекомендации по доступности веб-контента. Если нужно понять, что из них важно вашему сайту, студия обсудит проект: бриф и WhatsApp стоят в финальном блоке страницы. ### Помогает ли доступность пользователям телефонов? Да. Страница стандарта прямо отмечает, что доступность улучшает UX для всех пользователей, включая мобильных. Понятный текст и предсказуемое поведение интерфейса, которых требует принцип понятности WCAG, одинаково нужны на компьютере и на телефоне. Поэтому доступность выгодна и сайтам, где большинство посетителей приходит с телефона. ## Другие языки - ES: https://seo7.es/es/wcag - EN: https://seo7.es/en/wcag ## Разметка schema.org ```json { "@context": "https://schema.org", "@type": "WebPage", "name": "WCAG", "description": "WCAG 2.2 AA, рекомендации W3C по доступности сайтов: контраст, навигация с клавиатуры, alt-тексты, субтитры. Делаем сайты доступными для всех.", "url": "https://seo7.es/ru/wcag", "mainEntityOfPage": "https://seo7.es/ru/wcag", "inLanguage": "ru-RU", "isPartOf": { "@type": "WebSite", "name": "SEO7.ES", "url": "https://seo7.es/" }, "publisher": { "@type": "Organization", "name": "SEO7.ES", "url": "https://seo7.es/" } } ```