0Pricing
Frontend Academy · Pelajaran

ARIA dan Aksesibilitas: label, role, aria-*

Hubungkan label dengan kontrol, terapkan peran ARIA jika diperlukan, dan gunakan aria-label serta aria-describedby untuk mendukung pembaca layar.

ARIA dan Aksesibilitas: label, role, aria-* adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Mengapa ARIA?

ARIA (Aplikasi Internet Kaya yang Aksesibel) adalah kumpulan atribut HTML yang menyampaikan tujuan, status, dan properti komponen antarmuka kepada teknologi bantu seperti pembaca layar — terutama untuk widget khusus yang tidak memiliki padanan HTML bawaan.

Aturan Pertama ARIA

Jangan gunakan ARIA jika elemen atau atribut HTML bawaan dapat melakukan tugas tersebut. <button> selalu lebih baik daripada <div role="button">. HTML bawaan memberikan aksesibilitas secara gratis.

Peran Penanda

Peran penanda ARIA memungkinkan pengguna pembaca layar berpindah langsung ke berbagai bagian halaman. Sebagian besar peran tersebut tersirat dari HTML semantik: <main> → role=main, <nav> → role=navigation. Tambahkan peran eksplisit hanya jika elemen semantik tidak digunakan.

<div role="main">...</div>    <!-- prefer <main> -->
<div role="navigation">...</div>  <!-- prefer <nav> -->
<div role="banner">...</div>      <!-- prefer <header> at page level -->

aria-label

aria-label menyediakan nama aksesibel yang tidak terlihat untuk suatu elemen. Gunakan ketika tidak ada label teks yang terlihat untuk dijadikan rujukan. Atribut ini umum digunakan untuk tombol ikon.

<button aria-label="Close dialog">×</button>
<a href="/rss.xml" aria-label="Subscribe to RSS feed">
  <img src="rss-icon.svg" alt="">
</a>

aria-labelledby

aria-labelledby menunjuk ke teks elemen lain sebagai label, menggunakan rujukan ID. Atribut ini lebih disarankan daripada aria-label jika label yang terlihat sudah tersedia.

<h2 id="billing-title">Billing Information</h2>
<form aria-labelledby="billing-title">
  ...
</form>

aria-describedby

aria-describedby merujuk ke teks deskriptif tambahan — seperti pesan kesalahan atau petunjuk — yang melengkapi label. Pembaca layar membaca label terlebih dahulu, kemudian deskripsinya.

<input id="pass" type="password" aria-describedby="pass-hint">
<p id="pass-hint">Must be at least 12 characters with a symbol.</p>

aria-expanded dan aria-haspopup

Widget dinamis memerlukan atribut status. aria-expanded menunjukkan apakah widget pengungkapan (akordeon, menu tarik-turun) sedang terbuka atau tertutup. Perbarui atribut ini dalam JavaScript ketika status berubah.

<button aria-expanded="false" aria-controls="menu" id="menu-btn">Menu</button>
<ul id="menu" hidden>...</ul>

<!-- On toggle: -->
btn.setAttribute('aria-expanded', 'true');
menu.removeAttribute('hidden');

aria-hidden

aria-hidden="true" menghapus suatu elemen beserta semua turunannya dari pohon aksesibilitas. Gunakan untuk elemen dekoratif seperti ikon SVG yang sudah diberi label oleh teks yang terlihat.

<button>
  <svg aria-hidden="true" focusable="false">...</svg>
  Save Draft
</button>

Wilayah Dinamis: aria-live

aria-live memberi tahu pembaca layar untuk mengumumkan perubahan pada wilayah ini. polite menunggu hingga pengguna menyelesaikan tindakan yang sedang dilakukan. assertive langsung menyela (gunakan dengan hemat).

<div aria-live="polite" aria-atomic="true">
  <!-- Status messages announced when updated -->
  Form saved successfully.
</div>

role="alert"

role="alert" secara implisit berarti aria-live=assertive. Masukkan pesan kesalahan atau pemberitahuan penting ke dalam elemen dengan peran ini agar pembaca layar segera mengumumkannya.

const errorEl = document.querySelector('[role="alert"]');
errorEl.textContent = 'Email is required.'; // announced immediately

Kesalahan Formulir yang Aksesibel

Ketika suatu bidang memiliki kesalahan: gunakan aria-invalid="true", hubungkan pesan kesalahan dengan aria-describedby, dan perbarui konten role="alert". Pendekatan tiga bagian ini memastikan pembaca layar menyampaikan semua informasi yang diperlukan.

<input id="email" type="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error" role="alert">Please enter a valid email address.</p>

Pemeriksaan Singkat

Atribut ARIA mana yang menyediakan nama aksesibel untuk suatu elemen ketika tidak ada label teks yang terlihat?

Ringkasan: Dasar-Dasar ARIA

Utamakan HTML bawaan daripada ARIA. Gunakan aria-label untuk tombol ikon. Gunakan aria-labelledby untuk merujuk ke label yang terlihat. Gunakan aria-describedby untuk petunjuk dan kesalahan. Gunakan aria-expanded untuk widget pengungkapan. Gunakan aria-hidden untuk konten dekoratif. Gunakan aria-live untuk pembaruan status dinamis. Gunakan aria-invalid + role=alert untuk kesalahan formulir.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “ARIA dan Aksesibilitas: label, role, aria-*” gratis?

Ya — teks lengkap “ARIA dan Aksesibilitas: label, role, aria-*” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “ARIA dan Aksesibilitas: label, role, aria-*”?

Hubungkan label dengan kontrol, terapkan peran ARIA jika diperlukan, dan gunakan aria-label serta aria-describedby untuk mendukung pembaca layar. Kamu berlatih Frontend 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 Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend 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 2 dari 4.

Berapa lama pelajaran “ARIA dan Aksesibilitas: label, role, aria-*” 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 Frontend Academy ini?

Ya. Setiap pelajaran Frontend 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

  1. Kontrol Formulir: tipe input, select, textarea
  2. ARIA dan Aksesibilitas: label, role, aria-*
  3. HTML5 Semantik: Semantik vs Sup Div
  4. Atribut Validasi Formulir
← Kembali ke Frontend Academy