Pengujian dengan Pembaca Layar
Gunakan VoiceOver dan NVDA untuk memverifikasi implementasi ARIA.
Pengujian dengan Pembaca Layar adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Mengapa Menguji dengan Pembaca Layar?
Alat otomatis hanya menemukan 30–40% masalah aksesibilitas. Pengujian pembaca layar secara langsung mengungkap masalah yang terlewat oleh pemeriksaan otomatis:
- Urutan pembacaan yang membingungkan
- Pengumuman ARIA yang tidak membantu
- Manajemen focus yang tidak ada
- Pola interaktif yang membingungkan
VoiceOver di Mac
VoiceOver sudah tersedia di macOS — tidak perlu menginstalnya:
<!-- Activate: Cmd+F5 (or System Settings → Accessibility → VoiceOver) -->
<!-- Key commands:
VO = Control+Option
VO+Right Arrow = Next element
VO+Left Arrow = Previous element
VO+Space = Activate element
VO+U = Open rotor (landmark navigation)
VO+H = Next heading
Tab = Next focusable element
Shift+Tab = Previous focusable
-->VoiceOver di iOS
Uji pengalaman pembaca layar seluler dengan VoiceOver di iPhone/iPad:
<!-- Activate: Settings → Accessibility → VoiceOver
Or: triple-click side button if set up -->
<!-- Gestures:
Swipe right = next element
Swipe left = previous element
Double-tap = activate element
Two-finger scrub = back
Three-finger swipe up/down = scroll
-->NVDA di Windows
NVDA adalah pembaca layar gratis dan bersumber terbuka untuk Windows:
<!-- Download: nvaccess.org -->
<!-- Key commands:
NVDA key = Insert (or Caps Lock)
NVDA+N = NVDA menu
H = next heading
K = next link
B = next button
F = next form field
D = next landmark
Insert+F7 = element list (links, headings, landmarks)
-->Daftar Periksa Pengujian Pembaca Layar
Hal-hal yang perlu diverifikasi dengan pembaca layar:
- Judul halaman diumumkan saat pemuatan
- Judul membuat struktur navigasi yang logis
- Semua gambar memiliki teks alt yang bermakna atau kosong
- Semua kolom formulir memiliki label
- Tombol dan tautan memiliki nama yang deskriptif
- Perangkap focus modal berfungsi dengan benar
- Pembaruan konten dinamis diumumkan
Bug Umum pada Pembaca Layar
Masalah yang terlewat oleh pengujian otomatis:
<!-- 1. Reading order differs from visual order -->
<!-- CSS flex/grid order ≠ DOM order for screen readers -->
<!-- 2. aria-label doesn't match visible text -->
<!-- Voice control users say visible text to click -->
<!-- 3. Focus disappears after dialog closes -->
<!-- Programmatically return focus to trigger -->
<!-- 4. Dynamic content not in a live region -->
<!-- New items added silently, no announcement -->Pengujian yang Mengutamakan Keyboard
Sebelum menggunakan pembaca layar, lakukan pengujian dengan keyboard saja terlebih dahulu:
- Lepaskan mouse atau trackpad Anda
- Jelajahi seluruh halaman hanya dengan Tab
- Pastikan setiap elemen interaktif dapat dijangkau
- Pastikan semua tindakan dapat dilakukan dengan keyboard
Alat Pengujian Aksesibilitas Otomatis
Lengkapi pengujian manual dengan alat otomatis:
- axe DevTools — ekstensi Chrome; pemeriksa otomatis yang paling akurat
- WAVE — wavebooth.com; hamparan visual pada halaman
- Lighthouse — Chrome DevTools; audit Kinerja + Aksesibilitas
- pa11y — alat CLI; sangat baik untuk alur CI/CD
Referensi Pola ARIA
W3C ARIA Authoring Practices Guide (APG) menyediakan implementasi referensi:
- Akordeon, Peringatan, Dialog Peringatan
- Jejak Navigasi, Tombol, Karusel
- Kotak Centang, Kotak Kombo, Dialog
- Pengungkapan, Feed, Kisi
- Kotak Daftar, Menu, Bilah Menu
- Tab, Keterangan Alat, Tampilan Pohon
URL: w3.org/WAI/ARIA/apg/
Integrasi Aksesibilitas Berkelanjutan
Integrasikan pengujian aksesibilitas ke dalam alur kerja Anda:
// Jest + axe-core for unit tests:
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);
test('Button is accessible', async () => {
const results = await axe('<button>Click me</button>');
expect(results).toHaveNoViolations();
});
// pa11y in CI pipeline:
// pa11y https://example.com --standard WCAG2AARingkasan Pengujian
Strategi pengujian aksesibilitas yang lengkap:
- Desain — periksa kontras warna dan ukuran target sentuh
- Pengembangan — lakukan pengujian keyboard dan pemindaian axe otomatis
- Tinjauan — lakukan pengujian pembaca layar (VoiceOver + NVDA)
- CI/CD — gunakan pa11y atau axe dalam alur otomatis
- Produksi — gunakan Lighthouse dan pemeriksaan manual secara berkala
Pemeriksaan Singkat
Berapa persentase masalah aksesibilitas yang dapat ditemukan secara andal oleh alat otomatis?
Ringkasan: Pengujian Pembaca Layar
Hal-hal penting dalam pengujian:
- VoiceOver (Mac/iOS) dan NVDA (Windows) gratis dan sangat penting
- Uji dengan keyboard saja terlebih dahulu; kemudian tambahkan pembaca layar
- Alat otomatis: axe, WAVE, Lighthouse, pa11y
- Pengujian otomatis hanya menemukan sekitar 30–40% masalah
- Gunakan pola APG sebagai referensi untuk implementasi ARIA yang benar
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pengujian dengan Pembaca Layar” gratis?
Ya — teks lengkap “Pengujian dengan Pembaca Layar” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Pengujian dengan Pembaca Layar”?
Gunakan VoiceOver dan NVDA untuk memverifikasi implementasi ARIA. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Pengujian dengan Pembaca Layar” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- aria-expanded aria-controls untuk Sakelar
- aria-selected dan Pola Tab
- Region Langsung aria-live aria-atomic aria-relevant
- Pengujian dengan Pembaca Layar