Jangan Gunakan Teks Tautan Seperti "Klik di Sini" (2001)

• Menekankan masalah penggunaan teks tautan yang umum seperti "Klik di Sini"
• Terkait peningkatan aksesibilitas, teks tautan harus menyampaikan makna konten dengan jelas
• Menimbulkan dampak negatif pada mesin pencari dan pengalaman pengguna screen reader
• Frasa tautan yang jelas dan mencerminkan konteks memberi manfaat bagi pengguna maupun teknologi
• Sejak 2001, telah ada dorongan untuk merekomendasikan teks tautan yang tepat dalam kerangka standar web dan prinsip UX

---

Pendahuluan

• Penggunaan teks tautan umum seperti "Klik di Sini" atau "click here" telah lama menjadi praktik yang lazim di kalangan pengembang web
• Namun, pendekatan ini memiliki kelemahan penting dari sisi aksesibilitas, kegunaan, dan SEO

Makna Teks Tautan dan Permasalahannya

• Teks tautan berperan memberikan informasi agar pengguna dapat memprediksi ke mana tautan tersebut akan membawa mereka sebelum mengklik
• Jika hanya ditulis sebagai "Klik di Sini", tautan hadir tanpa konteks sehingga menimbulkan kebingungan pengguna dan penurunan aksesibilitas

Dampak pada Aksesibilitas dan Pengalaman Pengguna

• Pengguna screen reader yang menelusuri daftar tautan dalam halaman akan mendengar isi yang sama, yaitu "Klik di Sini", sehingga sulit memperoleh informasi
• Ketika tautan ditulis dengan frasa spesifik yang mengandung makna, efisiensi pengalaman meningkat bagi pengguna tunanetra maupun pengguna dalam berbagai situasi

Pertimbangan Optimasi Mesin Pencari (SEO)

• Mesin pencari juga menganalisis teks tautan untuk menilai relevansi dan kualitas konten
• Teks tautan yang memuat kata kunci penting dan konteks memberikan dampak positif pada peringkat pencarian dan visibilitas

Rekomendasi Penulisan Teks Tautan yang Benar

• Disarankan menggunakan teks tautan yang secara jelas mencerminkan konteks
  • Contoh: "Lihat panduan aksesibilitas terbaru"
• Prinsip ini terus ditekankan sejak 2001 dalam proses kemunculan standar web dan penguatan UX

Kesimpulan

• Menggunakan teks yang bermakna sebagai tautan, alih-alih "Klik di Sini", merupakan standar yang esensial baik untuk web saat ini maupun web masa depan

[GN⁺]

Komentar Hacker News

• Dari sudut pandang aksesibilitas, saya ingin menekankan bahwa screen reader untuk pengguna tunanetra membacakan halaman secara linear. Untuk keluar dari struktur linear ini, pengguna bisa menelusuri heading atau daftar tautan secara terpisah, tetapi jika semua tautan ditampilkan sebagai "klik di sini", maka akses non-linear itu pada praktiknya menjadi terhambat

  • Ditunjukkan juga bahwa jika semua tautan hanya ditampilkan sebagai nomina tanpa kata kerja, seperti "Amaya", akan sulit memahami makna masing-masing. Karena itu, ungkapan seperti "get Amaya" atau "go to the Amaya website" menurut saya juga sepenuhnya masuk akal. Selain itu, disebutkan contoh wxMaxima sebagai kasus buruk ketika tombol unduhan ada di github.io, tetapi file eksekusinya sebenarnya diambil dari situs seperti sourceforge yang berisiko malware
  • Secara ironis, diusulkan perlunya sesuatu yang bisa membantu orang yang sebenarnya tidak membutuhkan alat aksesibilitas untuk memvisualisasikan dan memahami cara kerjanya dengan mudah. Bukan berarti alatnya yang harus diubah, melainkan perlu dipikirkan cara agar lebih banyak orang bisa merasakan langsung lingkungan screen reader
  • Sudah ada berbagai solusi untuk masalah seperti ini. Sebagai contoh, diberikan tautan referensi ke panduan WCAG 2.2 HTML H33 dan panduan WCAG 2.2 CSS C7. Hanya saja, belum jelas seberapa baik metode pertama didukung di screen reader nyata
  • Menurut saya ini argumen yang bagus. Namun demikian, teks tautan tetap lebih baik memuat tindakan yang lebih jelas seperti "Get Amaya" daripada sekadar "Amaya"
  • Screen reader menyediakan berbagai cara navigasi di dalam halaman. Perpindahan linear hanyalah cara yang paling tidak efisien. Pengguna bisa cepat melompat ke lokasi yang diinginkan melalui mode navigasi landmark, heading, atau outline. Hal pentingnya adalah bahwa cara navigasi screen reader berbeda dari navigasi keyboard

