Lint dan Gerbang CI untuk Aksesibilitas

Pengujian berjalan setelah kode ditulis, tetapi linter menandai masalah saat Anda mengetik. Semakin awal masalah ditemukan, semakin murah biaya perbaikannya.

Untuk proyek React, plugin ESLint eslint-plugin-jsx-a11y memeriksa JSX Anda dari kesalahan aksesibilitas umum langsung di editor.

jsx-a11y menemukan hal-hal seperti gambar tanpa prop alt, jangkar tanpa href, atau pengendali click pada elemen noninteraktif.

Tambahkan prop alt dan peringatan tersebut menghilang. Perbaikannya kecil, dan Anda sudah melihatnya sebelum kode tersebut dikirim.

Linter membaca kode sumber, bukan halaman yang dirender. Linter tidak dapat mengukur kontras atau urutan fokus, sehingga melengkapi, bukan menggantikan, pemindaian axe.

Gerbang CI adalah pemeriksaan yang harus berhasil sebelum kode dapat digabungkan. Jika pengujian aksesibilitas Anda gagal, permintaan pull akan langsung diblokir.

Tanpa gerbang, audit yang gagal hanyalah peringatan yang diabaikan semua orang. Gerbang mengubah aksesibilitas menjadi persyaratan, bukan sekadar saran sopan.

Alur kerja CI memasang dependensi, lalu menjalankan perintah lint dan pengujian Anda. Kode keluar yang bukan nol otomatis membuat tugas tersebut gagal.

Saat build berwarna merah, pembuat kode dapat melihat aturan dan elemen yang tepat yang gagal di log. Siklus umpan balik berlangsung dalam hitungan menit, bukan minggu.

Gerbang yang rusak karena alasan yang keliru akan dinonaktifkan. Jaga agar pengujian tetap stabil dan cakupannya terarah, sehingga tim percaya bahwa build merah menandakan masalah nyata.

Penyiapan terkuat menggunakan semuanya: lint saat menulis kode, axe dalam pengujian, dan gerbang CI saat penggabungan. Setiap lapisan menemukan hal yang luput dari lapisan lainnya.

Lakukan lint saat menulis kode, jalankan axe dalam pengujian, dan gunakan gerbang CI untuk penggabungan. Jika digabungkan, pagar pengaman ini mencegah regresi aksesibilitas terkirim. 🚦