jsx-a11y dan Pengaman Tingkat Komponen
Temukan masalah melalui aturan lint di basis kode Anda.
jsx-a11y dan Pengaman Tingkat Komponen adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.
Temukan Kesalahan Sebelum Dirilis
Banyak kesalahan aksesibilitas mudah ditemukan dalam kode. Pemeriksa kode dapat menandainya saat Anda mengetik, jauh sebelum pengguna nyata mengalami hambatan tersebut. 🛡️
Kenali jsx-a11y
Paket eslint-plugin-jsx-a11y menambahkan aturan aksesibilitas ke ESLint untuk JSX. Paket ini memeriksa komponen Anda dari kesalahan a11y umum yang sudah dikenal.
npm install eslint-plugin-jsx-a11y --save-devAktifkan Kumpulan Rekomendasi
Perluas konfigurasi recommended milik plugin untuk mengaktifkan kumpulan dasar aturan sekaligus, alih-alih mengaktifkannya satu per satu secara manual.
extends: ['plugin:jsx-a11y/recommended']Aturan Teks Alternatif
Plugin memperingatkan ketika img tidak memiliki atribut alt. Satu aturan ini mencegah kegagalan aksesibilitas yang sangat umum dan berdampak besar.
<img src="logo.png" alt="Acme logo" />Menangkap Click pada Elemen Statis
Menempatkan onClick pada div tanpa dukungan papan ketik akan memicu peringatan. Perbaikannya adalah menggunakan button sungguhan yang dapat menerima focus dan siap digunakan dengan papan ketik.
Pemeriksaan Keterkaitan Label
Aturan memverifikasi bahwa kontrol formulir memiliki label terkait. Field tanpa label akan ditandai agar tidak pernah sampai kepada pengguna tanpa nama.
Hanya ARIA yang Valid
Plugin memeriksa bahwa atribut dan peran ARIA benar-benar ada dan digunakan dengan tepat. Kesalahan ketik seperti aria-lable atau peran yang tidak valid akan segera ditemukan.
Pemeriksa Kode Memiliki Batasan
Pemeriksa kode hanya melihat kode statis Anda. Alat ini tidak dapat menilai apakah teks alt Anda bermakna atau apakah urutan focus masuk akal, sehingga pengujian manual tetap penting.
Bangun Komponen yang Aksesibel
Tanamkan aksesibilitas ke dalam komponen bersama. Button yang dapat digunakan kembali dan selalu merender elemen button sungguhan akan menyebarkan perilaku yang baik ke seluruh aplikasi.
Jadikan Syarat di CI
Jalankan ESLint dalam pipeline Anda agar peringatan a11y menggagalkan build. Ini mencegah kemunduran lolos dari peninjauan kode dan masuk ke produksi.
Siklus Umpan Balik Editor
Dengan ekstensi editor ESLint, peringatan muncul langsung di kode Anda. Umpan balik cepat ini mengajarkan pola aksesibilitas kepada tim saat mereka menulis.
Pemeriksaan Singkat
Tim Anda menambahkan eslint-plugin-jsx-a11y ke proyek. Apa yang tetap tidak boleh Anda harapkan dari alat ini?
Rangkuman: Pengaman dalam Kode
Gunakan jsx-a11y untuk menemukan kesalahan umum, membangun komponen bersama yang mudah diakses, dan menjadikannya gerbang di CI, tetapi tetap mengandalkan pengujian manual untuk hal-hal lainnya. ✅
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 “jsx-a11y dan Pengaman Tingkat Komponen” gratis?
Ya — teks lengkap “jsx-a11y dan Pengaman Tingkat Komponen” 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 “jsx-a11y dan Pengaman Tingkat Komponen”?
Temukan masalah melalui aturan lint di basis kode Anda. 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 4 dari 4.
Berapa lama pelajaran “jsx-a11y dan Pengaman Tingkat Komponen” 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
- Perubahan Rute Tanpa Memuat Ulang Halaman
- Mengelola Fokus dengan Ref dan useEffect
- Fragmen, Portal, dan Perangkap Urutan DOM
- jsx-a11y dan Pengaman Tingkat Komponen