Frontend Academy · Pelajaran

Role dan Atribut ARIA

Terapkan role penanda, region langsung, dan atribut aria-* untuk menyempurnakan komponen ketika HTML asli tidak memadai.

Pelajaran 3 dari 414 langkah

Role dan Atribut ARIA adalah pelajaran Frontend 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa Itu ARIA?

ARIA (Aplikasi Internet Kaya yang Aksesibel) adalah sekumpulan atribut HTML yang menjelaskan peran, status, dan properti elemen kepada teknologi asistif. ARIA menjadi penghubung bagi widget khusus yang tidak dapat dinyatakan dengan HTML asli.

Aturan Pertama ARIA: Jangan Gunakan ARIA

Jika elemen asli dapat melakukan apa yang Anda perlukan, gunakan elemen tersebut. <button> lebih baik daripada <div role="button">. ARIA yang digunakan secara keliru lebih buruk daripada tidak menggunakan ARIA — tampilannya seolah-olah aksesibel, tetapi pengguna tetap tidak dapat menggunakannya.

Kategori Atribut ARIA

Tiga kategori: peran (menjelaskan apa sesuatu itu), properti (relatif statis — aria-label, aria-describedby), dan status (dinamis — aria-expanded, aria-pressed, aria-checked).

Peran Penanda Wilayah

Identifikasi wilayah utama halaman. Sebagian besar memiliki padanan HTML5 dan Anda sebaiknya memilih padanan tersebut.

<!-- HTML5 (preferred): -->
<nav>...</nav>
<main>...</main>
<aside>...</aside>

<!-- ARIA equivalents (use only when HTML5 won't work): -->
<div role="navigation">...</div>
<div role="main">...</div>
<div role="complementary">...</div>

aria-label dan aria-labelledby

aria-label: berikan nama aksesibel menggunakan string. aria-labelledby: jadikan teks elemen lain sebagai referensi nama. Gunakan ini ketika teks yang terlihat tidak ada atau tidak memadai.

<!-- Icon-only button needs a label: -->
<button aria-label="Close dialog">
  <svg>...</svg>
</button>

<!-- Section labelled by its heading: -->
<section aria-labelledby="settings-title">
  <h2 id="settings-title">Settings</h2>
  ...
</section>

aria-describedby untuk Petunjuk

aria-describedby menghubungkan elemen dengan deskripsi yang lebih panjang. Ini berguna untuk petunjuk formulir, pesan galat, dan keterangan alat.

<label for="password">Password</label>
<input id="password" type="password" aria-describedby="pw-hint">
<p id="pw-hint">Must be at least 12 characters with a number and symbol.</p>

aria-expanded untuk Pengungkapan

Tombol yang menampilkan atau menyembunyikan panel harus mengekspos aria-expanded = true/false.

<button aria-expanded="false" aria-controls="faq-1" onclick="toggle()">
  How do I cancel?
</button>
<div id="faq-1" hidden>
  Visit Settings &gt; Billing to cancel.
</div>

aria-pressed untuk Tombol Toggle

Tombol dengan status aktif/nonaktif (bisukan, tebal) menggunakan aria-pressed.

<button aria-pressed="true" onclick="toggleBold()">
  Bold
</button>

Wilayah Langsung: aria-live

Konten yang diperbarui secara dinamis (notifikasi singkat, hasil pencarian, ringkasan galat) harus berada di wilayah langsung agar pembaca layar mengumumkan perubahannya. polite menunggu jeda; assertive menyela.

<!-- Toast container -->
<div aria-live="polite" aria-atomic="true" id="toast-region"></div>

<!-- Critical alert -->
<div role="alert">Session expired. Please log in again.</div>

Singkatan role="alert"

role="alert" adalah singkatan untuk wilayah langsung yang bersifat tegas dengan aria-atomic. Gunakan secukupnya — setiap peringatan menyela pengguna.

aria-hidden untuk Konten Dekoratif

aria-hidden="true" menghapus elemen dari pohon aksesibilitas. Gunakan pada ikon dekoratif di samping label teks — jika tidak, pembaca layar akan mengumumkannya secara berulang.

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

Uji dengan Pembaca Layar

Satu-satunya cara untuk mengetahui apakah ARIA berfungsi adalah dengan mengujinya. VoiceOver (macOS/iOS, gratis), NVDA (Windows, gratis), TalkBack (Android, gratis). Sepuluh menit menggunakan VoiceOver mengungkapkan lebih banyak hal daripada alat audit mana pun.

Pemeriksaan Singkat

Atribut ARIA apa yang harus Anda tetapkan pada tombol yang hanya berisi ikon dan tidak memiliki label teks yang terlihat?

Jawab di pelajaran interaktif

Rangkuman: ARIA

ARIA menjelaskan peran, properti, dan status kepada teknologi asistif. Dahulukan HTML asli sebelum menggunakan ARIA. aria-label/aria-labelledby memberikan nama aksesibel. aria-describedby digunakan untuk petunjuk. aria-expanded/aria-pressed digunakan untuk toggle. aria-live digunakan untuk pengumuman dinamis. aria-hidden digunakan untuk konten dekoratif. Selalu lakukan pengujian dengan pembaca layar sungguhan.

Gratis untuk memulai

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: 41
Pelajaran: 163

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Role dan Atribut ARIA” gratis?

Ya — teks lengkap “Role dan Atribut 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 “Role dan Atribut ARIA”?

Terapkan role penanda, region langsung, dan atribut aria-* untuk menyempurnakan komponen ketika HTML asli tidak memadai. 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 3 dari 4.

Berapa lama pelajaran “Role dan Atribut 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

← Kembali ke Frontend Academy