Intinya...

Tujuan tiap tautan harus bisa dibedakan dari

  • tautan itu sendiri, atau
  • konteks di sekitarnya.

Apa itu WCAG 2.4.4?

Pedoman ini bertujuan untuk membuat tautan di situs web jelas dan berguna bagi semua pengguna, terutama mereka yang menggunakan teknologi bantu seperti screen reader. Ini biasanya berarti menggunakan teks tautan deskriptif yang memberi tahu pengguna ke mana tautan tersebut mengarah tanpa memerlukan penjelasan tambahan, sehingga pengguna dapat memutuskan apakah mereka ingin mengikuti tautan tersebut.

Satu-satunya pengecualian adalah untuk tautan di mana tujuannya sengaja disembunyikan, seperti dalam permainan di mana misteri menjadi bagian dari kesenangan. Dalam kasus tersebut, teks tautan yang tidak jelas diperbolehkan karena menambah pengalaman.

Ilustrasi kebingungan pengguna menavigasi tautan yang tidak jelas

Tautan yang tidak jelas dibandingkan dengan tautan yang jelas. Contoh tautan yang tidak jelas memiliki tanda tanya di sampingnya untuk menunjukkan bahwa tujuannya tidak jelas. Tautan lainnya mengatakan 'Aardvark Wikipedia Article' dan menunjukkan ilustrasi halaman web di sampingnya di mana tujuan tautan dapat dipahami dengan jelas berdasarkan tujuannya.

Mengapa ini penting?

Ketika tautan tidak jelas, pengguna bisa merasa frustrasi karena mereka tidak tahu ke mana tautan tersebut akan membawa mereka. Ketidakjelasan ini membuat mereka lebih sulit memutuskan apakah mereka ingin mengklik tautan itu atau tidak.

Bayangkan mencoba menavigasi situs web di mana setiap tautan hanya bertuliskan "klik di sini" atau "baca lebih lanjut" tanpa indikasi apa yang akan kamu temukan di baliknya. Ini seperti mencoba memilih pintu tanpa tahu apa yang ada di belakangnya.

Ilustrasi berupa labirin dengan berbagai halaman web di dalamnya

Ilustrasi sebuah labirin di mana tautan-tautan yang samar tersebar sepanjang jalan. Menavigasi situs dengan tautan yang tidak jelas dapat membuat pengguna merasa seperti mereka sedang melewati labirin.

Ketidakpastian ini bisa membuat pengalaman browsing menjadi membingungkan dan tidak efisien, terutama bagi orang yang menggunakan teknologi bantu yang bergantung pada deskripsi tautan yang jelas untuk memahami konten halaman web. Pada akhirnya, tautan yang tidak jelas mengganggu alur navigasi dan bisa membuat pengguna merasa kecewa atau menyerah untuk menjelajahi situs tersebut sama sekali.

Siapa yang terpengaruh?

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

Pengguna dengan mobilitas terbatas dapat memanfaatkan deskripsi tautan yang jelas untuk memungkinkan mereka melewati tautan yang tidak menarik bagi mereka, menghemat waktu dan tenaga dari mengunjungi konten yang tidak relevan. Hal ini membuat navigasi menjadi lebih efisien dan tidak terlalu membebani fisik.

Pengguna dengan disabilitas kognitif mungkin merasa bingung dengan tautan yang tidak jelas dan opsi navigasi yang berulang. Tautan yang jelas akan mempermudah navigasi tanpa membuat mereka bingung atau kewalahan.

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

Contoh card dengan beberapa tautan dengan teks yang samar

Contoh dari sebuah bagian dengan teks tautan yang tidak jelas dan bagaimana teknologi bantu akan mengumumkan tautan tersebut. Contoh ini mencakup teks tautan seperti 'Popular', 'Dog', 'Playful', 'Learn More', dan 'download'.

Cara menerapkan WCAG 2.4.4

Bagian ini menawarkan penjelasan yang disederhanakan dan contoh-contoh untuk membantu kamu memulai. Untuk panduan lengkap, selalu rujuk ke dokumentasi resmi WCAG.

Teks tautan deskriptif

Cara paling sederhana untuk memberikan tujuan pada tautan adalah melalui teks tautan yang terkandung dalam elemen <a>. Teks tersebut harus dapat dibedakan dari tautan lainnya di halaman web dan menjelaskan dengan jelas ke mana tautan tersebut mengarah atau apa yang dilakukannya.

<a href="https://en.wikipedia.org/wiki/Aardvark">https://en.wikipedia.org/wiki/Aardvark</a>

Konteks deskriptif sekitar tautan

Beberapa pengecualian untuk teks tautan deskriptif terjadi pada tautan yang ditemukan di dalam:

  • Judul
  • Kalimat
  • Paragraf
  • Item daftar (list item)
  • Item daftar bertingkat (nested list items)
  • Sel tabel

