APG'yi Okuma: Kalıplar, Tuşlar ve Örnekler
Kılavuzu her bileşen için belirtiminiz olarak kullanın.
APG'yi Okuma: Kalıplar, Tuşlar ve Örnekler, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Web Accessibility Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
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. ✅
Sıkça Sorulan Sorular
“APG'yi Okuma: Kalıplar, Tuşlar ve Örnekler” dersi ücretsiz mi?
Evet — “APG'yi Okuma: Kalıplar, Tuşlar ve Örnekler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Web Accessibility Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
“APG'yi Okuma: Kalıplar, Tuşlar ve Örnekler” dersinde ne öğreneceğim?
Kılavuzu her bileşen için belirtiminiz olarak kullanın. Web Accessibility Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Web Accessibility Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Web Accessibility Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“APG'yi Okuma: Kalıplar, Tuşlar ve Örnekler” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Web Accessibility Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Web Accessibility Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- APG'yi Okuma: Kalıplar, Tuşlar ve Örnekler
- Combobox ve Otomatik Tamamlamayı Doğru Oluşturma
- Menü, Menubar ve Menü Düğmesi
- Treegrid ve Diğer Gelişmiş Kalıplar