Apa itu Pratinjau Teks Pembaca Layar?

Screen Reader Text Preview menunjukkan bagaimana teknologi bantu membaca konten HTML Anda. Alat ini menampilkan nama aksesibel, peran, dan urutan pembacaan setiap elemen, sehingga Anda bisa menangkap label yang hilang, struktur heading yang rusak, dan masalah ARIA sebelum pengguna sungguhan menemuinya.

Alat ini menelaah HTML dengan cara yang sama seperti screen reader membangun pohon aksesibilitasnya: tata letak visual dibuang, aria-label dan aria-labelledby diuraikan, alt gambar diambil, lalu hasilnya diratakan menjadi urutan baca linier. Panel masalah menandai tautan tanpa nama aksesibel, lompatan level heading, gambar tanpa alt, dan kontrol formulir tanpa label.

Cara menggunakan

1. Tempel konten HTML Anda atau masukkan URL untuk dianalisis.
2. Tinjau urutan pembacaan linear dan pohon aksesibilitas elemen.
3. Perbaiki masalah yang ditandai dan uji ulang hingga alur pembacaan jelas.

Kapan menggunakan

• Sebelum meluncurkan landing page yang harus lolos audit WCAG AA.
• Saat pengguna NVDA atau VoiceOver melapor bahwa menu navigasi terdengar membingungkan.
• Memeriksa HTML widget pihak ketiga setelah pembaruan untuk menemukan regresi aksesibilitas.

Hasil

Seorang developer menempelkan menu navigasi. Alat ini mengungkapkan bahwa 3 tautan tidak memiliki nama aksesibel dan urutan heading melompat dari h1 ke h4, menyebabkan kebingungan bagi pengguna screen reader.

FAQ

Apakah alat ini bisa menggantikan pengujian dengan screen reader sungguhan?

Tidak. NVDA, JAWS, dan VoiceOver punya keunikan masing-masing dalam mengumumkan live region, header tabel, dan konten dinamis. Gunakan alat ini untuk menjaring masalah jelas (label hilang, urutan heading rusak) dulu sebelum menghabiskan waktu di screen reader sungguhan.

Mengapa ikon dekoratif saya ditandai sebagai masalah?

Secara default screen reader mengumumkan setiap img. Jika ikon murni dekoratif, beri alt kosong dan aria-hidden="true", maka alat akan melewatkannya dari urutan baca. Hindari alt="ikon" atau alt="dekorasi", itu lebih buruk daripada tidak ada.

Bagaimana urutan heading yang benar?

Tepat satu h1 per halaman, dan jangan melompati level saat turun (setelah h2 tidak boleh langsung h4). Naik ke level lebih tinggi tidak masalah. Pengguna screen reader menavigasi dengan melompat antar heading, hierarki yang rusak membuat halaman serupa labirin.

Apakah setiap elemen interaktif perlu aria-label?

Tidak. Tombol bertext terlihat tidak butuh aria-label; teks itu otomatis menjadi nama aksesibel. Tambahkan aria-label hanya saat tidak ada teks terlihat (tombol ikon saja) atau saat teks tidak deskriptif (deretan "Selengkapnya").

Bisakah saya menempelkan satu halaman utuh?

Bisa, tempel HTML lengkapnya. Alat ini mengabaikan script, style, dan meta tag dan berfokus pada body. Untuk halaman yang sangat besar, periksa per bagian agar daftar masalah tetap mudah dibaca.

Alat terkait