Screen Reader Basics
Melakukan smoke test kecil untuk mendengar structure, nama control, error, dan feedback yang dialami user screen reader.
Tujuan belajar
- Menjelaskan tujuan smoke test screen reader yang realistis untuk frontend engineer
- Membaca heading, landmark, label control, dan error sebagai information structure
- Menyusun checklist kecil untuk satu route atau feature
- Membedakan smoke test awal dari audit assistive technology yang menyeluruh
Isi lesson
6 blok- 1.Dengarkan informasi, bukan hanya tampilanBelum selesaiWajib
- 2.Structure kecil yang dapat dinavigasi sebagai informasiBelum selesaiWajib
- 3.Writing practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Hasil test perlu menyebut environmentBelum selesaiOpsional
- 6.RingkasanBelum selesaiWajib
Dengarkan informasi, bukan hanya tampilan
WajibScreen reader mengandalkan semantics, accessible name, relationship, dan perubahan UI yang terdeteksi teknologi bantu. Smoke test bukan tuntutan untuk menjadi ahli semua screen reader. Tujuannya adalah menemukan masalah besar sebelum feature dikirim: heading tidak logis, landmark hilang, button tidak memiliki nama, input tanpa label, error tidak memberi petunjuk, atau focus berpindah ke tempat yang membingungkan. Pilih satu route, lakukan task nyata dengan keyboard, lalu dengarkan apakah structure serta feedback mendukung task yang sama seperti UI visual.
Bagian ini memengaruhi progres lesson.
Structure kecil yang dapat dinavigasi sebagai informasi
Wajib<main>
<h1>Daftar course</h1>
<p>Temukan lesson yang ingin kamu lanjutkan.</p>
<section aria-labelledby="saved-courses-heading">
<h2 id="saved-courses-heading">Course tersimpan</h2>
<ul>
<li><a href="/lesson/color-contrast">Color Contrast</a></li>
</ul>
</section>
<form>
<label for="course-email">Alamat email</label>
<input id="course-email" type="email" />
<button type="submit">Daftar update</button>
</form>
</main>Heading memberi outline, section memiliki nama, link menyebut destination, dan input memiliki label. Mulai smoke test dengan memeriksa hal sederhana seperti ini sebelum mengejar pattern ARIA yang kompleks. Bila nama dan struktur dasar tidak masuk akal ketika dibaca, visual polish tidak akan memperbaiki experience non-visual.
Bagian ini memengaruhi progres lesson.
Writing practice
WajibLatihan menulis
Pilih satu route pada local project atau FluentStack. Tulis rencana screen reader smoke test yang menyebut task user, heading atau landmark yang akan diperiksa, control yang harus memiliki nama jelas, feedback atau error yang perlu didengar, serta satu batasan dari test singkat ini. Jangan menulis hasil yang belum kamu amati sebagai fakta.
Tulis draft dulu sebelum menandai writing practice selesai.
0/500 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Tujuan paling tepat dari screen reader smoke test awal adalah
Progres lesson naik setelah jawaban benar.
Catatan penting
OpsionalHasil test perlu menyebut environment
Catat browser, operating system, screen reader, dan task yang kamu coba. Behavior dapat berbeda antar kombinasi. Catatan kecil seperti “Chrome + VoiceOver, route profile, submit form kosong” membuat report dapat diulang dan tidak terdengar seperti klaim universal.
Opsional, tidak menghambat penyelesaian lesson.
Ringkasan
Wajib- Screen reader smoke test mendengar heading, landmark, accessible name, error, serta feedback task nyata.
- Mulai dari satu route dan satu journey, bukan audit semua aplikasi sekaligus.
- Catat environment serta apa yang benar-benar kamu amati.
- Smoke test tidak menggantikan keyboard QA, visual review, atau evaluasi yang lebih menyeluruh.
- Berikutnya, browser tools dan automated checks memberi sinyal tambahan, tetapi tetap memiliki batas yang perlu kita pahami.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Dengarkan informasi, bukan hanya tampilan.