Centang Lewati Layar: Memahami dan Menggunakannya dengan Efektif
Centang lewati layar, atau screen reader bypass navigation, adalah fitur aksesibilitas web yang memungkinkan pengguna yang menggunakan pembaca layar untuk melewati blok konten yang berulang atau tidak relevan, seperti navigasi utama, header, atau footer.
Fitur ini sangat penting karena dapat secara signifikan meningkatkan pengalaman pengguna bagi penyandang disabilitas, khususnya mereka yang menggunakan pembaca layar, dengan mengurangi jumlah informasi yang harus mereka dengarkan setiap kali mereka berpindah ke halaman baru.
Mengapa Centang Lewati Layar Penting?
- Efisiensi: Pengguna dapat langsung menuju konten utama halaman centang lewati layar harus mendengarkan navigasi atau elemen centang lewati layar lainnya.
- Pengalaman Pengguna yang Lebih Baik: Mengurangi centang lewati layar dan kelelahan mental yang disebabkan oleh informasi yang berlebihan.
- Aksesibilitas: Memastikan bahwa situs web mematuhi pedoman aksesibilitas seperti WCAG (Web Content Accessibility Guidelines).
Cara Kerja Centang Lewati Layar
Centang lewati layar biasanya diimplementasikan menggunakan tautan "Lewati ke konten" atau "Lewati navigasi" yang ditempatkan di awal halaman.
Tautan ini biasanya tersembunyi secara visual tetapi dapat diakses oleh pembaca layar. Ketika tautan diaktifkan, pembaca layar langsung menuju ke bagian centang lewati layar utama halaman.
Implementasi Centang Lewati Layar
Ada beberapa cara untuk mengimplementasikan centang lewati layar:
- Menggunakan Tautan Biasa dengan Anchor:
Ini adalah metode yang paling umum.
Tautan "Lewati ke konten" menunjuk ke anchor di dalam konten utama.
<a href="#main">Lewati centang lewati layar konten</a><main id="main">konten utama</main>
- Menggunakan ARIA (Accessible Rich Internet Applications):
ARIA dapat digunakan untuk memberikan informasi tambahan kepada pembaca layar, meningkatkan aksesibilitas lebih lanjut.
<a href="#main" class="skip-link">Lewati ke konten</a><main id="main" aria-labelledby="main-heading"> <h1 id="main-heading">Judul Konten Utama</h1> konten utama</main>
- Menggunakan CSS untuk Menyembunyikan Tautan Secara Visual:
Tautan harus disembunyikan secara visual tetapi tetap dapat diakses oleh pembaca layar.
Teknik yang umum digunakan adalah:
.skip-link { position: absolute; top: px; left: 0; background: #; color: white; padding: 8px; z-index: ;}.skip-link:focus { top: 0;}
Praktik Terbaik untuk Centang Lewati Centang lewati layar
:focus
).Dengan mengimplementasikan centang lewati layar dengan benar, Anda dapat centang lewati layar situs web Anda lebih mudah diakses centang lewati layar ramah pengguna bagi semua orang, termasuk mereka yang menggunakan pembaca layar.