2.4.9 Tujuan Tautan (Hanya Tautan)

Apa itu WCAG 2.4.9?

Tautan di website harus jelas dan membantu hanya dengan teks Tautannya saja; tidak boleh bergantung pada konteks di sekitarnya. Dengan begitu, pembaca layar bisa membacakan teks tautan yang berdiri sendiri dan pengguna tahu tepatnya kemana Tautan itu menuju, sehingga mereka bisa memutuskan apakah mau mengklik tautan tersebut atau tidak.

Satu-satunya pengecualian adalah untuk tautan yang memang sengaja dibuat misterius, seperti dalam permainan di mana rahasia adalah bagian dari keseruan. Dalam kasus seperti itu, teks tautan yang tidak jelas bisa diterima karena menambah pengalaman bermain.

Perbedaan

• WCAG 2.4.4 Tujuan Tautan (Dalam Konteks) memperbolehkan teks tautan dan konten terdekatnya, seperti paragraf, judul, daftar, atau sel tabel yang membungkusnya, bekerja sama agar tujuan link jadi jelas.
• WCAG 2.4.9 Tujuan Tautan (Hanya Tautan) mewajibkan teks tautan saja harus cukup menjelaskan tujuannya, sehingga walaupun dilihat dalam daftar tautan yang tanpa konteks atau dalam mode pembaca layar, setiap tautan tetap bisa dimengerti maksudnya.

Mengapa ini penting?

Saat tautan tidak jelas, pengguna bisa merasa frustrasi karena mereka tidak tahu kemana tautan itu akan membawa mereka. Kurangnya kejelasan ini membuat mereka sulit memutuskan apakah ingin mengklik tautan tersebut atau tidak.

Bayangkan mencoba menavigasi sebuah situs web di mana setiap tautan hanya tertulis “klik di sini” atau “baca lebih lanjut” tanpa petunjuk apa yang akan ditemukan setelahnya. Rasanya seperti memilih pintu tanpa tahu apa yang ada di baliknya.

Ketidakpastian ini bisa membuat pengalaman menjelajah menjadi membingungkan dan tidak efisien, terutama bagi pengguna yang menggunakan teknologi bantu yang sangat bergantung pada deskripsi tautan yang jelas untuk memahami isi halaman web. Pada akhirnya, tautan yang tidak jelas mengganggu kelancaran navigasi dan bisa membuat pengguna merasa putus asa atau berhenti menjelajah situs web tersebut sama sekali.

Siapa yang terpengaruh?

Pengguna dengan mobilitas terbata, pengguna dengan disabilitas kognitif, dan pengguna low vision atau terbatas.

Pengguna dengan mobilitas terbatas bisa mendapatkan manfaat dari deskripsi tautan yang jelas karena mereka bisa melewati tautan yang tidak mereka minati, sehingga menghemat jumlah klik yang tidak perlu saat mengakses konten yang tidak relevan. Ini membuat navigasi jadi tidak terlalu melelahkan secara fisik dan lebih efisien.

Pengguna dengan disabilitas kognitif mungkin merasa bingung dengan tautan yang tidak jelas dan pilihan navigasi yang berulang-ulang. Tautan yang jelas akan memudahkan mereka menavigasi tanpa merasa bingung atau kewalahan.

Pengguna low vision atau terbatas yang mengandalkan screen reader atau teknologi bantu lainnya membutuhkan tautan yang jelas dan deskriptif. Jika tidak, banyak waktu terbuang hanya untuk mencoba menavigasi berdasarkan konteks di sekitar tautan. Pembaca layar biasanya menyajikan tautan dalam bentuk daftar untuk membantu pengguna menavigasi situs, dan tautan yang tidak jelas membuat pengguna tidak tahu harus ke mana atau sedang menuju ke mana.

Cara menerapkan WCAG 2.4.9

Teks tautan yang deskriptif

Untuk memenuhi kriteria keberhasilan ini, pastikan teks dalam elemen <a> secara jelas menjelaskan tujuan tautan tersebut. Teksnya harus bisa dibedakan dari tautan lain di halaman dan memberikan kejelasan tentang ke mana tautan itu akan membawa atau apa yang akan dilakukan.

Sebagai contoh: Gunakan teks seperti Unduh Laporan Aardvark (PDF) daripada hanya Unduh.

Gunakan nama tautan yang konsisten

Jika beberapa tautan menuju ke halaman yang sama atau memiliki fungsi yang sama, maka teks tautannya harus ditulis dengan kata-kata yang konsisten. Jika tautannya menuju ke tempat yang berbeda, berikan nama yang unik dan deskriptif untuk masing-masing.

Samakan teks tautan dengan judul halaman tujuan

