Cara menulis teks tautan dan tombol yang tetap jelas di luar konteks

Kalimat seperti “Untuk melihat harga kami, klik di sini” terbaca sempurna di halaman. Begitu dikeluarkan dari kalimatnya, tautan itu hanyalah tiga kata yang tidak menunjuk ke mana pun secara khusus, dan justru dalam keadaan terlepas dari kalimat itulah banyak orang menjumpainya.

Catatan sebelum lanjut: auditor ini mengenali frasa samar dalam bahasa Inggris (“click here”, “read more”), bukan dalam bahasa Indonesia, jadi label seperti “Klik di sini” tidak akan ditandai. Karena itu, contoh yang menjelaskan apa yang dideteksi alat ini tetap dalam bahasa Inggris.

Mengapa kalimat di sekitar tautan menghilang

Daftar tautan (link list) adalah tampilan yang disediakan pembaca layar berisi semua tautan di satu halaman sekaligus, agar penggunanya bisa langsung melompat ke tautan yang diinginkan. Ini salah satu cara tercepat untuk berpindah-pindah di sebuah halaman, dan setiap tautan ditampilkan hanya sebagai kata-katanya sendiri, tanpa apa pun lagi. Sebelas tautan bertuliskan “Read more” (baca selengkapnya) menjadi sebelas baris yang identik.

Accessible name (nama yang dapat diakses) adalah teks yang diumumkan teknologi bantu untuk sebuah tautan atau kontrol. Alat ini menentukannya dengan urutan berikut: aria-label jika ada, lalu aria-labelledby, lalu teks elemen itu sendiri, lalu teks alt dari gambar di dalamnya, lalu atribut title. Apa pun yang keluar pertama, itulah yang ditampilkan di daftar tautan dan yang didengarkan oleh kontrol suara.

Jadi tugasnya bukan menulis kalimat yang lebih baik di sekitar tautan. Tugasnya adalah membuat accessible name bekerja sendiri.

Kriteria di balik aturan ini

Setiap temuan yang dilaporkan alat ini merujuk salah satu dari lima success criterion WCAG, yang mengubah “label ini tidak jelas” dari sekadar opini menjadi sesuatu yang bisa dimasukkan ke tiket.

Kriteria	Level	Penyebab gagal	Cara alat ini melaporkannya
2.4.4 Link Purpose (In Context)	A	Tautan tanpa accessible name, atau yang seluruh labelnya berupa frasa seperti “click here”, “learn more”, atau “download”	Error. URL mentah lebih dari 30 karakter yang dipakai sebagai label dilaporkan sebagai warning
2.4.9 Link Purpose (Link Only)	AAA	Kata-kata yang sama dipakai untuk tautan yang menuju tempat berbeda	Warning
2.4.6 Headings and Labels	AA	Tombol yang tidak menyebut tindakan apa pun: “Submit”, “OK”, “Send”, “Done”	Warning
2.5.3 Label in Name	A	aria-label yang tidak memuat teks tombol yang terlihat	Error
4.1.2 Name, Role, Value	A	Kontrol tanpa accessible name; tautan yang hanya dinamai lewat title-nya	Error; warning untuk kasus title

Satu nuansa soal 2.4.4: secara ketat, kriteria ini mengizinkan kalimat atau item daftar di sekitarnya dihitung sebagai konteks, itulah sebabnya “Read more” secara teknis bisa lolos di Level A. Alat ini tetap menandai label semacam itu sebagai error, karena daftar tautan justru merupakan tempat konteks itu hilang. 2.4.9, kriteria AAA, adalah kriteria yang mensyaratkan kata-kata tautan itu sendiri sudah cukup.

Mengaudit halaman dengan alat ini

1. Buka halaman yang Anda periksa, klik kanan area yang berisi tautan, pilih Inspect, lalu salin markup elemen itu dari developer tools. Salin markup-nya, bukan teks yang terlihat: atribut aria-label adalah tempat separuh temuan berada.
2. Buka Link & button text auditor. Kotak di bawah Paste your markup (tempel markup Anda) berisi contoh di awal, jadi tekan Clear di bilah bawah terlebih dulu, lalu tempel.
3. Baca empat hitungan di bagian atas: Links, Controls, Errors, dan Warnings.
4. Kerjakan error sebelum warning. Setiap temuan menampilkan tingkat keparahannya, kriteria dan level WCAG, aturan yang dilanggar, teks yang bermasalah, alasan pentingnya, dan baris yang diawali “Fix:”.
5. Tulis ulang label di kode sumber Anda, tempel markup baru, dan ulangi sampai panel bertuliskan “Every link and control here names where it goes or what it does.” (setiap tautan dan kontrol di sini menyebut tujuan atau fungsinya).
6. Tekan Copy report (atau tombol C) untuk mengambil temuan sebagai teks biasa, satu blok per temuan beserta kriterianya, untuk tiket atau pull request.

Contoh markup, dibedah satu per satu

