Belajar Cypress - Accessibility Testing

#Pendahuluan

Web yang tidak dapat diakses adalah web yang menutup pintu bagi sebagian pengguna. Episode 17 membahas accessibility testing di Cypress: menambahkan axe-core, menguji keyboard navigation, ARIA roles, dan semantic HTML, memahami accessibility rules, serta membangun test flows yang mencakup aksesibilitas.

Accessibility bukan fitur tambahan — ia bagian dari kualitas. Test yang memeriksanya menjaga aplikasi tetap ramah bagi pengguna screen reader dan navigasi keyboard.

#Menambahkan axe-core untuk Accessibility Assertions

#Install Plugin

axe-core adalah engine analisis aksesibilitas yang bisa dipakai langsung di Cypress:

npm install -D cypress-axe axe-core

npm install -D cypress-axe axe-core menambahkan command cy.checkA11y dan engine analysis. Pastikan juga di-import di cypress/support/e2e.js:

Mengaktifkan cypress-axe

import "cypress-axe";

import "cypress-axe" membuat command aksesibilitas tersedia di seluruh spec.

#Menjalankan Pemeriksaan

Setelah halaman dimuat, jalankan pemeriksaan otomatis:

Memeriksa aksesibilitas halaman

it("halaman login tidak punya pelanggaran a11y", () => {
  cy.visit("/login");
  cy.checkA11y();
});

cy.checkA11y() memindai halaman dan gagal jika menemukan pelanggaran aturan axe. Default-nya seluruh aturan WCAG dijalankan; kegagalan ditampilkan lengkap dengan elemen dan rekomendasi perbaikan.

#Testing Keyboard Navigation, ARIA Roles, dan Semantic HTML

#Navigasi Keyboard

Pengguna yang tidak memakai mouse bergantung pada keyboard. Uji urutan tab dan shortcut:

Menekan tombol keyboard

cy.get("[data-cy=search-input]").focus();
cy.get("body").type("{tab}");
cy.focused().should("have.attr", "data-cy", "search-button");

cy.focused() membaca elemen yang sedang fokus. Assertion have.attr memastikan tab memindahkan fokus ke tombol yang benar — verifikasi urutan navigasi keyboard yang sesungguhnya.

#ARIA Roles dan Semantic HTML

Periksa bahwa elemen interaktif memakai role yang benar:

Memeriksa ARIA role

cy.get("[role=dialog]").should("be.visible");
cy.get("[data-cy=close-dialog]").should("have.attr", "aria-label", "Tutup dialog");

[role=dialog] memastikan modal dinyatakan sebagai dialog. aria-label: "Tutup dialog" memberi nama yang terbaca screen reader untuk tombol tutup — praktik yang wajib untuk elemen ikon tanpa teks.

#Accessibility Rules dalam Cypress

#Menyaring Aturan

Terkadang kalian ingin mengesampingkan aturan tertentu atau fokus pada aturan tertentu:

Menyaring rules axe

cy.checkA11y(null, {
  rules: {
    "color-contrast": { enabled: false },
  },
});

"color-contrast": { enabled: false } menonaktifkan pemeriksaan kontras warna. Gunakan selektif — misalnya saat menguji komponen yang kontrasnya diatur brand — dan jangan dinonaktifkan tanpa alasan.

#Fokus pada Area Tertentu

Pemeriksaan bisa diarahkan ke wilayah halaman tertentu:

Memeriksa area tertentu

cy.checkA11y("[data-cy=form-pendaftaran]");

cy.checkA11y("[data-cy=form-pendaftaran]") membatasi pemindaian pada form tersebut. Pola ini mempercepat pemindaian dan membuat pesan kegagalan lebih mudah dilacak.

#Membangun Accessible Test Flows

#Aksesibilitas di Setiap Halaman Kunci

Jadikan aksesibilitas bagian dari alur, bukan test terpisah. Tambahkan pemeriksaan setelah halaman utama dimuat:

Alur utama dengan cek a11y

it("alur pendaftaran dapat diakses", () => {
  cy.visit("/daftar");
  cy.checkA11y();
 
  cy.get("[data-cy=nama]").type("Arman");
  cy.get("[data-cy=email]").type("user@example.com");
  cy.checkA11y("[data-cy=form-daftar]");
 
  cy.get("[data-cy=submit]").click();
  cy.contains("Pendaftaran berhasil").should("be.visible");
});

Pemeriksaan cy.checkA11y() di awal dan di tengah alur memastikan halaman maupun interaksi tetap dapat diakses. Dengan pola ini, regresi aksesibilitas terdeteksi sejak awal, bukan setelah rilis.

#Penutup

Episode 17 menempatkan aksesibilitas sebagai bagian pengujian: menambahkan axe-core lewat cypress-axe, memeriksa keyboard navigation dengan cy.focused(), memvalidasi ARIA roles dan semantic HTML, menyaring rules sesuai kebutuhan, serta menanamkan pemeriksaan di alur utama.

Inti yang harus dibawa pulang:

• cy.checkA11y() memindai halaman terhadap aturan WCAG.
• Uji navigasi keyboard dengan cy.focused() setelah menekan {tab}.
• Elemen ikon wajib memiliki aria-label yang deskriptif.
• Rules axe bisa disaring per area atau per aturan.
• Integrasikan cek aksesibilitas ke alur utama, bukan hanya test khusus.

Di episode 18 selanjutnya kita akan membahas custom plugins dan extensions — memakai Cypress plugins dan community modules, membuat plugin custom, memperluas commands dan task APIs, serta pola plugin yang bisa dipakai ulang.