# Audit Aksesibilitas untuk Aplikasi Next.js: Mengotomatiskan Kepatuhan WCAG > Cara mengaudit aplikasi Next.js untuk masalah aksesibilitas menggunakan axe-core dan Playwright — dengan alur kerja yang menangkap 57% pelanggaran WCAG secara otomatis. URL: https://www.matthewswong.com/id/blog/accessibility-audit-nextjs/ - Author: Matthews Wong (https://www.matthewswong.com/id/about/) - Published: 2025-06-10 - Updated: 2025-06-10 - Category: Web Dev Hanya 4,1% situs web yang memenuhi standar WCAG 2.2 Level AA. Laporan WebAIM Million 2025 menemukan 95,9% situs web gagal persyaratan aksesibilitas dasar, rata-rata 51 kesalahan per halaman. Dengan 4.605 gugatan ADA yang diajukan terhadap situs web di 2024 dan European Accessibility Act yang berlaku dari Juni 2025, aksesibilitas kini merupakan risiko hukum dan bisnis, bukan hanya praktik terbaik. Axe-core, mesin aksesibilitas open-source Deque (diunduh 4 miliar kali), dapat mendeteksi secara otomatis 57% pelanggaran WCAG. ## Apa yang Dapat dan Tidak Dapat Ditangkap Alat Otomatis Alat aksesibilitas otomatis unggul dalam masalah struktural: teks alt yang hilang pada gambar, input formulir tanpa label, rasio kontras warna yang tidak cukup, peran ARIA yang hilang, pelanggaran hierarki heading, masalah urutan fokus keyboard, dan region landmark yang hilang. Apa yang tidak dapat ditangkap: apakah teks alt bermakna, apakah widget kustom benar-benar dapat dinavigasi keyboard oleh pengguna pembaca layar. ### axe-core: Lapisan Otomasi Axe-core menjalankan pemeriksaan aksesibilitas dalam konteks browser dan mengembalikan hasil terstruktur: pelanggaran (masalah pasti), tidak lengkap (pemeriksaan yang memerlukan tinjauan manual), lulus, dan tidak berlaku. Setiap pelanggaran mencakup elemen HTML yang menyebabkan masalah, kriteria sukses WCAG yang dilanggar, rating dampak (critical/serious/moderate/minor), dan panduan remediasi. ### Tes Navigasi Keyboard Tes aksesibilitas manual paling sederhana: cabut mouse Anda dan coba gunakan aplikasi Anda sendiri hanya dengan keyboard. Tab untuk menavigasi antara elemen interaktif. Enter/Space untuk mengaktifkan tombol. Tombol panah untuk menu dan slider. Escape untuk menutup modal. Jika Anda tidak dapat menjangkau fitur dengan keyboard saja, pengguna keyboard-only dan pengguna pembaca layar juga tidak dapat mengaksesnya. > Dari pengalaman saya mengaudit matthewswong.com untuk aksesibilitas: pelanggaran paling umum yang saya temukan adalah 1) tombol ikon tanpa nama yang dapat diakses (tombol X untuk menutup modal tanpa aria-label atau teks sr-only), 2) kegagalan kontras warna pada teks di atas latar belakang gradien, dan 3) indikator fokus yang hilang pada elemen interaktif yang bergaya kustom. Semua tiga mudah diperbaiki setelah Anda tahu keberadaannya. ## Mengintegrasikan axe-core ke Tes Playwright Paket @axe-core/playwright menambahkan metode `checkA11y()` yang menjalankan axe dalam konteks browser saat ini dan menggagalkan tes jika pelanggaran ditemukan. Jalankan setelah menavigasi ke setiap halaman dalam suite tes E2E Anda. Ini menangkap regresi aksesibilitas yang diperkenalkan oleh perubahan kode apa pun. ### Kontras Warna dan Tailwind Palet warna default Tailwind dapat diakses — Tailwind 3+ menyertakan informasi rasio kontras dalam dokumen untuk setiap kombinasi warna. Risikonya adalah warna kustom yang ditambahkan ke tailwind.config.ts: warna merek yang terlihat baik secara visual tetapi gagal rasio kontras 4.5:1 untuk teks normal (WCAG AA). Periksa semua warna kustom dengan pemeriksa kontras WebAIM. > **Atribut Aria Mudah Disalahgunakan** > Menambahkan atribut ARIA untuk memperbaiki masalah aksesibilitas tanpa memahaminya berbahaya — ARIA yang salah dapat membuat halaman kurang dapat diakses daripada tanpa ARIA sama sekali. Aturan praktik penulisan ARIA: 'Tidak ada ARIA lebih baik dari ARIA yang buruk.' Kesalahan umum: menambahkan role='button' ke div alih-alih menggunakan elemen button nyata (Anda kemudian harus mengimplementasikan fokus keyboard, kunci Enter, dan kunci Space secara manual). ## Pengujian Pembaca Layar Alat otomatis dan pengujian keyboard mencakup banyak hal, tetapi pengujian pembaca layar mengungkapkan cara konten Anda mengalir saat tata letak visual dilucuti. Tes dengan NVDA (gratis, Windows), JAWS (pembaca layar enterprise paling umum, Windows), atau VoiceOver (bawaan di macOS dan iOS). Hal utama yang harus diverifikasi: heading menciptakan garis besar yang logis, link memiliki teks deskriptif, bidang formulir mengumumkan label mereka saat difokuskan. ## Membangun Aksesibilitas ke Dalam Komponen Library Pendekatan dengan leverage tertinggi: perbaiki aksesibilitas di tingkat komponen sehingga setiap halaman yang menggunakan komponen dapat diakses secara default. Saya menggunakan primitif Radix UI dalam proyek Next.js saya — mereka headless, unstyled, dan sepenuhnya dapat diakses keyboard dan pembaca layar berdasarkan spesifikasi. ## Alur Kerja CI yang Saya Gunakan Alur kerja aksesibilitas CI saya: Tes Playwright menjalankan axe-core pada semua halaman kritis (beranda, login, dashboard, alur pengguna utama) pada setiap PR. Pelanggaran dilaporkan sebagai anotasi GitHub Actions. Pelanggaran kritis menggagalkan build. Pelanggaran serius memposting peringatan tetapi tidak memblokir merge. Bulanan, saya menjalankan pemindaian axe-cli penuh di semua halaman. ## Sumber & Bacaan Lebih Lanjut - Deque — axe-core Open Source Accessibility Engine - Playwright — Accessibility Testing - AllAccessible — Website Accessibility Audit WCAG 2.2 Guide ## Source links - https://www.deque.com/axe/axe-core/ - https://playwright.dev/docs/accessibility-testing - https://www.allaccessible.org/blog/website-accessibility-audit-guide-wcag-template ## FAQ ### Berapa persen pelanggaran WCAG yang bisa dideteksi axe-core secara otomatis, dan apa yang tetap perlu ditinjau secara manual? Axe-core dapat mendeteksi secara otomatis 57% pelanggaran WCAG. Sisanya 43% memerlukan tinjauan manual — misalnya, apakah teks alt benar-benar bermakna, apakah widget kustom dapat dinavigasi keyboard oleh pengguna pembaca layar, dan apakah urutan membaca masuk akal secara semantik. ### Apa pelanggaran aksesibilitas yang paling sering ditemukan saat mengaudit matthewswong.com? Tiga pelanggaran paling umum adalah: tombol ikon tanpa nama yang dapat diakses (misalnya tombol X penutup modal tanpa aria-label atau teks sr-only), kegagalan kontras warna pada teks di atas latar belakang gradien, dan indikator fokus yang hilang pada elemen interaktif bergaya kustom. Ketiganya mudah diperbaiki setelah diketahui keberadaannya. ### Bagaimana alur kerja CI mengintegrasikan axe-core dengan Playwright? Paket @axe-core/playwright menambahkan metode checkA11y() yang menjalankan axe dalam konteks browser saat ini dan menggagalkan tes jika pelanggaran ditemukan. Tes Playwright menjalankan axe-core pada semua halaman kritis di setiap PR — pelanggaran kritis menggagalkan build, pelanggaran serius hanya memposting peringatan tanpa memblokir merge. Pemindaian axe-cli penuh di semua halaman juga dijalankan setiap bulan. ### Mengapa penggunaan ARIA yang salah bisa lebih berbahaya daripada tidak menggunakan ARIA sama sekali? Prinsip dari ARIA Authoring Practices Guide yang dikutip dalam artikel adalah 'Tidak ada ARIA lebih baik dari ARIA yang buruk.' Kesalahan umum adalah menambahkan role='button' ke div alih-alih menggunakan elemen button nyata — Anda kemudian harus mengimplementasikan fokus keyboard, kunci Enter, dan kunci Space secara manual. ARIA yang salah dapat menekan semantik bawaan browser dan membuat halaman lebih sulit digunakan oleh pengguna pembaca layar. ### Bagaimana penggunaan primitif Radix UI membantu menjaga aksesibilitas di seluruh komponen library Next.js? Primitif Radix UI bersifat headless dan unstyled, tetapi sepenuhnya dapat diakses keyboard dan pembaca layar berdasarkan spesifikasi. Dengan memperbaiki aksesibilitas di tingkat komponen menggunakan primitif Radix yang diberi gaya Tailwind, setiap halaman yang menggunakan komponen tersebut mewarisi perilaku aksesibilitas yang benar secara default, tanpa memerlukan audit per halaman atau logika ARIA kustom. --- - HTML version: https://www.matthewswong.com/id/blog/accessibility-audit-nextjs/ - English: https://www.matthewswong.com/en/blog/accessibility-audit-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