Menamai Beberapa Wilayah dengan aria-label
Bedakan dua nav agar pengguna mengetahui perbedaannya.
Menamai Beberapa Wilayah dengan aria-label 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.
Dua Nav, Satu Masalah
Banyak halaman memiliki menu utama dan menu footer. Keduanya adalah landmark nav, dan tanpa nama, keduanya terdengar sama bagi pembaca layar.
Beri Nama pada Wilayah
Tambahkan aria-label untuk memberikan nama singkat yang diucapkan pada sebuah landmark. Kini pembaca layar dapat membedakan kedua nav Anda.
<nav aria-label="Main">...</nav>
<nav aria-label="Footer">...</nav>Jaga Label Tetap Singkat
aria-label sebaiknya terdiri dari beberapa kata, seperti Main atau Breadcrumb. Pengguna akan mendengarnya saat diumumkan, jadi keringkasan menghargai waktu mereka.
Jangan Ulangi Perannya
Tulislah Footer, bukan Footer navigation. Pembaca layar sudah mengucapkan navigation, jadi menambahkannya lagi hanya menjadi gangguan.
<nav aria-label="Footer">...</nav>Gunakan Judul yang Terlihat Kembali
Jika sebuah wilayah sudah memiliki judul yang terlihat, tunjuk judul itu dengan aria-labelledby daripada mengetikkan nama dua kali.
<nav aria-labelledby="more">
<h2 id="more">More links</h2>
</nav>label vs labelledby
Gunakan aria-label jika tidak ada teks yang terlihat, dan aria-labelledby jika judul atau teks di layar dapat menjadi namanya.
Berlaku untuk Landmark Apa Pun
Pemberian nama bukan hanya untuk nav. Beri label pada aside atau sebuah bagian agar pengguna mengetahui isi setiap wilayah.
<aside aria-label="Related">...</aside>Satu Wilayah, Lewati Labelnya
Jika halaman hanya memiliki satu nav, nav tersebut tidak memerlukan label. Pemberian nama paling penting ketika dua wilayah memiliki peran yang sama.
Nama yang Berbeda Itu Penting
Berikan nama yang berbeda pada setiap wilayah. Dua nav yang sama-sama berlabel Menu menggagalkan tujuannya, karena pengguna tetap tidak dapat membedakannya.
Dengarkan Perbedaannya
Dengan nama yang tersedia, daftar landmark akan berbunyi Main navigation dan Footer navigation, sehingga pengguna dapat langsung memilih yang tepat. 🔊
Label Tidak Terlihat
aria-label diumumkan tetapi tidak pernah ditampilkan di layar, jadi label ini tidak mengubah tampilan apa pun, sekaligus membantu setiap pengguna pembaca layar.
Pemeriksaan Singkat
Anda memiliki dua wilayah nav. Apa label terbaik untuk wilayah yang berada di bawah?
Ringkasan: Beri Nama pada Wilayah Anda
Anda telah belajar memberi label pada landmark berulang dengan aria-label atau aria-labelledby, dengan menjaga nama tetap singkat, berbeda, dan tanpa peran. 🙌
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 “Menamai Beberapa Wilayah dengan aria-label” gratis?
Ya — teks lengkap “Menamai Beberapa Wilayah dengan aria-label” 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 “Menamai Beberapa Wilayah dengan aria-label”?
Bedakan dua nav agar pengguna mengetahui perbedaannya. 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 “Menamai Beberapa Wilayah dengan aria-label” 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
- header, nav, main, footer: Empat Besar
- Menempatkan Konten di main dan Hanya Satu main
- Menamai Beberapa Wilayah dengan aria-label
- Navigasi Landmark: Cara Pengguna Berpindah