Contoh yang dibuka alat ini terdiri dari sepuluh baris yang memuat sebagian besar kesalahan umum. Alat ini menghitung 5 tautan dan 3 kontrol, dan menemukan 4 error dan 2 warning:

Markup	Temuan	Kriteria
<a href="/pricing">Click here</a>	Teks tautan tidak bermakna di luar konteks (error)	2.4.4, A
<a href="/docs">Learn more</a>	Teks tautan tidak bermakna di luar konteks (error)	2.4.4, A
Dua tautan bertuliskan “Documentation”, ke /help dan /api	Teks tautan sama, tujuan berbeda (warning)	2.4.9, AAA
<a href="/home"> yang hanya berisi ikon kosong	Tautan tidak punya accessible name (error)	2.4.4, A
<button>Submit</button>	Label kontrol tidak menyebut tindakannya (warning)	2.4.6, AA
<button aria-label="Find records">Search</button>	Teks yang terlihat tidak ada di accessible name (error)	2.5.3, A
<button>Delete 3 invoices</button>	Tidak ada: tombol ini menyebut hasil dan jumlahnya	Tidak ada

Dua tautan “Documentation” dihitung sebagai satu temuan, karena masalahnya ada pada pasangan itu. Tombol pencarian adalah yang sering terlewat. Tombol itu terdengar baik-baik saja di pembaca layar, yang mengumumkan “Find records”. Tetapi orang yang memakai kontrol suara mengucapkan kata yang mereka lihat, “Search”, dan tidak terjadi apa-apa, karena “Search” tidak ada di accessible name. Mengawali label dengan kata yang terlihat, seperti “Search records”, memenuhi keduanya.

Skor keterbacaan yang justru menghargai label terburuk

Jalan pintas yang paling jelas adalah memeriksa label dengan readability checker. Hasilnya justru salah total. Rumus keterbacaan membagi dengan jumlah kalimat dan disusun berdasarkan prosa yang mengalir, jadi string dua kata membuat hasilnya melampaui skala. Flesch–Kincaid memberi “Learn more” dan “Click here” skor reading ease 120.2, di atas batas atas skalanya sendiri, dan memberi “Download invoice PDF” yang jauh lebih jelas skor 62.8.

Itulah sebabnya auditor ini sama sekali tidak menampilkan skor tingkat baca, dan menyatakannya di halaman. Yang bisa diuji dari sebuah label adalah apakah label itu menyebut tujuan atau tindakan, dan apakah accessible name-nya sesuai dengan yang tampil di layar.

Batas pemeriksaannya

Alat yang merujuk kriteria hanya sebaik aturan yang dijalankannya, dan aturan-aturan ini punya batas yang perlu diketahui:

• Daftar kata yang tidak jelas dicocokkan dengan seluruh label, bukan dengan frasa di dalamnya. “Click here” ditandai; “Click here to compare plans” tidak, meskipun tetap membuat pendengar harus menunggu sampai kata-kata yang berguna.
• Daftar untuk tautan lebih panjang daripada daftar untuk tombol. Tautan bertuliskan “Download” adalah error; tombol bertuliskan “Download” lolos, meskipun tetap sebaiknya menyebut apa yang diunduhnya.
• Alat ini tidak bisa menilai apakah sebuah label akurat, hanya apakah label itu spesifik. Tombol berlabel “Delete” yang ternyata mengarsipkan akan lolos semua pemeriksaan.
• Alat ini tidak bisa mengambil halaman dari URL. Browser mencegah satu situs membaca HTML situs lain, dan tidak ada server di balik alat ini yang bisa melakukannya, itulah sebabnya Anda menempelkan markup.

Cara lain untuk melakukannya

Tidak ada cara bawaan di sistem operasi untuk mengaudit teks tautan. Versi manualnya adalah pengujian yang sama dengan yang diterapkan daftar tautan: baca kata-kata setiap tautan secara terpisah, dalam satu kolom, tanpa halaman di sekitarnya, lalu tanyakan apakah Anda tahu ke mana masing-masing mengarah. Untuk tombol, tanyakan apakah labelnya menyebut apa yang terjadi setelah ditekan. Cara ini lambat untuk halaman besar, dan tidak akan menangkap aria-label yang bertentangan dengan teks yang terlihat, karena Anda tidak bisa melihatnya tanpa membaca markup.

Memastikan tidak ada yang dikirim

Markup diurai oleh browser Anda sendiri di dalam tab. Buka panel Network di developer tools, tempel satu blok markup, lalu perhatikan: tidak ada request yang membawanya. Memutus koneksi jaringan setelah halaman dimuat juga bisa, dan alat ini tetap melakukan audit.

Selanjutnya

Tempel bilah navigasi atau grid kartu ke Link & button text auditor; di situlah tautan “Read more” yang berulang biasanya menumpuk. Jika tombol ikon Anda memakai SVG inline, SVG optimiser secara default mempertahankan elemen <title> di setiap file, alih-alih membuangnya demi menghemat byte.