Accessibility Checks
Menggunakan Storybook accessibility checks sebagai sinyal awal, lalu memeriksa keyboard behavior yang tidak dapat diputuskan tool saja.
Tujuan belajar
- Menjelaskan accessibility check sebagai feedback awal, bukan sertifikat aksesibilitas
- Menetapkan test behavior story dengan parameter a11y
- Memeriksa default, variant, disabled, error, serta edge case
- Membedakan violation tool dari keyboard, focus, wording, dan flow yang perlu manual QA
Isi lesson
5 blok- 1.A11y check memberi sinyal, bukan izin berhenti QABelum selesaiWajib
- 2.Menetapkan behavior a11y pada story fileBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
A11y check memberi sinyal, bukan izin berhenti QA
WajibStorybook accessibility tooling membantu menemukan masalah pada rendered story, misalnya label hilang, contrast tertentu, atau ARIA relationship tidak valid. Ia paling berguna ketika stories mencakup default, disabled, loading, error, serta variant relevan. Jalankan check pada component kecil lebih awal agar masalah tidak menyebar ke banyak route.
Tidak ada tool yang memahami seluruh flow product. A11y check tidak memastikan focus modal kembali ke trigger, copy error menjelaskan perbaikan, atau tab keyboard sesuai context bisnis. Mulai dengan todo bila codebase memiliki debt yang sedang ditangani, lalu gunakan error untuk stories yang siap dijaga di test/CI. Jangan mematikan check demi dashboard hijau tanpa alasan serta rencana perbaikan.
Bagian ini memengaruhi progres lesson.
Menetapkan behavior a11y pada story file
Wajibimport type { Meta, StoryObj } from "@storybook/nextjs-vite";
import { CourseButton } from "./CourseButton";
const meta = {
component: CourseButton,
parameters: { a11y: { test: "error" } },
} satisfies Meta<typeof CourseButton>;
export default meta;
type Story = StoryObj<typeof meta>;
export const ExistingDebt: Story = {
args: { variant: "secondary", children: "Butuh review" },
parameters: { a11y: { test: "todo" } },
};test: error membuat violation menjadi kegagalan pada stories yang dijalankan dalam test environment. todo tetap menjalankan check tetapi menandai debt yang harus dilacak. Setelah tool check, QA juga tab order, visible focus, copy, state change, serta interaction yang tidak tampak di result otomatis.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususConfigure course button a11y stories
Tambahkan a11y test behavior untuk CourseButton dan tandai known debt dengan todo, bukan mematikan check.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Apa tindakan tepat jika a11y check lulus tetapi modal masih membuat focus pindah ke page belakang?
Progres lesson naik setelah jawaban benar.
Ringkasan
Wajib- Accessibility check membantu menemukan violation pada rendered stories lebih awal.
- Setiap state penting perlu story agar tool tidak hanya melihat happy path.
- error, todo, dan off adalah keputusan quality yang harus dapat dijelaskan.
- Keyboard, focus, copy, dan product flow tetap memerlukan manual QA.
- Berikutnya, struktur component, story, token, serta export dibuat mudah dipahami.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: A11y check memberi sinyal, bukan izin berhenti QA.