Pepohon Kebolehcapaian: Perkara yang Didengar Pembaca Skrin
Cara pelayar membina pepohon selari daripada DOM anda.
Pepohon Kebolehcapaian: Perkara yang Didengar Pembaca Skrin ialah pelajaran Web Accessibility Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Web Accessibility Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Web Accessibility Academy merangkumi sejumlah 4 pelajaran.
Pepohon Selari
Pelayar menukar DOM anda menjadi struktur kedua yang dipanggil pepohon kebolehcapaian. Inilah versi yang sebenarnya dibaca oleh teknologi bantuan.
Dibina daripada DOM Anda
Pepohon kebolehcapaian dibina terus daripada HTML anda. Semantik yang baik menghasilkan pepohon yang kaya; sup div menghasilkan pepohon yang kosong dan tidak berguna.
Nod Mempunyai Peranan
Setiap nod membawa peranan yang menyatakan perkara itu: butang, pengepala, pautan atau senarai. Butang sebenar mendapat peranan butang tanpa usaha daripada anda.
Nod Mempunyai Nama
Setiap nod juga mempunyai nama yang boleh diakses, iaitu teks yang disebut oleh pembaca skrin. Bagi butang, nama itu biasanya label yang kelihatan di dalamnya.
<button>Save changes</button>Nod Mempunyai Keadaan
Nod interaktif turut mendedahkan keadaan, seperti ditandai, dikembangkan atau dilumpuhkan. Dengan cara inilah pengguna mendengar bahawa kotak sudah ditanda.
Peranan, Nama, Keadaan, Nilai
Jadi setiap nod boleh diringkaskan kepada peranan, nama, keadaan dan nilai. Pakej kecil itu merangkumi segala yang diperlukan pembaca skrin untuk mengumumkan unsur.
Perkara Tersembunyi Disingkirkan
Apa-apa yang disembunyikan dengan display none atau aria-hidden dikeluarkan daripada pepohon. Jika ia tiada dalam pepohon, pembaca skrin tidak dapat mencapainya.
<span aria-hidden="true">decorative</span>Piksel Tiada dalam Pepohon
Gaya visual seperti warna dan saiz tidak pernah masuk ke dalam pepohon kebolehcapaian. Pengguna pembaca skrin mendapat maksud dan struktur, bukan susun atur anda.
Penanda Buruk, Pepohon Rosak
div yang boleh diklik masuk ke dalam pepohon sebagai nod umum tanpa peranan dan nama. Pengguna tidak mendengar apa-apa yang berguna walaupun ia kelihatan seperti butang.
Anda Boleh Memeriksanya
DevTools pelayar memaparkan pepohon kebolehcapaian langsung bagi mana-mana unsur. Inilah cara terpantas untuk mengesahkan perkara yang sebenarnya akan diumumkan oleh pembaca skrin.
Penanda ialah Sumbernya
Pengajaran utama: penanda anda ialah sumber pepohon. Betulkan HTML dan pepohon akan membetulkan dirinya sendiri tanpa tampalan tambahan.
Semakan Pantas
Mari kita menguji perkara yang didengar oleh pembaca skrin.
Ringkasan
Pepohon kebolehcapaian ialah DOM anda yang diringkaskan kepada peranan, nama, keadaan dan nilai. Betulkan penanda dan pepohon akan mengikutinya. Perkara tersembunyi disingkirkan. 🎉
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Pepohon Kebolehcapaian: Perkara yang Didengar Pembaca Skrin” percuma?
Ya — teks penuh “Pepohon Kebolehcapaian: Perkara yang Didengar Pembaca Skrin” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Web Accessibility Academy, tingkat taraf kepada CoddyKit PRO. Kursus Web Accessibility Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Pepohon Kebolehcapaian: Perkara yang Didengar Pembaca Skrin”?
Cara pelayar membina pepohon selari daripada DOM anda. Anda berlatih Web Accessibility Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Web Accessibility Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Web Accessibility Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Pepohon Kebolehcapaian: Perkara yang Didengar Pembaca Skrin” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Web Accessibility Academy ini?
Ya. Setiap pelajaran Web Accessibility Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Tag Mempunyai Makna: Mengapa Sup div Gagal
- Unsur Teks: Perenggan, Senarai dan Penekanan
- Pepohon Kebolehcapaian: Perkara yang Didengar Pembaca Skrin
- Asli berbanding Tersuai: Bila Perlu Memilih Unsur Sebenar