FluentStack

Uji Kompetensi Accessibility Testing and Preferences

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 15: AccessibilityAdvanced90 menitBahasa Indonesia

Uji Kompetensi Accessibility Testing and Preferences

Membuktikan kesiapan menjalankan accessibility test pass kecil, memperbaiki form feedback, dan menjelaskan batas automated tooling.

StatusMemuat progres
ReadinessMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Yang dicek

  • Mengaudit contrast, form error, motion, dan semantic feedback pada satu flow
  • Membuat form validation feedback yang dapat ditemukan keyboard serta screen reader
  • Menyusun test plan yang menggabungkan manual dan automated checks
  • Menjelaskan confidence dan sisa risiko secara user-centered
Accessibility TestingFormsReduced MotionTesting LibraryReadiness Checkpoint

Isi lesson

6 blok
  1. 1.
    Checkpoint: accessibility perlu dibuktikan lewat task, bukan sekadar checklist hijauBelum selesaiWajib
  2. 2.
    QuizBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Writing practiceBelum selesaiWajib
  5. 5.
    Gunakan docs sebagai panduan test pass, bukan daftar aturan tanpa contextBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Checkpoint: accessibility perlu dibuktikan lewat task, bukan sekadar checklist hijau

Wajib

Feature Daftar update course memiliki text meta yang sangat samar, email field tanpa relationship ke error, success badge yang terus bergerak, dan component test yang mencari class CSS. Sebelum mengubah kode, tentukan journey learner: menemukan form, mengisi email, menerima error jika data salah, memperbaiki field, lalu menerima feedback berhasil. Audit contrast pada surface yang dipakai, pastikan label dan error dapat ditemukan, hormati reduced motion, dan tulis apa yang automated check belum dapat buktikan. Checkpoint ini tidak meminta audit WCAG penuh; ia meminta test pass kecil yang dapat dijelaskan dan diulang.

Bagian ini memengaruhi progres lesson.

Quiz

Wajib

Uji Kompetensi Accessibility Testing and Preferences

Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.

Target lulus

70/100

Skor terbaik

0/100

Status

Belum dikerjakan

Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.

Pertanyaan 1 dari 7

Target lulus: 70

Apa yang dimaksud contrast pada UI?

Coding practice

WajibDibuka di workspace khusus

Build accessible course signup checkpoint

Perbaiki feedback validation form Daftar update agar label, error, summary, dan focus entry dapat digunakan dalam flow React kecil.

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.

13 cek otomatis6 checklist
Belum selesaiBuka practice

Writing practice

Wajib

Latihan menulis

Tulis accessibility test report singkat untuk flow Daftar update course. Sebutkan environment, task user, minimal tiga pemeriksaan dari keyboard/contrast/form error/reduced motion/screen reader/inspection, satu finding dengan dampak user dan perbaikannya, satu accessible query yang akan dipakai di test, serta satu risiko yang belum dibuktikan. Gunakan bahasa yang jelas bagi engineer lain, bukan klaim bahwa feature sudah sepenuhnya compliant.

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/800 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Blok ini wajib untuk menyelesaikan lesson.

Documentation Bridge

Wajib

Gunakan docs sebagai panduan test pass, bukan daftar aturan tanpa context

Buka satu atau dua sumber sesuai finding yang kamu miliki. Fokus pada task serta component yang sedang diperbaiki, lalu coba ulang langkahnya pada project lokal. Jangan mencoba menyelesaikan seluruh WCAG atau semua pattern assistive technology dalam satu sesi.

W3C WAI

Understanding Contrast (Minimum)

Fokus baca

  • Mengapa text normal membutuhkan contrast foreground-background yang cukup.
  • Pengecualian text besar dan alasan tidak memakainya untuk body copy biasa.
  • Memeriksa pasangan warna pada surface serta state yang benar-benar dirender.

Abaikan dulu

  • Seluruh teknik WCAG, legal compliance, dan audit conformance lengkap.
Buka dokumentasi

W3C WAI

Forms Tutorial: User Notification

Fokus baca

  • Perbedaan feedback keseluruhan dan inline feedback pada form.
  • Error summary, link menuju field, serta error text yang memberi perbaikan.
  • Relationship error dengan form control melalui aria-describedby bila relevan.

Abaikan dulu

  • Alert dialog custom dan live region assertive yang kompleks.
Buka dokumentasi

MDN

prefers-reduced-motion

Fokus baca

  • Media query dengan value reduce.
  • Mengurangi atau mengganti animation non-esensial.
  • Menguji preference melalui setting device atau browser.

Abaikan dulu

  • Client hint preference dan override experimental di browser.
Buka dokumentasi

W3C WAI

Easy Checks: A First Review of Web Accessibility

Fokus baca

  • Visible keyboard focus, labels, required fields, dan basic structure.
  • Mengapa quick checks hanya menemukan sebagian issue.
  • Mengubah finding menjadi langkah test yang dapat diulang.

Abaikan dulu

  • Menganggap quick checks sebagai audit lengkap atau certification.
Buka dokumentasi

Testing Library

About Queries: ByRole and ByLabelText

Fokus baca

  • Role dan accessible name sebagai contract user-facing.
  • Kapan label query tepat untuk input form.
  • Membaca query failure sebagai signal semantic atau label yang belum baik.

Abaikan dulu

  • Memeriksa semua detail implementation atau selector CSS internal.
Buka dokumentasi

Aksi setelah membaca

Pilih satu route local atau deployed yang memiliki form atau component interaktif. Jalankan test pass: keyboard, focus, contrast, error feedback, reduced motion bila ada, inspection, dan satu accessible query. Tulis finding, fix, serta satu risiko yang belum dapat dibuktikan. Jangan tandai selesai hanya karena automated checker tidak menemukan error.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • Kamu dapat memeriksa contrast pada text serta UI state yang benar-benar dipakai user.
  • Kamu dapat membuat form error yang menyebut field, masalah, perbaikan, dan relationship yang tepat.
  • Kamu dapat menghormati reduced motion tanpa menghilangkan informasi penting dari UI.
  • Kamu dapat menjalankan smoke test screen reader serta test pass yang menggabungkan manual review, tools, dan accessible query.
  • Kamu dapat menjelaskan batas automated tooling dan sisa risiko tanpa membuat klaim conformance yang berlebihan.
  • Level berikutnya, Frontend Architecture, memindahkan quality practices ini ke struktur feature, component ownership, dan dependency yang lebih mudah dirawat.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian wajib checkpoint ini

Lanjutkan blok wajib berikutnya: Checkpoint: accessibility perlu dibuktikan lewat task, bukan sekadar checklist hijau.

Memuat progresReview module