Pembaca layar menyediakan satu fitur yang mengubah cara kita menilai teks link: daftar link. Dengan satu pintasan, pengguna memanggil seluruh tautan halaman dalam satu daftar — lalu melompat dari link ke link dengan tombol panah, tanpa membaca paragraf di sekitarnya. Di dalam daftar itu, teks link berdiri sendiri: tidak ada kalimat pembuka, tidak ada judul bagian, hanya teksnya.
Konsekuensinya tegas: teks link harus bermakna tanpa konteks. “Klik di sini” pada daftar itu hanya berbunyi “klik di sini” — tiga belas kali bila halaman memakainya tiga belas kali.
Teks yang Berdiri Sendiri #
Empat pola yang paling sering kita jumpai, beserta perbaikannya:
| Teks link yang kurang | Perbaikan | Alasan |
|---|---|---|
| klik di sini | Baca panduan menyeduh V60 | tujuan dan aksi ikut terbaca |
| selengkapnya | Selengkapnya: Promo Desember | dibedakan dari link kembar |
| tautan ini | Buka jam buka kedai | tanpa konteks tidak bermakna |
| https://developer.mozilla.org/id/docs/Web/HTML | Dokumentasi HTML di MDN | URL dieja satu per satu |
Baris terakhir butuh penjelasan khusus: pembaca layar membacakan URL telanjang eja demi eja — “h-t-t-p-s titik dua garis miring…” — dan sebagian pengguna menyerah di tengah ejaan. Sebagian kecil nama situs yang sudah umum dibaca sebagai kata, tetapi URL panjang berparameter tidak pernah. Tuliskan teks yang bermakna, biarkan URL hidup di atribut href.
Kedua tautan berikut menuju alamat yang persis sama — satu memakai teks samar, satu memakai teks yang berdiri sendiri. Arahkan kursor ke keduanya, atau tekan keduanya dan bandingkan:
Tampilannya sama dan tujuannya sama — yang berbeda hanyalah kualitas teksnya. Dalam daftar link pembaca layar, baris pertama hanya berbunyi “klik di sini” tanpa konteks apa pun, sedangkan baris kedua langsung menjelaskan isinya. Klik tautan mana pun: keduanya mendarat di halaman contoh yang sama, membuktikan bahwa bedanya bukan pada tujuan, melainkan murni pada teks.
“Baca Selengkapnya” yang Berulang #
Pola paling sulit: desain meminta teks pendek “Baca selengkapnya” di setiap kartu artikel. Dalam daftar link, sepuluh kartu menghasilkan sepuluh baris kembar yang tidak bisa dibedakan. Dua jalan keluarnya:
- Tulis deskriptif sejak awal — “Baca panduan V60” dan “Baca profil petani Gayo” di setiap kartu.
- Pertahankan teks pendek, lengkapi lewat
aria-label— teks visual tetap ringkas, pengumuman pembaca layar memanjang:
<a href="/blog/v60-pemula/" aria-label="Baca selengkapnya: Cara Menyeduh Kopi V60 untuk Pemula">
Baca selengkapnya
</a>Mari kita bedah:
- Baris 1 (
aria-label): menggantikan teks link pada pengumuman pembaca layar — di daftar link, baris ini terbaca “Baca selengkapnya: Cara Menyeduh Kopi V60 untuk Pemula”. - Baris 2 (teks visual): tampilan halaman tetap memakai teks pendeknya; pengguna mouse dan pembaca layar masing-masing menerima versi yang sesuai.
Link Gambar #
Link yang isinya gambar membaca alt sebagai teks linknya — mekanisme yang sudah kita bahas pada chapter alternative text. Ikon menu yang menjadi link memakai alt="Buka menu seduh", bukan alt="ikon menu":
<a href="/menu/">
<img src="ikon-menu.svg" alt="Buka menu seduh">
</a>Fokus tiba di link ini, pengguna mendengar “Buka menu seduh, link” — aksinya jelas, tujuannya jelas.
Ringkasan #
- Daftar link pembaca layar membaca teks link tanpa konteks sekitarnya.
- Teks link menyebut tujuan: “Baca panduan menyeduh V60”, bukan “klik di sini”.
- “Baca selengkapnya” berulang dibedakan lewat teks deskriptif atau
aria-label. - URL telanjang dieja satu per satu — berikan teks pengganti.
altpada link gambar menjadi teks link yang diumumkan.
Kalimat berikutnya yang dibaca pembaca layar bergantung pada satu atribut kecil di elemen html: penanda bahasa.