Konteks yang mengelilingi tautan harus memberikan informasi lebih lanjut untuk menjelaskan tujuan tautan dan membantu pengguna membedakannya dari tautan lainnya di halaman. Dalam setiap kasus, sangat penting agar tautan atau elemen <a> dibungkus dengan elemen <p>, <li>, atau <td> yang memberikan konteks tersebut.

Yang paling berguna adalah jika informasi tambahan yang dibutuhkan untuk memahami tautan disajikan sebelum tautan tersebut. Jika datang setelah tautan, ini bisa membingungkan pengguna yang membaca halaman dari atas ke bawah.

Contoh pada heading

Tautan bisa disertakan di dalam heading itu sendiri, atau mereka bisa mendapatkan tujuannya dari heading sebelumnya juga.

<h2><a href="aardvark-report.com">Overview of the AAArdvark species report </a>

<h2>Overview of the AAArdvark species report</h2>
<p>
    <a href="aardvark-report.com/pdf">Read in PDF Format</a>
</p>

Contoh pada kalimat

Dalam contoh ini, tautan mandiri tidak jelas karena hanya bertuliskan "klik di sini", namun teks yang berdekatan membantu menjelaskan tujuan tautan dan apa yang akan ditemukan jika tautan tersebut diklik.

<p>
    Lorem ipsum dolor sit amet <a href="aardvark-report.com"> click here.</a>
</p>

Contoh pada paragraf

Dalam contoh ini, tautan berada di luar kalimat, tetapi tetap memenuhi kriteria karena tautan berada dalam elemen paragraf <p> yang membungkusnya. Tautan ini memberi pengguna cukup informasi untuk memahami tujuan tautan tersebut.

<p>
    Coming soon: The finals for the national corgi dancing competition.
    <a href="dancing-corgi.com/finals">Read more</a>
</p>

Contoh pada list item

Demikian pula, tautan yang terdapat dalam elemen item daftar <li> dapat memperoleh konteks dari informasi yang tercantum di dalamnya.

<ul>
    <li>
        <a href="aardvark-report.com">Aardvark Charity event</a>
    </li>
</ul>

Contoh pada nested list item

Tautan dalam item daftar bersarang juga dapat memperoleh konteks tambahan dari item daftar induknya.

<ul>
    <li><a href="<a href="https://en.wikipedia.org/wiki/Aardvark">https://en.wikipedia.org/wiki/Aardvark</a>
    <ul>
        <li><a href="https://en.wikipedia.org/wiki/Aardvark#Habitat_and_range">Habitat and Range</a>
        <li><a href="https://en.wikipedia.org/wiki/Aardvark#Conservation">Conservation</a>
    </ul>
</ul>

Contoh pada sel tabel

Tautan dalam sel tabel dapat memperoleh konteks dari teks dalam sel yang sama dan dari header baris atau kolom.

<table>
    <caption>Aardvarks tracked by the Aardvark Charity Commission</caption>
    <tr>
        <th>Country of Habitat</th>
        <th>Kenya</th>
        <th>Uganda</th>
    </tr>
    <tr>
        <th scope="row">Number of Aardvarks Tracked Per Country</th>
        <td><a href="<a href="http://aaardvark-report.com/kenya">aaardvark-report.com/kenya</a>
        <td><a href="aaardvark-report.com/uganda">12</a>
    </tr>
</table>

Tautan dengan grafis atau gambar

Jika tautan hanya bersifat grafis, misalnya, satu-satunya konten dalam elemen <a> adalah gambar, maka atribut alt perlu disertakan untuk membantu menjelaskan 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> untuk disandingkan dengan grafismu, dan deskripsi tambahan tersebut akan menjadi pengulangan, maka kamu bisa membiarkan atribut alt kosong.

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

Gambar terkait yang berdampingan dengan teks yang sama

Untuk mengurangi link yang redundan yang mengarah ke tujuan atau sumber daya yang sama, penting untuk meninjau gambar yang terhubung yang berdampingan dengan teks yang terhubung. Tata letak ini cukup umum di seluruh web; misalnya, daftar blog atau daftar produk dengan gambar unggulan di samping judul yang terhubung, di mana keduanya mengarah ke halaman yang sama.

Dalam kasus ini, kamu perlu memastikan bahwa HTML kamu disusun sedemikian rupa sehingga elemen gambar atau <img> terletak dalam elemen tag <a>. Setelah gambar terletak di dalamnya, kamu juga dapat menerapkan alternatif berupa teks pada gambar jika teks tersebut menjelaskan gambar atau menambah konteks pada link.

Ini memudahkan screen reader untuk menavigasi halaman karena tidak ada link duplikat ke sumber daya yang sama dan tidak perlu membaca informasi yang sama secara berulang.

Lakukan:

<a href="https://dog.com/dancing-shoes">https://dog.com/dancing-shoes">
    <img alt="Dog wearing dancing shoes with the text 'Buy Now' below" src="dancing_dog.png">
    Buy Doggy Dancing Shoes Today!
</a>

Hindari:

<a href="https://dog.com/dancing-shoes">
    <img alt="Dog wearing dancing shoes with text 'Buy Now' below" src="dancing_dog.png">
</a>
<a href="https://dog.com/dancing-shoes">
    Buy Doggy Dancing Shoes Today!
</a>

Gambar anjing berdansa disertai contoh atribut alt-nya

Daftar produk di mana gambar unggulan menampilkan anjing yang mengenakan sepatu dansa dan judul yang terhubung mengatakan, 'Buy Doggy Dancing Shoes Today'. Ikon klik ditampilkan di atas gambar dan judul untuk menyampaikan bahwa kedua elemen tersebut terhubung.

CSS untuk menyembunyikan teks deskriptif

Pendekatan lain melibatkan menambahkan teks deskriptif ke sebuah tautan dan menggunakan CSS untuk menyembunyikan teks tambahan agar tidak ditampilkan. Jika dilakukan dengan benar, teks tersebut tetap dapat diakses oleh screen reader sementara desain visual tidak terlalu berantakan.

Teknik CSS yang menggunakan visibility: hidden atau display: none akan menyembunyikan teks dari screen reader. Pendekatan yang lebih baik adalah dengan menempatkan teks deskriptif dalam wadah 1 piksel dengan overflow: hidden, sehingga teks tersebut tidak terlihat di layar tetapi tetap dapat 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;
}
<a href="https://en.wikipedia.org/wiki/Aardvark">https://en.wikipedia.org/wiki/Aardvark</a>
<span class="visually-hidden">Aardvark Wikipedia Article</span>

Peta gambar (image map)

Peta gambar adalah jenis gambar khusus yang mencakup area yang dapat dipilih di dalamnya yang dihitung sebagai tautan. Selain deskripsi teks alt gambar secara keseluruhan, setiap area juga harus menyediakan atribut alt-nya sendiri untuk menjelaskan tujuannya.

Contoh peta dunia dengan beberapa atribut alt-nya

Peta dunia dengan area yang disorot yang dapat diklik untuk mempelajari lebih lanjut tentang benua-benua. Setiap benua memiliki atribut alt-nya sendiri, misalnya, 'Learn about Asia'.

aria-label dan aria-labelledby

Perlu dicatat bahwa cara terbaik untuk menangani aksesibilitas tujuan tautan adalah melalui metode yang disebutkan di atas; namun, jika kamu harus menggunakan elemen interaktif kustom, ARIA dapat membantu memastikan tautanmu tetap memiliki konteks.

Atribut aria-label

Atribut aria-label menambahkan label teks ke tautan ketika tidak ada teks yang terlihat yang menjelaskannya. Jika ada elemen deskriptif yang terlihat, atribut aria-labelledby harus digunakan sebagai gantinya.

Atribut aria-labelledby

Tautan dapat mengambil maknanya dari elemen teks terlihat yang ada di halaman dan menggunakan atribut aria-labelledby untuk membuat hubungan. Teks label yang terkait akan diumumkan untuk mewakili tautan, bukan teks tautan yang disematkan.

Dalam contoh berikut, tautan akan diumumkan sebagai “Aardvark Wikipedia Article” berdasarkan judul, bukan “Continue Reading….” yang termasuk dalam markup tautan.

<h2 id="aardvark-wiki-page">Aardvark Wikipedia Article</h2>
<a id="aardvark-wiki-link"
   aria-labelledby="aardvark-wiki-page"
   href="https://en.wikipedia.org/wiki/Aardvark">
    Continue Reading…
</a>

Atribut aria-label

Namun, jika tidak ada elemen teks deskriptif yang terlihat di halaman yang dapat digunakan untuk mewakili tautan, maka tautan dapat menggunakan atribut aria-label.

Dalam contoh ini, tautan diumumkan sebagai "Continue reading about Aardvark habitats and food sources" berdasarkan aria-label yang ditemukan dalam elemen tautan atau <a>.

<img alt="Aardvark in its wild habitat eating from an ant pile" src="aardvark.png">
    <a aria-label="Continue reading about Aardvarks and their habitats and food sources"
       href="https://en.wikipedia.org/wiki/Aardvark">
    Continue Reading…
</a>

Kesimpulan

Mengikuti WCAG 2.4.4 memastikan bahwa tautan di situs web jelas dan mudah dipahami, terutama bagi pengguna yang menggunakan teknologi bantu. Teks tautan yang deskriptif atau konteks membantu pengguna mengetahui ke mana tautan akan membawa mereka, membuat navigasi lebih sederhana dan lebih efisien.