Testing dengan Screen Reader

Screen reader membaca konten halaman secara linear. Apa yang terlihat bagus secara visual belum tentu masuk akal saat didengarkan. Testing dengan screen reader menemukan masalah yang automated tools tidak bisa detect.

Screen Readers

• VoiceOver — Built-in di macOS/iOS. Aktifkan: Cmd+F5
• NVDA — Free, Windows. Download dari nvaccess.org
• JAWS — Paid, Windows. Paling populer di enterprise
• TalkBack — Built-in Android

VoiceOver Basics (macOS)

Cmd + F5        → Toggle VoiceOver on/off
VO + Right/Left → Navigate ke elemen berikutnya/sebelumnya
VO + Space      → Activate (klik)
VO + U          → Rotor (landmark, heading, link list)
VO + Shift + Down → Enter web area

// VO = Control + Option

What to Test

• Page title — Apakah bermakna? Bukan "Untitled" atau "Page 1"
• Headings — Apakah hierarchy benar (h1 → h2 → h3)?
• Images — Apakah alt text deskriptif?
• Forms — Apakah setiap input punya label?
• Navigation — Bisa navigasi dengan keyboard saja?
• Dynamic content — Apakah perubahan di-announce?
• Modals — Focus trapped? Bisa close dengan Escape?

Common Issues Found

<!-- ❌ Image tanpa alt -->
<img src="chart.png" />
<!-- Screen reader: "chart dot png, image" -->

<!-- ✅ Descriptive alt -->
<img src="chart.png" alt="Grafik penjualan Q1 2026, naik 23%" />

<!-- ❌ Link tidak deskriptif -->
<a href="/report">Klik di sini</a>
<!-- Screen reader: "klik di sini, link" — di sini kemana? -->

<!-- ✅ -->
<a href="/report">Download laporan penjualan Q1</a>