Aturan Pertama: Tanpa ARIA Lebih Baik daripada ARIA yang Buruk
Mengapa HTML bawaan hampir selalu menjadi pilihan yang lebih baik.
Aturan Pertama: Tanpa ARIA Lebih Baik daripada ARIA yang Buruk adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.
Apa Sebenarnya ARIA Itu
ARIA adalah sekumpulan atribut HTML yang memberi tahu teknologi bantu tentang identitas dan fungsi suatu elemen ketika markup saja tidak dapat menjelaskannya.
ARIA Tidak Mengubah Perilaku
Inilah hal pentingnya: ARIA hanya mengubah hal yang diumumkan. ARIA tidak dengan sendirinya menambahkan klik, fokus, atau dukungan keyboard.
<div role="button">Save</div>
<!-- looks like a button, does nothing -->Aturan Pertama ARIA
Aturan resmi yang pertama: jika elemen HTML bawaan dapat melakukan tugasnya, gunakan elemen tersebut daripada membuatnya ulang dengan ARIA.
Elemen Bawaan Sudah Lengkap
Tombol yang sebenarnya dapat menerima fokus, aktif saat Enter dan Spasi ditekan, serta mengumumkan perannya secara otomatis. Anda tidak perlu menulis semua itu sendiri.
<button>Save</button>
<!-- focus, keyboard, role: all built in -->Mengapa ARIA yang Buruk Lebih Parah
Peran yang salah secara aktif memberikan informasi keliru kepada pengguna. ARIA yang buruk lebih berbahaya daripada tanpa ARIA: ARIA dapat menyembunyikan konten atau menjelaskannya secara keliru.
Perangkap Penggantian Makna
ARIA menggantikan semantik bawaan. Jika Anda menambahkan role=presentation pada judul, pembaca layar tidak lagi memperlakukannya sebagai judul.
<h2 role="presentation">Pricing</h2>
<!-- no longer a heading to AT -->Tiga Hal yang Disediakan ARIA
ARIA hanya memberikan tiga jenis informasi: peran (identitasnya), status, dan properti. Itulah seluruh perangkatnya.
ARIA Tidak Menyentuh CSS
Menetapkan aria-hidden pada elemen akan menyembunyikannya dari pembaca layar, tetapi elemen tersebut tetap terlihat sepenuhnya di layar. Kedua lapisan ini terpisah.
<span aria-hidden="true">decorative star</span>
<!-- seen, not heard -->Kapan ARIA Tepat Digunakan
Gunakan ARIA ketika tidak ada elemen bawaan yang sesuai, misalnya untuk daftar tab atau penggeser khusus. Setelah itu, gunakan dengan tepat dan lakukan pengujian.
Pasangkan ARIA dengan JavaScript
Jika Anda harus membuat komponen khusus, ARIA dan JavaScript harus digunakan bersama. ARIA memberi nama dan peran, sedangkan JS menyediakan logika fokus serta keyboard.
Lebih Sedikit Lebih Baik
Halaman yang aksesibel sering kali justru menggunakan sedikit ARIA. Utamakan HTML semantik, dan gunakan ARIA hanya untuk mengisi kekurangan yang tersisa.
Pemeriksaan Singkat
Anda memerlukan kontrol Simpan yang dapat diklik. Pilihan mana yang paling aksesibel?
Ringkasan: Gunakan ARIA dengan Bijak
Anda telah mempelajari bahwa ARIA menjelaskan, bukan mengatur perilaku. Utamakan HTML bawaan, tambahkan ARIA hanya untuk mengisi kekurangan yang nyata, dan selalu mengujinya. 🎯
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Aturan Pertama: Tanpa ARIA Lebih Baik daripada ARIA yang Buruk” gratis?
Ya — teks lengkap “Aturan Pertama: Tanpa ARIA Lebih Baik daripada ARIA yang Buruk” 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 “Aturan Pertama: Tanpa ARIA Lebih Baik daripada ARIA yang Buruk”?
Mengapa HTML bawaan hampir selalu menjadi pilihan yang lebih baik. 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 1 dari 4.
Berapa lama pelajaran “Aturan Pertama: Tanpa ARIA Lebih Baik daripada ARIA yang Buruk” 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
- Aturan Pertama: Tanpa ARIA Lebih Baik daripada ARIA yang Buruk
- Peran Menentukan Apa Arti Sesuatu
- Status dan Properti: diperluas, dicentang, dinonaktifkan
- Membaca Pohon Aksesibilitas untuk Menelusuri Kesalahan ARIA