- 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
1 komentar
Komentar Hacker News
Dari sudut pandang aksesibilitas, screen reader untuk penyandang tunanetra membacakan halaman secara linear
Untuk keluar dari pembacaan linear, sering kali pengguna juga bisa menelusuri daftar elemen seperti judul atau tautan secara terpisah tanpa konteks posisi aslinya
Jika semua tautan berbunyi “click here”, itu pada dasarnya merampas akses non-linear dari pengguna seperti ini
Jadi “get Amaya” atau “go to the Amaya website” tampaknya masih masuk akal
Selain itu, bukan praktik yang baik jika tombol unduh di github.io mengambil berkas executable dari tempat seperti SourceForge, yang diperlakukan seperti situs malware. Ini mengingatkan saya pada wxMaxima
Bukan berarti alatnya harus diubah, tetapi sepertinya perlu ada cara untuk memvisualisasikan cara kerja screen reader bagi orang yang tidak akan menguliknya sendiri secara langsung
Namun saya tidak tahu seberapa baik dukungan untuk yang pertama di screen reader
Sunting: tautan diperbarui dari WCAG 2.0 ke 2.2
Meski begitu, daripada hanya menaruh “Amaya” seperti contoh dalam artikel, saya akan lebih memasukkan tindakannya, seperti “Get Amaya”
Pengguna, misalnya, bisa berpindah antar-landmark, antar-judul, atau keduanya bersama-sama dalam mode navigasi garis besar
Poin utamanya adalah navigasi screen reader tidak sama dengan navigasi keyboard
Saya sama sekali tidak setuju. Contoh yang mereka sebut buruk, “To download W3C's editor/browser Amaya, click here.”, sangat jelas
Menekan tautannya akan langsung mengunduh atau menuju halaman unduhan
Sebaliknya, “Get Amaya!” terlihat seperti tautan ke situs web Amaya, bukan halaman unduhan, sehingga tidak efektif untuk unduhan
“Tell me more about Amaya: W3C's free editor/browser that lets you create HTML, SVG, and MathML documents.” juga kurang bagus. Itu bukan kalimat tentang unduhan, dan “tell me more” adalah perintah, tetapi justru bukan tautan
Penggunaan konvensional web, yaitu “To download W3C's editor/browser Amaya, click here.” atau “Download Amaya, the W3C's editor/browser.”, sepenuhnya baik-baik saja
Gagasan bahwa tautan tidak boleh menjadi kata kerja terasa cukup aneh. Jika mencakup tindakan seperti mengunduh atau mengetahui lebih lanjut, tautan tentu saja bisa menjadi kata kerja
Ini berbeda dari kasus mencari tahu lebih lanjut tentang suatu topik, seperti tautan referensi di Wikipedia
“click here” memperjelas bahwa tautannya bukan tautan referensi biasa, melainkan tautan tindakan. Saat melihat “Get Amaya!”, saya merasa “Amaya” adalah tautan referensi, bukan tautan unduhan, dan bukan sesuatu yang memberi tahu cara mendapatkan Amaya
Kalau pun Anda membuat mesin pencari, informasi apa yang akan diberikan “click here” ke indeks?
Saya tidak setuju bahwa kata kerja itu sendiri adalah masalah besar, tetapi lain halnya jika kata kerjanya click dan objeknya here
Teks tautan “Click Here to download Amaya” masih bisa saya toleransi, tetapi jika tautannya secara harfiah hanya dua kata “click here”, dalam banyak konteks ia tidak bisa dibedakan dari tautan lain
“Download Amaya” bisa menjadi tautan yang bagus. Jika hanya “Amaya” atau hanya “click here”, itu tidak bagus kecuali memang menuju halaman informasi Amaya
Pada akhirnya, masalah “click here” adalah masalah aksesibilitas seperti yang disebut komentar lain, tetapi pesan mereka tampaknya menjadi cukup kabur karena dicampuradukkan dengan apakah teks tautan mencerminkan tujuannya secara akurat atau tidak
aria-describedbybisa membantu, tetapi jika teks di dalam tautan itu sendiri dibuat lebih baik, kebutuhan itu bisa dihindariSaya setuju soal kata kerja
Government Digital Service Inggris juga memberikan rekomendasi serupa dalam pedoman aksesibilitasnya: https://design.homeoffice.gov.uk/accessibility/links
Mungkin bukan yang paling cantik, tetapi aksesibilitas lebih utama daripada desain, dibanding hal-hal seperti border hitam/kuning tebal pada komponen formulir
W3C menulis “Get Amaya”, “Read more about Amaya”, sementara Home Office menulis “Get Amaya”, “Read more about Amaya”
Yang terakhir tampak jauh lebih masuk akal, tetapi jika dipakai di dalam konteks kalimat, muncul masalah lain
Secara pribadi, saya melihat keduanya mencampuradukkan dua use case yang berbeda. Link sering dipakai secara inline di dalam kalimat, sedangkan kasus yang dibahas W3C dan Home Office sebaiknya justru ditangani sebagai tombol di luar kalimat, misalnya
[Download],[Documentation]Namun dalam use case hyperlink di dalam teks inline, keduanya terasa canggung
Misalnya, bagaimana seharusnya memperbaiki “PiPedal is a guitar effects pedal that runs on Raspberry Pi. To download PiPedal, click here. To read the documentation, click here.”?
Saya mengerti alasan penolakannya, tetapi sulit menerima revisi seperti “PiPedal is a guitar effects pedal that runs on Raspberry Pi. Get Pipedal. Read the documentation.” Itu tidak sesuai dengan idiom bahasa Inggris
Di dokumentasi sebenarnya, saya menulis seperti “To download PiPedal, visit the Download Page. To learn more about Pipedal, view the Documentation.”, tetapi berdasarkan pengalaman, menjadikan “click here” sebagai nomina sering kali sangat sulit
Apalagi pada kalimat seperti “Ubuntu Server installs don't suffer from this problem; but before choosing an Ubuntu Server install, you should read the Ubuntu Server section of the "Installing on Ubuntu" page.”
Maka saya jadi bertanya-tanya, apa tepatnya yang salah dengan menggunakan “here” sebagai pronomina untuk objek rujukannya?
Dalam use case ini, link berada di dalam kalimat yang menyediakan semua konteks yang diperlukan, sehingga mungkin sebenarnya tidak ada masalah aksesibilitas nyata
Contoh pertama juga merupakan kalimat pembuka pada halaman web yang mengutamakan keringkasan
Apakah “To download PiPedal, click here.” benar-benar masalah aksesibilitas? Terutama jika tepat di atasnya sudah ada tombol
[ Download ] [ Documentation ]Metrik yang benar-benar penting di sini adalah seberapa banyak orang mengunjungi halaman download
Dari sudut pandang itu, saya cukup ragu bahwa “To download PiPedal, visit the Download Page.” lebih baik
Secara pribadi, saya lebih suka contoh kedua yang mereka sarankan untuk dihindari: “To download Amaya, go to the Amaya_Website and get the necessary software.”
Link yang hanya bertuliskan “Amaya” tidak memberi tahu apakah itu link internal atau eksternal, dan meskipun dari konteks jelas bahwa tujuannya adalah mengunduh Amaya, sulit mengetahui apakah link itu langsung menuju file atau ke halaman download
Mungkin karena saya sudah tua, tetapi saya selalu secara naluriah menganggap link menunjuk ke nomina
Link menunjuk ke suatu tempat, dan tempat itu punya nama, bukan verba atau adjektiva
Jadi link ke “situs web saya” terasa baik-baik saja, tetapi link seperti “pergi ke situs web saya” terasa pada dasarnya tidak tepat
Saya juga sangat tidak suka nada imperatif, jadi saya tidak pernah menulis kalimat seperti “go to my website” atau “follow this link”
Namun jika link memulai suatu aksi seperti mengunduh sesuatu, ini menjadi ambigu. Meski begitu, jika dianggap sebagai nomina seperti “download” atau “downloader”, tetap saja itu nomina
Ini mungkin akan menjadi bahan debat internet yang akan saya pertahankan sampai akhir
Call to action adalah persoalan terpisah, tetapi halaman yang hanya menjadikan kata “here” sebagai link adalah kegagalan jelas dari penulis yang tidak memahami medium hypertext
“click here” tampak seperti arahan panggung yang tidak sengaja tertinggal
Kebanyakan penulis, saat menulis, tidak menulis dalam konteks hypertext, dan menjadikan arahan panggung sebagai default alih-alih notasi link seperti Markdown
Teringat sebuah tulisan tentang tautan bertuliskan “I forgot my password”
Sempat terpikir apakah akan lebih baik jika ditulis “click here if...”, tetapi secara naluriah saya tahu itu juga tidak tepat
Mengabaikan elemen-elemen tidak berguna di halaman web adalah keterampilan yang tidak dimiliki sebagian orang, dan saya tidak tahu bagaimana cara mengajarkannya
Ini selalu terlintas setiap kali membantu orang yang tidak punya pengetahuan latar untuk menggunakan web. Ada pengguna yang, bahkan ketika item pertama secara harfiah di halaman adalah “Please enable notifications”, akan memikirkannya dengan saksama sebelum melihat item kedua
Apalagi sekarang Google Search pun menampilkan sampah sepanjang beberapa layar sebelum hasil yang sebenarnya
Masalah terkait lainnya adalah ada orang yang tidak memahami status epistemik teks di dalam halaman menurut jenisnya
Misalnya, ada pengguna yang melihat tautan yang bisa diklik bertuliskan “I forgot my password” dan percaya bahwa itu bukan berarti tempat yang harus ditekan saat lupa kata sandi, melainkan sebuah kalimat yang memberi tahu bahwa dirinya lupa kata sandi
Tentu saja matinya standardisasi UI membuat masalah ini jauh lebih buruk
https://mstdn.io/@mattskala/113188291223682980
Saya ingat ketika Microsoft menghapus banyak tombol di UI dan menggantinya dengan tautan teks berwarna samar. Setelah itu, jauh lebih sulit mengetahui apa yang harus diklik
Pengguna secara intuitif beradaptasi dengan mesin, dan pengembang beradaptasi dengan pengguna, sehingga terbentuk lingkaran umpan balik
Dengan kata lain, karena begitu banyak situs web dan aplikasi memiliki tautan “I forgot my password”, sangat mungkin makna bahasanya juga berubah
Setidaknya dalam konteks itu, kebanyakan orang akan beradaptasi untuk memahami maksudnya
Generasi muda yang tidak mengenal cara lain mungkin bahkan tidak menganggapnya sebagai sesuatu yang perlu dipersoalkan
Jadi, meskipun sebuah konvensi tampak tidak masuk akal jika dilihat terpisah, ada juga nilai dalam mempertahankan konvensi
Jika semua contoh secara konsisten berasumsi bahwa yang sebenarnya dilakukan adalah mengunduh “Amaya”, rasanya lebih baik cukup memakai hyperlink Download Amaya
Jika memungkinkan, sebaiknya juga ada ikon unduh yang menunjukkan bahwa tautan itu menuju file sungguhan
Karena dengan begitu bisa diketahui bahwa itu bukan tautan ke halaman lain tempat tombol unduh yang asli disembunyikan di antara 4 iklan
Dragan Espenschied(despens) menulis pada 2022 tentang bagaimana teks tautan berubah seiring waktu: https://despens.systems/2022/06/button-pushes-you/
Ia menyoroti peralihan dari ajakan bertindak menjadi teks tombol yang mendeskripsikan pengguna
Misalnya, “Sebaliknya, teks-teks itu harus membingkai ulang keadaan pengguna. Sebelum dapat mengakses informasi berikutnya, pengguna harus menerima mantra yang tertulis dan mengubah sikapnya”
“Get Amaya.”, “Tell me more about Amaya.” terasa kurang elegan