• Menurut "saya", contoh "bermasalah" yang diajukan dalam tulisan,

  Untuk mengunduh editor/browser W3C Amaya, klik di sini.
  justru terasa sangat intuitif. Saat tautannya diklik, kita bisa memperkirakan file akan langsung terunduh atau kita akan dibawa ke halaman unduhan.
  Sebaliknya,
  Dapatkan Amaya!
  frasa seperti ini terasa seperti akan membawa ke halaman utama situs web, jadi kurang efektif jika dipakai sebagai tautan unduhan yang sebenarnya.
  Lalu,
  Pelajari lebih lanjut tentang Amaya
  ini sama sekali tidak berhubungan dengan unduhan, dan kata kerja "pelajari lebih lanjut" bukan bagian dari tautan, sehingga dalam situasi seperti ini membingungkan apakah tautan "Amaya" akan menuju landing page atau halaman informasi.
  Konvensi di web adalah seperti contoh yang sudah ada, misalnya
  Untuk mengunduh editor/browser W3C Amaya, klik di sini
  Unduh Amaya, editor/browser W3C
  dalam bentuk seperti ini.
  Saya tidak setuju dengan klaim bahwa teks tautan tidak boleh memakai kata kerja. Sebaliknya, jika tautan membutuhkan tindakan tertentu seperti mengunduh atau melihat informasi, maka kata kerjanya justru harus jelas.
  Khususnya, "klik di sini" sangat intuitif karena menandakan bahwa ini adalah tautan yang bersifat tindakan, bukan sekadar tautan referensi.
  Dapatkan Amaya!
  Saya ingin menekankan bahwa frasa seperti ini terasa bukan sebagai tautan yang benar-benar memberi tahu cara mendapatkan Amaya, melainkan hanya seperti tautan referensi biasa

  • Jika benar-benar dipakai dengan screen reader, Anda akan menyadari semua tautan hanya mengulang "klik di sini". Ini sama sekali tidak membantu. Dari sudut pandang mesin pencari juga, "klik di sini" tidak memberi informasi apa pun. Kata kerja itu sendiri tidak masalah, tetapi sebaiknya hindari teks tautan yang terdengar sama seperti "klik di sini". Frasa seperti "Click Here to download Amaya" yang juga menyebut objeknya masih oke, tetapi sekadar "klik di sini" tidak bisa dibedakan dalam banyak situasi
  • Saya benar-benar tidak suka tautan "klik di sini". Untuk mencari tautan yang saya inginkan, saya biasanya hanya memindai semua teks tautan di dalam halaman dengan mata, dan meskipun "Unduh Amaya" atau "Amaya" masih bisa diterima jika itu menuju halaman referensi, "klik di sini" menurut saya sama sekali tidak membantu
  • Dalam contoh aslinya, semua tautan justru menuju homepage Amaya. Bukan ke halaman unduhan, dan daya sampaikan pesannya malah melemah. Kritiknya adalah bahwa pembahasan ini mencampuradukkan isu aksesibilitas seperti "klik di sini" dengan pertanyaan tentang seberapa akurat teks tautan merepresentasikan tujuan tautannya
  • Selain soal screen reader, menetapkan teks tautan sebagai nomina yang jelas juga bisa memberi keuntungan dari sisi pemeliharaan. Misalnya, pada tautan yang tercopy-paste secara keliru atau tautan mati, teksnya sendiri bisa menjadi petunjuk sehingga pelacakan dan perbaikannya lebih mudah. Mungkin ini agak sepele
  • Pada web awal, tautan "klik di sini" seperti ini sangat banyak. Perlahan digantikan oleh tombol dengan tindakan yang lebih jelas, sehingga pola seperti "untuk membatalkan pembelian ini [klik di sini]", "untuk menyelesaikan pembelian ini [klik di sini]" makin jarang terlihat

• Diperkenalkan juga bahwa Government Digital Services di Inggris merekomendasikan pedoman aksesibilitas yang serupa, dan materi resminya bisa dilihat di sini

  • Saya sering menjadikan pedoman ini sebagai referensi untuk menerapkan komponen aksesibilitas/desain web pada tingkat tertinggi. Memang bisa terlihat kaku (misalnya border hitam/kuning tebal), tetapi menurut saya yang penting adalah menempatkan aksesibilitas di atas desain
  • Cara yang direkomendasikan Home Office sedikit berbeda dari W3C. Misalnya
    W3C:
    Get Amaya
    Read more about Amaya
    Home Office:
    Get Amaya
    Read more about Amaya
    Pendekatan Home Office terasa lebih masuk akal, tetapi tergantung konteks, masalah lain juga bisa muncul. Keduanya pada praktiknya terasa lebih alami jika diselesaikan dengan tombol out-of-line seperti [Download], [Documentation], alih-alih hyperlink di dalam narasi. Berdasarkan pengalaman saya, format dengan teks yang diubah agar lebih natural seperti
    "PiPedal adalah efek gitar yang berjalan di Raspberry Pi. Untuk mengunduh PiPedal, buka [halaman unduhan], untuk membaca dokumentasi, buka [Documentation]."
    terasa lebih baik, jadi saya juga menuliskannya begitu di dokumentasi yang sebenarnya
    Saya jadi sadar bahwa mengubah "klik di sini" menjadi nomina ternyata lebih sulit dari yang diperkirakan. Kadang ada juga kasus ketika konteks yang cukup sudah diberikan di dalam kalimat inline, sehingga penggunaan "klik di sini" tidak benar-benar menimbulkan masalah aksesibilitas
    Terutama bila tombolnya berada tepat di atasnya ("Download", "Documentation"), saya tidak yakin apakah memang perlu diubah Pada akhirnya, metrik performa yang penting adalah seberapa sering orang benar-benar mengunjungi halaman unduhan

