Перейти к содержимому
Pandus
ru Сменить язык
Меню

Доступные UI-паттерны: WCAG, WAI-ARIA и APG

Обновлено 14 октября 2026 г. · 6 мин чтения

Ищете «WCAG combobox» или «WCAG tabs» — и попадаете в три разных документа W3C, которые отвечают на разные вопросы. Эта серия разбирает каждый распространённый паттерн интерфейса интернет-магазина: для чего он, какие критерии WCAG к нему относятся, короткий правильный пример HTML, ожидаемое поведение с клавиатуры и что автоматическая проверка может и не может найти. На этой странице — как эти документы связаны между собой и список всех паттернов.

Это технические рекомендации, а не юридическая консультация.

WCAG, WAI-ARIA и ARIA Authoring Practices

Документ Что это На что отвечает
WCAG 2.2 Рекомендация W3C, стандарт, на котором основаны EN 301 549 и большинство законов Каким должен быть результат: доступ с клавиатуры, имена, контраст, сообщения об ошибках
WAI-ARIA 1.2 Рекомендация W3C (6 июня 2023 года) с ролями, состояниями и свойствами Как сообщить ассистивным технологиям, что представляет собой нестандартный элемент: role="tab", aria-expanded
ARIA Authoring Practices Guide (APG) Рекомендации W3C WAI с паттернами и примерами Как должен вести себя виджет: какие клавиши, куда перемещается фокус, какие атрибуты

WCAG не называет ни одного виджета по имени. Он говорит, например, что каждый элемент управления должен сообщать своё имя, роль и состояние (4.1.2), что всё должно работать с клавиатуры (2.1.1), что фокус должен быть видимым (2.4.7) и что структура должна быть в коде, а не только в вёрстке (1.3.1). Большую часть этого нативный HTML даёт бесплатно. Когда вы делаете то, чего в HTML нет, — вкладки, комбобокс с подсказками, карусель, — WAI-ARIA позволяет это описать, а APG рассказывает, какого поведения ждут пользователи ассистивных технологий.

W3C описывает WAI-ARIA как способ сделать доступными «динамический контент и продвинутые элементы управления интерфейса», а APG — как дополнение, которое «рекомендует подходы, помогающие разработчикам веб-приложений делать виджеты» доступными. APG — не требование соответствия: можно соответствовать WCAG и с другим, хорошо протестированным решением. Во введении к нему сказано, что тестирование с ассистивными технологиями «обязательно, прежде чем использовать код из этого руководства в продакшене».

Сначала нативный HTML

Заметка W3C Using ARIA сформулировала это как первое правило использования ARIA: если можно использовать нативный элемент или атрибут HTML, в который уже встроены нужная семантика и поведение, используйте его, а не перепрофилируйте другой элемент, добавляя ARIA. Другие её правила: не меняйте нативную семантику без крайней необходимости; все интерактивные элементы управления ARIA должны работать с клавиатуры; никогда не ставьте role="presentation" или aria-hidden="true" на элемент, который получает фокус. (Сейчас эта заметка опубликована как прекращённый черновик и отсылает к APG, но её правила по-прежнему общая база.)

APG говорит то же своими словами: «Лучше без ARIA, чем с плохим ARIA» и «роль — это обещание». role="button" на div обещает кнопку, но «роли ARIA не заставляют браузеры добавлять поведение клавиатуры или стили» — сделать элемент фокусируемым и реагировать на Enter и пробел вам всё равно придётся самим.

<!-- Нативно: имя, роль, фокус и клавиатура бесплатно -->
<button type="button">В корзину</button>

<!-- Пересобрано: каждую часть нужно добавить вручную, и её часто забывают -->
<div role="button" tabindex="0" onclick="add()" onkeydown="addOnEnterOrSpace(event)">В корзину</div>

Паттерны этой серии

Базовые элементы управления

Всплывающие элементы и оверлеи

Навигация и структура

  • Меню навигации — почему APG рекомендует для сайтов раскрывающуюся навигацию (disclosure), а не menubar
  • Хлебные крошки — подписанный nav и aria-current="page"
  • Вкладки — tablist, стрелки и автоматическая активация
  • Аккордеон — заголовки с кнопками или details и summary
  • Таблица данных — настоящая разметка table, заголовки и подпись
  • Карусель — кнопка паузы, подписанные слайды, никакой неожиданной прокрутки

Формы

Что автоматическая проверка находит в паттернах

Наши проверки запускают axe-core в настоящем браузере на странице в том виде, в каком она загружается. Для паттернов это значит, что они надёжно находят структурные проблемы: кнопки и ссылки без имени, поля форм без подписи, неизвестные роли, атрибуты ARIA, которые недопустимы для роли или указывают на несуществующий ID, tab вне tablist, фокусируемые элементы, скрытые через aria-hidden. Каждая находка ведёт на свою карточку в библиотеке правил.

Они не могут найти проблемы поведения: перемещают ли стрелки между вкладками, попадает ли фокус в диалог и возвращается ли потом, меняется ли aria-expanded, когда меню открывается, можно ли поставить карусель на паузу. Содержимое, скрытое при загрузке страницы, например закрытый диалог, вообще не тестируется; расширение для браузера проверяет страницу в том состоянии, которое показывает ваш браузер, поэтому диалог можно сначала открыть. Ручную часть с клавиатурой и программой экранного доступа спланируйте так, как описано в статье как проверить сайт на WCAG.

Начните с бесплатной проверки одной страницы. Это автоматическая проверка, а не полный аудит.

Частые вопросы

Чем WCAG отличается от WAI-ARIA?

WCAG говорит, каким должен быть результат: например, каждый элемент управления сообщает своё имя, роль и состояние (4.1.2). WAI-ARIA — спецификация W3C с ролями, состояниями и свойствами, один из способов достичь этого результата, когда нативного HTML недостаточно.

Требует ли WCAG использовать ARIA?

Нет. WCAG не зависит от технологий. Нативные элементы HTML — button, a, input, select и table — обычно соответствуют критериям без всякого ARIA. ARIA нужен для нестандартных виджетов, которых нет в HTML, например вкладок.

Что такое ARIA Authoring Practices Guide (APG)?

Ресурс W3C WAI, который описывает, как должны вести себя распространённые виджеты: какие роли и состояния они используют и какие клавиши поддерживают. Это рекомендации, а не требование WCAG, и W3C просит проверять примеры с ассистивными технологиями, прежде чем использовать их в продакшене.

Какое первое правило ARIA?

Если у нативного элемента или атрибута HTML уже есть нужная семантика и поведение, используйте его, а не добавляйте ARIA к другому элементу. Настоящая кнопка лучше, чем div с role button.

Может ли автоматическая проверка тестировать UI-паттерны?

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

Источники

  • W3C WAI, WAI-ARIA overview: https://www.w3.org/WAI/standards-guidelines/aria/
  • W3C WAI, ARIA Authoring Practices Guide, Read Me First: https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/
  • W3C WAI, APG patterns: https://www.w3.org/WAI/ARIA/apg/patterns/
  • W3C, Using ARIA (discontinued draft, rules of ARIA use): https://www.w3.org/TR/using-aria/