Pohon Aksesibilitas: Yang Didengar Pembaca Layar
Cara peramban membangun pohon paralel dari DOM Anda.
Pohon Aksesibilitas: Yang Didengar Pembaca Layar adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.
Pohon Paralel
Peramban mengubah DOM Anda menjadi struktur kedua yang disebut pohon aksesibilitas. Inilah versi yang benar-benar dibaca oleh teknologi bantu.
Dibangun dari DOM Anda
Pohon aksesibilitas dibangun langsung dari HTML Anda. Semantik yang baik menghasilkan pohon yang kaya; kumpulan div yang tidak terstruktur menghasilkan pohon yang kosong dan tidak berguna.
Node Memiliki Peran
Setiap node membawa peran yang menjelaskan apa dirinya: tombol, judul, tautan, atau daftar. Tombol yang sebenarnya mendapatkan peran tombol tanpa usaha tambahan dari Anda.
Node Memiliki Nama
Setiap node juga memiliki nama yang dapat diakses, yaitu teks yang diucapkan pembaca layar. Untuk tombol, biasanya nama tersebut adalah label yang terlihat di dalamnya.
<button>Save changes</button>Node Memiliki Status
Node interaktif juga menampilkan status, seperti dicentang, diperluas, atau dinonaktifkan. Dengan demikian, pengguna dapat mendengar bahwa kotak sudah dicentang.
Peran, Nama, Status, Nilai
Jadi, setiap node pada dasarnya terdiri dari peran, nama, status, dan nilai. Paket kecil inilah yang dibutuhkan pembaca layar untuk mengumumkan suatu elemen.
Hal Tersembunyi Dikeluarkan
Apa pun yang disembunyikan dengan display none atau aria-hidden akan dihapus dari pohon. Jika tidak ada di dalam pohon, pembaca layar tidak dapat menjangkaunya.
<span aria-hidden="true">decorative</span>Piksel Tidak Ada di Dalam Pohon
Tampilan visual seperti warna dan ukuran tidak pernah masuk ke dalam pohon aksesibilitas. Pengguna pembaca layar mendapatkan makna dan struktur, bukan tata letak Anda.
Markup Buruk, Pohon Rusak
div yang dapat diklik masuk ke dalam pohon sebagai node umum tanpa peran dan nama. Pengguna tidak mendengar informasi yang berguna, meskipun tampilannya seperti tombol.
Anda Dapat Memeriksanya
DevTools peramban menampilkan pohon aksesibilitas langsung untuk elemen apa pun. Ini cara tercepat untuk memastikan apa yang benar-benar akan diumumkan oleh pembaca layar.
Markup Adalah Sumbernya
Pelajaran utamanya: markup Anda adalah sumber pohon tersebut. Perbaiki HTML, dan pohon akan memperbaiki dirinya sendiri tanpa perlu tambalan tambahan.
Pemeriksaan Singkat
Mari kita menguji apa yang didengar pembaca layar.
Ringkasan
Pohon aksesibilitas adalah DOM Anda yang diringkas menjadi peran, nama, status, dan nilai. Perbaiki markup, dan pohon akan mengikutinya. Hal-hal yang tersembunyi akan dikeluarkan. 🎉
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 “Pohon Aksesibilitas: Yang Didengar Pembaca Layar” gratis?
Ya — teks lengkap “Pohon Aksesibilitas: Yang Didengar Pembaca Layar” 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 “Pohon Aksesibilitas: Yang Didengar Pembaca Layar”?
Cara peramban membangun pohon paralel dari DOM Anda. 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 3 dari 4.
Berapa lama pelajaran “Pohon Aksesibilitas: Yang Didengar Pembaca Layar” 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
- Tag Memiliki Makna: Mengapa Sup div Gagal
- Elemen Teks: Paragraf, Daftar, dan Penekanan
- Pohon Aksesibilitas: Yang Didengar Pembaca Layar
- Bawaan vs Kustom: Kapan Menggunakan Elemen Asli