# Cara Membuat Website Ramah Aksesibilitas Next.js (Pemula) > Cara membuat website ramah aksesibilitas Next.js untuk pemula: HTML semantik, label, skip link, fokus keyboard, kontras, reduced motion, dan tes cepat. URL: https://www.matthewswong.com/id/blog/cara-membuat-website-accessible-nextjs/ - Author: Matthews Wong (https://www.matthewswong.com/id/about/) - Published: 2026-10-17 - Updated: 2026-10-17 - Category: Web Dev > **Key takeaway:** Cara membuat website ramah aksesibilitas di Next.js: pakai elemen HTML semantik seperti main, button, dan label, tampilkan fokus keyboard dengan jelas, sediakan skip link, ukur kontras teks minimal 4,5:1, dan hormati prefers-reduced-motion. Lalu uji dengan tombol Tab, ESLint, Lighthouse, dan axe-core. Kamu menekan Tab di halaman yang baru kamu buat, dan fokus melompat entah ke mana. Atau tombol kartu yang kamu buat dari div bisa diklik mouse, tetapi tidak bisa dijangkau keyboard. Atau screen reader hanya membaca kata input tanpa menyebut isinya apa. Hampir semua pemula tersangkut di salah satu dari tiga hal ini, dan tidak satu pun terlihat di layar saat kamu menguji dengan mouse. Panduan ini membangun halaman yang bisa dipakai lewat keyboard dalam tujuh langkah. Aturan angkanya (4,5:1 dan 3:1) saya cocokkan dengan halaman W3C, cara menghubungkan label dengan halaman MDN, dan perintah pengujiannya dengan dokumentasi Next.js, Lighthouse, dan axe-core. Dua potongan kode, skip link dan aturan fokus, adalah versi sederhana dari kode di situs ini, dan semua contoh lain memakai nama placeholder. Mau memahami dasar teorinya dulu, termasuk kriteria WCAG di balik tiap langkah? Ikuti pelajaran gratis Dasar Aksesibilitas Web untuk Pemula di Situs Next.js di jalur Web app skills. Post ini adalah praktik langkah demi langkahnya. Yang kamu butuhkan Proyek Next.js dengan App Router (folder app), memakai TypeScript. Satu halaman yang sudah punya link, tombol, dan form, supaya ada yang bisa diperbaiki. Node.js dan terminal, untuk menjalankan ESLint dan Lighthouse dari command line. Browser desktop dan keyboard. Mouse boleh kamu singkirkan selama menguji. ## Langkah 1: Mulai dari elemen HTML semantik Elemen native membawa maknanya sendiri. Tanpa header, nav, main, dan footer, serta heading yang berurutan, halaman terbaca sebagai satu blok panjang bagi screen reader. Bandingkan dua versi ini. Di Next.js, ini murah: satu main di layout yang membungkus children, satu h1 per halaman, lalu h2 dan h3 berurutan. Beri juga tiap halaman title yang unik. Dokumentasi Next.js menjelaskan bahwa route announcer membaca document.title lebih dulu, lalu elemen h1, lalu pathname URL, untuk memberi tahu pengguna teknologi bantu bahwa halaman berpindah. ## Langkah 2: Ganti div yang bisa diklik dengan button Ini kesalahan paling sering. Div dengan onClick tidak masuk urutan Tab, tidak merespons Enter atau Spasi, dan tidak punya peran. Elemen button asli memberi ketiganya secara gratis. Teks yang terlihat otomatis menjadi nama tombolnya. Karena onClick butuh interaksi di browser, komponen ini harus Client Component. Jaga supaya hanya tombol kecilnya yang menjadi Client Component, bukan seluruh halaman. Aturan pemisahannya dijelaskan di perbedaan Server Component dan Client Component di Next.js . Satu pegangan lagi: link untuk pindah halaman, button untuk melakukan aksi. ## Langkah 3: Beri label pada setiap input dan teks alternatif pada gambar Label terhubung ke input secara programatis, bukan hanya berdekatan secara visual. Menurut MDN, sambungannya dibuat dengan menaruh id di input dan mengisi atribut for di label dengan nilai yang sama, dan mengeklik label memindahkan fokus ke input. Di JSX, atribut for ditulis htmlFor. Placeholder bukan pengganti: petunjuknya hilang saat pengguna mulai mengetik, jadi pertahankan label yang terlihat. Gambar yang membawa informasi butuh alt yang menjelaskan isinya, bukan kata seperti gambar atau foto. Dokumentasi Next.js mencatat bahwa eslint-plugin-jsx-a11y membantu memastikan img punya teks alt, jadi kekurangan ini bisa tertangkap lebih awal. ## Langkah 4: Tambahkan skip link dan jaga fokus tetap terlihat Pengguna keyboard harus menekan Tab melewati seluruh header di setiap halaman. Skip link adalah link pertama di halaman yang melompatkan fokus ke konten utama. Versi di bawah disederhanakan dari komponen SiteChrome situs ini. Skip link yang href-nya #main-content tetapi tidak ada elemen dengan id main-content tidak melakukan apa pun yang terlihat. Simpan link dan targetnya berdekatan, lalu tekan Tab dan Enter di halaman nyata untuk memastikan fokus benar-benar pindah. Berikutnya, ring fokus. Kegagalan umumnya adalah menghapus outline karena terlihat kurang rapi. Ubah gayanya, jangan dihapus. Satu aturan global :focus-visible memberi semua elemen ring yang jelas, dan komponen tertentu bisa memperhalusnya. Situs ini memakai outline tebal 3 piksel dengan offset 2 piksel untuk semua elemen. Pilih warna ring yang kontras dengan latar halamanmu, dan periksa di langkah berikutnya. ## Langkah 5: Ukur kontras warna, jangan menebak Menurut penjelasan W3C untuk kriteria 1.4.3 (level AA), teks butuh rasio kontras minimal 4,5:1, dan teks berukuran besar minimal 3:1. Teks besar didefinisikan mulai 18 point, atau 14 point jika tebal. Di tema gelap dengan lapisan transparan, warna latar efektifnya adalah campuran, jadi menilai dengan mata sering keliru. Ukur warna akhir yang dirender memakai contrast checker, yang ada di developer tools browser dan di banyak alat gratis, lalu ukur ulang setiap token warna berubah. W3C juga mencatat bahwa rasio adalah ambang batas dan tidak boleh dibulatkan: 4,499:1 tidak memenuhi 4,5:1. Panduan ini sengaja tidak menyebut rasio untuk palet tertentu, karena angka baru menjadi klaim setelah ada yang mengukurnya. ## Langkah 6: Hormati prefers-reduced-motion Sebagian pengunjung meminta sistem operasi mengurangi animasi. MDN menjelaskan bahwa nilai reduce berarti pengunjung meminta antarmuka yang menghapus, mengurangi, atau mengganti animasi berbasis gerak. Di CSS, pakai media query. Di JavaScript, tanyakan media query yang sama lewat window.matchMedia sebelum memulai animasi lewat skrip. Reduced motion tidak berarti konten dikurangi. Ganti gerakan dengan perubahan instan atau fade, dan pertahankan setiap teks, caption, dan kontrol. Dua potongan di atas adalah versi sederhana dari pola yang dipakai explainer interaktif di situs ini. ## Langkah 7: Uji dengan keyboard, ESLint, Lighthouse, dan axe-core Mulai dari tes termurah: letakkan mouse, klik address bar, lalu tekan Tab terus-menerus di seluruh halaman. Skip link harus muncul pada Tab pertama, setiap kontrol harus menampilkan ring, dan tidak ada yang bisa diklik yang terlewat. Setelah itu jalankan tiga perintah ini. Perhatikan batasnya. Next.js menyertakan eslint-plugin-jsx-a11y dan dokumentasinya menyebut contoh aturan seperti aria-props dan role-has-required-aria-props, jadi jangan berasumsi ESLint menangkap div dengan onClick. Itu sebabnya perintah grep di atas tetap berguna. Lighthouse menjalankan kategori accessibility, dan README-nya menyebut flag --only-categories dan --view. README axe-core menyebut alat ini menemukan rata-rata 57 persen masalah WCAG secara otomatis, dan menandai elemen sebagai incomplete saat tidak yakin sehingga butuh pemeriksaan manual. Artinya, skor hijau bukan bukti halamanmu aksesibel. Dengarkan halamanmu dengan screen reader sekali, dan jangan anggap hasilnya sertifikat atau jaminan hukum. Error umum dan cara memperbaikinya Tujuh masalah yang paling sering muncul saat pemula pertama kali membuat halaman ramah aksesibilitas. Gejala Penyebab Perbaikan Tab melewati sebuah kartu atau tombol Elemennya div atau span dengan onClick, bukan button atau link. Ganti dengan button type button, atau link untuk pindah halaman. Tidak terlihat di mana fokus berada outline none ditulis tanpa pengganti. Hapus aturannya dan pakai satu aturan global :focus-visible dengan outline tebal. Skip link ada, tetapi Enter tidak memindahkan fokus Id target tidak ada, atau salah ketik. Pastikan main punya id yang sama persis dengan href, lalu coba Tab dan Enter. Screen reader hanya membaca edit text atau input Input hanya punya placeholder, atau for dan id tidak cocok. Tambahkan label dengan htmlFor yang sama dengan id input. Teks pudar sulit dibaca di layar terang atau di luar ruangan Kontras dinilai dengan mata pada latar transparan. Ukur warna hasil render, targetkan 4,5:1 untuk teks isi dan 3:1 untuk teks besar. Error saat onClick dipasang di halaman Komponen yang memakai onClick adalah Server Component. Pindahkan tombol ke file kecil dengan use client di baris pertama. Semua animasi hilang, termasuk informasinya, saat reduce aktif Panel disembunyikan, bukan diganti dengan perubahan instan. Pendekkan transisi atau ganti dengan fade, dan tetap tampilkan teksnya. Checklist sebelum publish Satu h1 per halaman, heading berurutan, dan satu main di layout. Setiap elemen yang bisa diklik adalah button atau link asli. Setiap input punya label yang terhubung, setiap gambar informatif punya alt. Skip link berfungsi dan ring fokus terlihat di semua kontrol. Kontras teks sudah diukur: minimal 4,5:1, atau 3:1 untuk teks besar. Sudah diuji dengan Tab, Lighthouse, axe-core, dan reduce motion aktif. Belajar lebih dalam Pelajaran gratis menjelaskan kriteria WCAG di balik langkah-langkah ini, dengan potongan kode asli dari situs ini, kuis, dan satu explainer interaktif. Dasar Aksesibilitas Web untuk Pemula di Situs Next.js Halaman yang cepat dan halaman yang aksesibel saling melengkapi. Baca optimasi performa Next.js dan cara meningkatkan Core Web Vitals di Next.js untuk sisi kecepatannya. Aturan yang bisa kamu bawa: pilih elemen native dulu, jaga fokus terlihat, ukur kontras, dan tanyakan preferensi gerakan sebelum menganimasikan. Tidak satu pun butuh library tambahan. ## Sumber - Next.js docs: Accessibility - MDN: elemen label - W3C WAI: Understanding Success Criterion 1.4.3, Contrast (Minimum) - MDN: prefers-reduced-motion - GitHub: dequelabs/axe-core - GitHub: GoogleChrome/lighthouse ## Source links - https://nextjs.org/docs/architecture/accessibility - https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label - https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html - https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion - https://github.com/dequelabs/axe-core - https://github.com/GoogleChrome/lighthouse ## FAQ ### Bagaimana cara membuat website Next.js yang ramah aksesibilitas? Mulai dari HTML semantik: satu main, satu h1 per halaman, button dan link asli, dan label di setiap input. Lalu tambahkan skip link, jaga ring :focus-visible tetap terlihat, ukur kontras teks minimal 4,5:1, dan hormati prefers-reduced-motion. Terakhir, tekan Tab sendiri di seluruh halaman. ### Apakah Next.js otomatis membuat website saya aksesibel? Hanya sebagian. Next.js menyertakan route announcer yang membaca title halaman, h1, atau pathname setelah navigasi di sisi klien, dan menyertakan eslint-plugin-jsx-a11y. Ia tidak bisa memperbaiki div yang dipakai sebagai tombol atau warna berkontras rendah, jadi kamu tetap harus membangun dan mengujinya sendiri. ### Kenapa Tab melewati kartu yang bisa diklik? Kartunya kemungkinan div atau span dengan handler onClick. Elemen itu tidak masuk urutan Tab dan tidak merespons Enter atau Spasi. Pakai button asli untuk aksi atau link untuk pindah halaman, dan simpan gayanya di CSS. ### Apakah Lighthouse atau axe-core bisa membuktikan situs saya aksesibel? Tidak. README axe-core menyebut alat ini menemukan rata-rata 57 persen masalah WCAG secara otomatis, dan Lighthouse hanya memasukkan audit otomatisnya ke skor. Pakai sebagai pemeriksaan awal, lalu uji dengan keyboard dan screen reader. ### Berapa rasio kontras yang dibutuhkan teks saya? Kriteria WCAG 2.2 1.4.3 di level AA meminta minimal 4,5:1 untuk teks dan minimal 3:1 untuk teks berukuran besar, yaitu 18 point atau 14 point tebal. Rasio itu adalah ambang batas dan tidak boleh dibulatkan. Ukur warna akhir yang dirender, terutama di atas latar transparan. --- - HTML version: https://www.matthewswong.com/id/blog/cara-membuat-website-accessible-nextjs/ - English: https://www.matthewswong.com/en/blog/cara-membuat-website-accessible-nextjs/ - Site index for agents: https://www.matthewswong.com/llms.txt - Sitemap: https://www.matthewswong.com/sitemap.xml - API description (OpenAPI): https://www.matthewswong.com/openapi.json