Чтение APG: шаблоны, клавиши и примеры
Используйте руководство как спецификацию для любого виджета.
«Чтение APG: шаблоны, клавиши и примеры» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
Meet the APG
The ARIA Authoring Practices Guide is the official W3C playbook for building custom widgets the right way. When you are unsure, it is your spec. 📘
Don't Reinvent It
The APG gives you proven patterns for tabs, menus, dialogs, and more. You copy a tested recipe instead of guessing at roles and keys yourself.
Anatomy of a Pattern
Every APG pattern has the same sections: an overview, the keyboard interaction, the required ARIA roles and attributes, and live examples to study.
Keyboard Is the Contract
The Keyboard Interaction table tells you exactly what each key must do. Users expect these keys, so treat the table as a hard requirement.
The Roles Table
The WAI-ARIA Roles, States, and Properties table lists every attribute the widget needs and when each one changes. Skip none of them.
Study the Examples
Each pattern ships a working example with full source. Read it, test it with a screen reader, then adapt the markup to your own UI.
<div role="tablist" aria-label="Settings">
<button role="tab" aria-selected="true">General</button>
</div>Native First, Always
The APG opens with a warning: prefer native HTML when it exists. Only reach for these patterns when no real element does the job.
States Change at Runtime
Patterns separate fixed roles from changing states. You set aria-expanded or aria-selected with JavaScript as the user interacts, not once in the HTML.
Focus Is Part of the Spec
Many patterns describe exactly where focus must go and how it moves. Following that focus choreography is as important as the ARIA itself.
Test Against the Pattern
Once built, walk your widget through the APG keyboard table key by key. If every row passes, you have matched the proven behavior.
It Is a Living Guide
The APG is versioned and updated as ARIA evolves, so check the current edition rather than an old blog post copying it.
Quick Check
You are about to build a custom widget. What should the APG steer you toward first?
Recap
The APG is your widget spec: native first, then follow each pattern's roles, states, keys, and focus. Test against its tables and you ship behavior users already know. ✅
Часто задаваемые вопросы
Урок «Чтение APG: шаблоны, клавиши и примеры» бесплатный?
Да — полный текст урока «Чтение APG: шаблоны, клавиши и примеры» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Чтение APG: шаблоны, клавиши и примеры»?
Используйте руководство как спецификацию для любого виджета. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Чтение APG: шаблоны, клавиши и примеры»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Чтение APG: шаблоны, клавиши и примеры
- Комбинированное поле и автодополнение без ошибок
- Меню, панель меню и кнопка меню
- Дерево-таблица и другие продвинутые шаблоны