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. 📘

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.

Every APG pattern has the same sections: an overview, the keyboard interaction, the required ARIA roles and attributes, and live examples to study.

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 WAI-ARIA Roles, States, and Properties table lists every attribute the widget needs and when each one changes. Skip none of them.

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.

The APG opens with a warning: prefer native HTML when it exists. Only reach for these patterns when no real element does the job.

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.

Many patterns describe exactly where focus must go and how it moves. Following that focus choreography is as important as the ARIA itself.

Once built, walk your widget through the APG keyboard table key by key. If every row passes, you have matched the proven behavior.

The APG is versioned and updated as ARIA evolves, so check the current edition rather than an old blog post copying it.

You are about to build a custom widget. What should the APG steer you toward first?

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. ✅