• Secara pribadi, saya merasa contoh kedua yang disarankan tulisan itu—yang justru diminta untuk dihindari—("untuk mengunduh Amaya, buka situs web Amaya dan ambil perangkat lunak yang dibutuhkan") terasa lebih baik.
  Jika hanya menjadikan "Amaya" sebagai tautan, tidak jelas apakah itu tautan internal atau eksternal, dan apakah akan langsung menuju file atau ke halaman unduhan

  • Saya menyukai pendekatan menambahkan ikon agar terlihat apakah tujuannya eksternal atau merupakan tautan file. Jika itu file, muncul juga ide untuk menampilkan ekstensi filenya
  • Masalah pembedaan tautan internal-eksternal ini sudah ditangani cukup baik di Wikipedia dan tempat lain dengan ikon kecil

• Mungkin karena saya sudah tua, secara intuitif saya menganggap tautan itu dipakai untuk menunjuk nomina (tempat/objek).
  Karena itu, tautan seperti "situs web saya" masih terasa wajar, tetapi saya merasa tidak nyaman dengan frasa yang mengandung kata kerja seperti "pergi ke situs web saya"
  Saya terutama tidak suka bentuk perintah (imperatif), jadi saya tidak memakai bentuk seperti "go to my website", "follow this link"

  • Saya bisa memahami pendapat ini. Untuk kasus yang melibatkan aksi seperti unduhan memang bisa membingungkan, tetapi "download" sendiri adalah nomina jadi seharusnya tidak masalah
  • Untuk halaman tutorial atau How-to, menurut saya frasa imperatif justru cocok

• Ada pandangan bahwa memakai hanya "di sini" sebagai tautan di ranah online adalah kegagalan mendasar yang menunjukkan penulis sama sekali tidak memahami cara menulis dokumen hiperteks. "Klik di sini" terasa seperti stage direction dalam naskah. Menurut saya ini muncul karena banyak penulis tidak menulis dengan mempertimbangkan konteks hiperteks

• Saat menjadikan frasa seperti "I forgot my password" sebagai tautan, saya sempat berpikir untuk mengubahnya menjadi seperti "klik di sini", tetapi secara intuitif terasa salah.
  Seiring runtuhnya standar UI, makin sering terjadi kebingungan tentang apa yang harus diklik pengguna di halaman, dan teks mana yang mewakili maksud mereka
  Saya setuju bahwa jika "I forgot my password" dijadikan tombol, efeknya jauh lebih baik daripada sekadar tautan
  Selain itu, ketika Microsoft menghapus sebagian besar tombol dan menggantinya dengan tautan berwarna ambigu, makin banyak kasus orang bingung harus menekan bagian mana
  (Posting referensi: postingan Mastodon terkait)

• Diperkenalkan esai Dragan Espenschied tahun 2022, sejarah perubahan teks tautan.
  Disebutkan tren terbaru bahwa teks tautan berubah dari call-to-action menjadi teks tombol yang menjelaskan status pengguna (mendefinisikan diri sebagai orang seperti apa, misalnya: “silakan login”)

• Saya setuju dengan prinsip yang dijelaskan di sebagian besar tulisan, tetapi untuk kasus seperti "download" yang memang perlu menampilkan kata kerja atau frasa verbal secara jelas, menurut saya ada pengecualian di mana itu cocok. Dalam kasus seperti ini, sebaiknya hanya dipakai jika tautannya benar-benar mengarah ke unduhan langsung, dan tetap perlu selalu dicek apakah sesuai dengan konteks

• Jika seperti pada contoh semua tautan benar-benar menjalankan unduhan Amaya, bentuk hyperlink Download Amaya adalah yang paling saya sukai.
  Kalau memungkinkan, akan bagus juga menambahkan ikon yang mengisyaratkan bahwa itu unduhan. Saya ingin menghindari diarahkan ke halaman unduhan yang penuh tombol iklan bercampur, bukan ke tautan file yang sebenarnya