Buat teks tautan dan judul halaman yang dituju hampir sama. Dengan begitu, saat pengguna mengklik tautan, mereka mendarat di halaman yang judulnya sesuai dengan pilihan mereka.
Ini juga membantu pengguna pembaca layar menghubungkan tautan yang mereka dengar dengan halaman yang mereka kunjungi.

Untuk informasi lebih lanjut tentang judul halaman, lihat WCAG 2.4.2 Ada Judul Halaman.

Tautan berisi gambar atau grafik

Jika tautan hanya berupa gambar, artinya satu-satunya isi dari elemen <a> adalah gambar, maka atribut alt harus disertakan untuk menjelaskan tujuan tautan tersebut.

<a href="https://en.wikipedia.org/wiki/Aardvark">
    <img src="aardvark_animal_icon.png" alt="Aardvark Wikipedia Article">
</a>

Namun, jika kamu menyertakan teks deskriptif di dalam elemen <a> bersama grafik tersebut, dan penambahan deskripsi akan menjadi pengulangan, kamu boleh mengosongkan atribut alt (alt="").

<a href="https://en.wikipedia.org/wiki/Aardvark">
    <img src="aardvark_animal_icon.png" alt="">
    Aardvark Wikipedia Article
</a>

Beralih ke tampilan tautan deskriptif

Untuk metode ini, kamu bisa menambahkan kontrol toggle yang diberi label dengan jelas di bagian atas halamanmu, contohnya: Lihat dengan Nama Tautan Deskriptif. Saat diklik, kontrol ini bisa memuat ulang halaman atau mengganti teks tautan langsung menggunakan JavaScript agar setiap tautan mencakup konteks lengkap dan bisa berdiri sendiri.

Contoh sebelum:

<a href="/report">Unduh</a>

Contoh sesudah:

<a href="/report">Unduh Laporan Habitat Aardvark 2025 (PDF)</a>

Kamu juga bisa menyimpan pilihan pengguna ini dalam cookie atau profil mereka, jadi mereka hanya perlu beralih satu kali. Pengguna yang membutuhkan deskripsi lengkap akan selalu melihat versi deskriptif, sementara pengguna lain tetap menggunakan versi pendek yang bergantung pada konteks.

CSS untuk menyembunyikan teks deskriptif

Pendekatan lain adalah dengan menambahkan teks deskriptif ke dalam tautan dan menggunakan CSS untuk menyembunyikan teks tambahan tersebut dari tampilan layar. Jika dilakukan dengan benar, teks tersebut tetap bisa diakses oleh screen reader sambil menjaga tampilan visual tetap bersih.

Teknik CSS seperti visibility: hidden atau display: nonetidak cocok karena juga menyembunyikan teks dari screen reader. Pendekatan yang lebih baik adalah menempatkan teks deskriptif dalam wadah 1 piksel dengan overflow: hidden, sehingga tidak terlihat di layar, tapi tetap bisa dibaca oleh screen reader.

.visually-hidden {
    clip-path: inset(100%);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

Dan gaya ini bisa disisipkan melalui elemen <span> yang berada di dalam elemen <a>.

<a href="https://en.wikipedia.org/wiki/Aardvark">
    Wikipedia
    <span class="visually-hidden">Article About Aardvarks</span>
</a>

Peta gambar (image maps)

Peta gambar adalah jenis gambar khusus yang mencakup area <area> yang dapat dipilih di dalamnya yang berfungsi sebagai tautan. Selain deskripsi keseluruhan gambar melalui atribut alt pada <img>, setiap <area> juga harus menyediakan atribut alt sendiri untuk menjelaskan tujuannya.

Atribut aria-label

Perlu dicatat bahwa cara terbaik untuk memastikan keteraksesan tujuan tautan adalah dengan metode-metode yang sudah dijelaskan sebelumnya. Namun, jika kamu harus menggunakan elemen interaktif kustom, ARIA bisa membantu memastikan tautan tetap memiliki konteks.

Atribut aria-label menambahkan label teks pada tautan ketika tidak ada teks yang terlihat untuk menjelaskannya.

Dalam contoh ini, screen reader akan mengabaikan teks tautan yang terlihat ("Continue reading...") dan malah membacakan "Continue reading about Aardvark habitats and food sources." berdasarkan aria-label yang ada di elemen <a>.

<a aria-label="Continue reading about Aardvarks and their habitats and food sources." 
   href="https://en.wikipedia.org/wiki/Aardvark">
    Continue Reading…
</a>

Kesimpulan

Dengan memberikan nama deskriptif pada setiap tautan, kamu membantu semua pengguna, terutama yang memakai teknologi bantu, untuk menjelajahi situs webmu dengan percaya diri dan efisien. Menulis tautan dengan jelas adalah kebiasaan kecil yang memberi dampak besar, jadi biasakan sejak awal.