Tutorial Memperbaiki Nama Tautan pada Gambar Produk di WordPress
Periksa gambar produk yang bisa diklik di WordPress: tentukan tujuan tautan, tulis nama yang bermakna, lalu uji hasil dengan pemeriksaan aksesibilitas dan keyboard.
Gambar yang bisa diklik perlu menjelaskan tujuannya
Gambar produk dapat berfungsi sebagai foto sekaligus pintu menuju informasi lain. Masalah muncul ketika tautan itu hanya berisi gambar, tetapi tidak memiliki nama yang membantu pengguna memahami tujuannya. Orang yang melihat foto mungkin menebak bahwa klik akan membuka detail produk, sementara pembaca layar memerlukan informasi yang tersedia dalam struktur halaman. Tutorial ini berfokus pada nama tautan gambar, bukan pembahasan umum optimasi foto atau janji peringkat pencarian.
Hasil yang dituju ialah satu contoh tautan produk yang memiliki tujuan benar, nama yang bermakna, dan perilaku keyboard yang sudah diperiksa. Kita memakai blok Image bawaan WordPress pada halaman percobaan. Kartu produk dari tema atau plugin dapat memiliki struktur berbeda dan perlu diperiksa oleh pengembangnya. Mulailah dari satu kasus yang sederhana agar Anda memahami hubungan antara gambar, teks alternatif, dan tautan sebelum menerapkan keputusan pada banyak halaman.
Prasyarat dan ruang lingkup percobaan
Siapkan akun WordPress yang berwenang menyunting halaman, editor blok, gambar produk yang boleh digunakan, serta halaman detail produk yang menjadi tujuan. Gunakan halaman draf atau lingkungan uji milik sendiri, kemudian sediakan Chrome dan keyboard untuk pemeriksaan. Pilih gambar yang menjadi satu-satunya isi sebuah tautan pada contoh awal. Jangan menggunakan proses pembelian atau tindakan yang mengubah data sebagai tujuan percobaan; cukup gunakan halaman informasi yang dapat dibuka untuk diperiksa.
Dokumentasi WordPress yang dibaca saat riset menyediakan pengaturan tautan dan teks alternatif pada blok Image. Nama atau letak kontrol dapat berbeda menurut versi editor, sehingga cocokkan dengan dokumentasi instalasi Anda jika tampilannya tidak sama. Bila produk ditampilkan oleh plugin, jangan berasumsi mengubah satu gambar di Media Library akan langsung memperbaiki semua kartu. Catat komponen yang membentuk halaman agar Anda mengetahui apakah perbaikannya berada dalam kewenangan editor atau memerlukan pengembang.
Langkah 1: catat gambar, tujuan, dan harapan pengguna
Buat tabel kerja sederhana dengan kolom halaman asal, gambar, tujuan tautan, nama yang diharapkan, dan hasil pengujian. Pada halaman percobaan, tambahkan blok Image melalui tombol penambah blok, lalu pilih gambar dari Media Library yang memang sesuai. Sebelum memberinya tautan, tentukan apa yang akan terjadi setelah diklik. Bedakan membuka detail produk, memperbesar foto, dan mengunduh berkas; ketiganya merupakan tindakan berbeda walaupun memakai foto yang sama.
Gunakan contoh hipotetis seperti foto cangkir keramik hijau yang akan membuka halaman detail cangkir tersebut. Tulis harapan itu pada tabel, kemudian minta rekan menjelaskannya kembali. Jika mereka mengira klik akan memperbesar gambar, pertimbangkan petunjuk visual atau teks yang lebih jelas. Penetapan tujuan di awal mencegah Anda menulis nama yang terdengar baik tetapi menggambarkan tindakan berbeda dari perilaku sebenarnya. Jangan memasukkan spesifikasi produk yang belum dikonfirmasi hanya untuk membuat nama lebih panjang.
Langkah 2: tetapkan tujuan melalui kontrol Link
Pilih blok gambar, lalu buka kontrol Link pada bilah alat blok. Gunakan kolom pencarian atau URL untuk memilih halaman detail yang telah disiapkan. Dokumentasi WordPress membedakan tautan ke halaman tertentu, berkas gambar, halaman lampiran, dan pembesaran gambar. Periksa pilihan yang tersimpan, bukan hanya tampilan fotonya. Jika sasaran Anda halaman detail produk, jangan membiarkan gambar membuka berkas media karena itu tidak memenuhi tujuan yang sudah ditulis.
Simpan perubahan pada draf dan buka pratinjau untuk memeriksa alamat tujuan secara wajar. Catat jika ada perpindahan ke alamat lain dan pastikan halaman akhirnya tetap menjelaskan produk yang dimaksud. Tidak semua perbedaan alamat merupakan masalah, tetapi tujuan yang melenceng perlu diperbaiki sebelum pengujian nama dilanjutkan. Pada tahap ini Anda sedang memastikan kecocokan tindakan, sehingga jangan mengubah judul, harga, atau informasi produk lain yang tidak diperlukan untuk percobaan.
Langkah 3: tulis nama yang menyampaikan fungsi tautan
W3C WAI menjelaskan bahwa teks alternatif gambar fungsional perlu menyampaikan tindakan atau tujuan. Untuk contoh gambar yang menjadi satu-satunya isi tautan, kalimat seperti 'Lihat detail cangkir keramik hijau' dapat menjelaskan tujuan dengan ringkas. Contoh ini perlu disesuaikan dengan produk dan perilaku nyata. Hindari nama berkas, pengulangan kata promosi, atau ungkapan umum seperti 'klik di sini' yang tidak membantu membedakan tautan tersebut dari tautan lain.
Perhatikan konteks struktur halaman. Jika gambar dan teks yang sudah menjelaskan tujuan berada dalam satu tautan yang sama, teks alternatif gambar yang mengulang seluruh label dapat menjadi berlebihan. Namun, teks pada paragraf terpisah belum tentu memberi nama pada tautan gambar di sebelahnya. Jangan mengosongkan teks alternatif gambar fungsional hanya karena judul produk terlihat dekat. Bila struktur kartu tidak jelas, minta pengembang memeriksa hubungan elemennya sebelum menentukan perlakuan yang tepat.
Langkah 4: terapkan teks pada gambar di halaman percobaan
Dengan blok Image terpilih, buka pengaturan blok dan cari Alternative text. Pada antarmuka yang didokumentasikan saat riset, pengaturan tersebut berada pada tab Content. Masukkan nama yang telah Anda pilih untuk kasus gambar sebagai isi tunggal tautan, lalu simpan draf. Jangan menandainya sebagai dekoratif pada kasus ini karena gambar menyediakan fungsi tautan yang perlu dipahami pengguna. Setelah tersimpan, muat ulang pratinjau untuk melihat hasil keluaran halaman.
WordPress menjelaskan bahwa perubahan teks alternatif pada pengaturan blok berlaku untuk gambar pada halaman atau tulisan tersebut, sedangkan Media Library menyediakan nilai bawaan saat gambar disisipkan di tempat lain. Karena itu, catat lokasi yang benar-benar diperbaiki. Jangan menyatakan seluruh katalog sudah berubah hanya karena satu blok berhasil diperbarui. Jika gambar yang sama dipakai untuk fungsi berbeda, nilai yang sesuai pada satu halaman juga perlu ditinjau sebelum digunakan lagi pada konteks lainnya.
Langkah 5: periksa nama yang diterima struktur aksesibilitas
Pada pratinjau di Chrome, klik kanan gambar dan pilih Inspect. Di panel Elements, pilih elemen tautan yang membungkus gambar, lalu buka panel Accessibility; bila panel tersembunyi, cari melalui daftar tab tambahan. Periksa informasi peran dan nama terhitung untuk tautan tersebut. Dokumentasi Chrome menjelaskan penggunaan panel ini untuk meninjau sifat aksesibilitas elemen. Nama tautan yang dihasilkan seharusnya menjelaskan tujuan yang sudah Anda tetapkan pada tabel kerja.
Jika nama kosong, masih berupa nama berkas, atau berbeda dari harapan, catat elemen yang diperiksa dan serahkan kepada pengembang bila sumbernya berada pada tema atau plugin. Jangan menambahkan atribut secara acak hanya untuk mengubah tampilan panel. Elemen yang salah dipilih juga dapat menghasilkan penilaian keliru, jadi bedakan informasi gambar dari informasi tautan pembungkusnya. Pemeriksaan struktur membantu menemukan masalah penamaan, tetapi belum menggantikan percobaan nyata menggunakan keyboard atau pembaca layar.
Langkah 6: uji perjalanan keyboard dan tujuan akhirnya
Kembali ke halaman pratinjau dan gunakan Tab untuk menelusuri kontrol sampai tautan gambar menerima fokus. Pastikan posisi fokus terlihat, kemudian tekan Enter untuk membuka tujuan. Bandingkan halaman yang terbuka dengan catatan harapan. Ulangi pada satu contoh produk lain untuk memastikan nama tautannya dapat dibedakan. Bila tersedia, mintalah rekan yang memakai pembaca layar mencoba perjalanan yang sama dan menjelaskan tujuan tautan yang mereka pahami sebelum mengaktifkannya.
Tandai hasil sebagai lulus hanya untuk kasus yang benar-benar diuji: nama bermakna, fokus dapat ditemukan, dan tujuan sesuai. Jika salah satu belum tepat, perbaiki bersama pihak yang berwenang lalu ulangi percobaan. Catat juga bila suatu plugin mengganti perilaku gambar menjadi pembesaran. Dokumentasi Chrome menekankan perlunya mencoba navigasi nyata, sehingga pemeriksaan nama di panel saja tidak cukup untuk menyatakan seluruh pengalaman akses telah baik. Sampel ini juga bukan audit menyeluruh seluruh website.
Kesalahan umum dan penerapan pada katalog berikutnya
Kesalahan yang sering terjadi ialah mengira judul di dekat foto otomatis menamai tautannya, mengubah Media Library tanpa memeriksa blok lama, menandai gambar bertautan tunggal sebagai dekoratif, atau menyimpan tujuan berupa berkas foto ketika yang diinginkan halaman detail. Hindari pula membuat semua tautan bernama sama. Setelah contoh berhasil, susun daftar halaman berikutnya berdasarkan komponen yang dipakai agar perbaikan pada satu jenis kartu tidak disamakan dengan jenis kartu lainnya.
Untuk mengenali layanan, kunjungi https://www.jagoweb.com/ dan informasi hosting cPanel di https://www.jagoweb.com/hosting-cpanel. Cocokkan kebutuhan website dengan fasilitas paket, lalu bawa contoh URL serta hasil pemeriksaan ketika berdiskusi dengan pengembang. Kebiasaan menuliskan tujuan dan menguji nama tautan membantu menjaga katalog saat gambar diganti atau halaman dipindahkan. Simpan catatan perubahan agar pengelola berikutnya memahami alasan penamaan dan tidak mengembalikan masalah ketika memperbarui tampilan.
Bacaan terkait
Sumber dan referensi
