Reading the APG: Pattern, Keys, and Examples
Use the guide as your spec for any widget.
Reading the APG: Pattern, Keys, and Examples is a free Web Accessibility Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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. ✅
Frequently asked questions
Is the “Reading the APG: Pattern, Keys, and Examples” lesson free?
Yes — the full text of “Reading the APG: Pattern, Keys, and Examples” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “Reading the APG: Pattern, Keys, and Examples”?
Use the guide as your spec for any widget. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Reading the APG: Pattern, Keys, and Examples” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Reading the APG: Pattern, Keys, and Examples
- Combobox and Autocomplete Done Right
- Menu, Menubar, and the Menu Button
- Treegrid and Other Advanced Patterns