Membaca APG: Pola, Tombol, dan Contoh
Gunakan panduan ini sebagai spesifikasi untuk widget apa pun.
Membaca APG: Pola, Tombol, dan Contoh adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Web Accessibility Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Web Accessibility Academy mencakup 4 pelajaran total.
Kenali APG
Panduan Praktik Penulisan ARIA adalah panduan resmi W3C untuk membangun widget khusus dengan cara yang benar. Jika Anda ragu, jadikan panduan ini sebagai spesifikasi Anda. 📘
Jangan Membuat Ulang dari Awal
APG memberi Anda pola yang telah terbukti untuk tab, menu, dialog, dan lainnya. Anda menyalin resep yang telah diuji, bukan menebak-nebak peran dan tombol sendiri.
Anatomi Sebuah Pola
Setiap pola APG memiliki bagian yang sama: ikhtisar, interaksi papan ketik, peran dan atribut ARIA yang diperlukan, serta contoh langsung untuk dipelajari.
Papan Ketik Adalah Kontraknya
Tabel Interaksi Papan Ketik memberi tahu Anda secara tepat apa yang harus dilakukan setiap tombol. Pengguna mengharapkan tombol-tombol ini, jadi perlakukan tabel tersebut sebagai persyaratan mutlak.
Tabel Peran
Tabel Peran, Status, dan Properti WAI-ARIA mencantumkan setiap atribut yang diperlukan widget dan kapan masing-masing atribut berubah. Jangan melewatkan satu pun.
Pelajari Contohnya
Setiap pola dilengkapi contoh yang berfungsi dengan sumber lengkap. Baca, uji dengan pembaca layar, lalu sesuaikan markup tersebut dengan antarmuka Anda sendiri.
<div role="tablist" aria-label="Settings">
<button role="tab" aria-selected="true">General</button>
</div>Utamakan Native, Selalu
APG dimulai dengan peringatan: utamakan HTML native jika tersedia. Gunakan pola-pola ini hanya jika tidak ada elemen nyata yang dapat menjalankan tugas tersebut.
Status Berubah saat Runtime
Pola memisahkan peran tetap dari status yang berubah. Anda menetapkan aria-expanded atau aria-selected dengan JavaScript saat pengguna berinteraksi, bukan hanya sekali di HTML.
Fokus Adalah Bagian dari Spesifikasi
Banyak pola menjelaskan secara tepat ke mana fokus harus berpindah dan bagaimana fokus bergerak. Mengikuti alur fokus tersebut sama pentingnya dengan ARIA itu sendiri.
Uji Berdasarkan Polanya
Setelah selesai dibangun, jalankan widget Anda melalui setiap tombol pada tabel papan ketik APG. Jika setiap baris berhasil, Anda telah menyesuaikan perilaku yang telah terbukti.
Ini Adalah Panduan yang Terus Berkembang
APG memiliki versi dan diperbarui seiring perkembangan ARIA, jadi periksa edisi terbaru, bukan artikel blog lama yang menyalinnya.
Pemeriksaan Singkat
Anda akan membangun widget khusus. Ke arah mana APG seharusnya membimbing Anda terlebih dahulu?
Rangkuman
APG adalah spesifikasi widget Anda: utamakan native, lalu ikuti peran, status, tombol, dan fokus pada setiap pola. Uji berdasarkan tabelnya agar Anda merilis perilaku yang sudah dikenal pengguna. ✅
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Membaca APG: Pola, Tombol, dan Contoh” gratis?
Ya — teks lengkap “Membaca APG: Pola, Tombol, dan Contoh” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Web Accessibility Academy, upgrade ke CoddyKit PRO. Kursus Web Accessibility Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Membaca APG: Pola, Tombol, dan Contoh”?
Gunakan panduan ini sebagai spesifikasi untuk widget apa pun. Kamu berlatih Web Accessibility Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Web Accessibility Academy?
Tidak diperlukan pengalaman sebelumnya. Web Accessibility Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Membaca APG: Pola, Tombol, dan Contoh” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Web Accessibility Academy ini?
Ya. Setiap pelajaran Web Accessibility Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Membaca APG: Pola, Tombol, dan Contoh
- Combobox dan Pelengkapan Otomatis yang Tepat
- Menu, Menubar, dan Tombol Menu
- Treegrid dan Pola Lanjutan Lainnya