Link pada Gambar dan Tombol

Pintu yang Berbentuk Gambar

Bayangkan kamu berjalan di mal dan melihat poster besar sebuah film. Kamu tidak mencari tulisan kecil "klik di sini", kamu langsung menyentuh posternya, dan ajaibnya poster itu adalah pintu menuju studio bioskop. Di web, "poster yang bisa disentuh" itu dibuat dengan membungkus img di dalam a. Seluruh gambar menjadi area klik yang membawa pengunjung ke halaman lain.

Teknik ini ada di mana-mana: logo website yang kalau diklik kembali ke beranda, foto produk yang kalau diklik membuka halaman detail, dan ikon media sosial di footer. Selain itu, ada trik sepupunya: link (a) yang ditata dengan CSS agar terlihat seperti tombol. Keduanya terlihat mirip di layar, tetapi punya makna yang berbeda, dan memilih yang salah adalah salah satu kesalahan paling umum di web.

Contoh 1: Gambar yang Bisa Diklik

Pola dasarnya sederhana: letakkan img di dalam a, seperti memasukkan surat ke dalam amplop.

<!-- Logo yang kembali ke beranda saat diklik -->
<a href="/">
  <img src="logo.png" alt="Warkop Doa Ambu: kembali ke beranda" />
</a>

<!-- Foto produk menuju halaman detail -->
<a href="/produk/kopi-tubruk">
  <img src="kopi-tubruk.jpg" alt="Segelas kopi tubruk panas" />
</a>

Perhatikan alt-nya: karena gambar ini adalah sebuah link, alt harus menjelaskan tujuan link, bukan cuma isi gambar. "Kembali ke beranda" jauh lebih membantu bagi pengguna screen reader dibanding sekadar "logo". Screen reader akan mengumumkan: "link, gambar, Warkop Doa Ambu: kembali ke beranda".

Kalau gambar hanya hiasan di dalam link yang sudah punya teks, alt boleh dikosongkan agar tidak dibacakan dua kali:

<a href="/promo">
  <img src="banner-promo.png" alt="" />
  <span>Lihat promo minggu ini</span>
</a>

Contoh 2: Link yang Terlihat Seperti Tombol, dan Aturan a vs button

Seringkali desainer ingin link yang tampil seperti tombol besar: "Daftar Sekarang", "Unduh Brosur". Caranya: pakai a biasa, lalu tata dengan CSS.

<a class="tombol" href="/daftar">Daftar Sekarang</a>

<style>
  .tombol {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: #7c3aed;
    color: #fff;
    text-decoration: none;
    border-radius: 0.5rem;
  }
  .tombol:hover { background: #6d28d9; }
</style>

Ini membawa kita ke aturan terpenting modul ini: kapan memakai a, kapan memakai button? Aturannya sederhana dan mutlak:

• Pakai a kalau kliknya membawa pengguna ke tempat lain: pindah halaman, melompat ke bagian halaman, mengunduh file, membuka email. Link adalah soal navigasi.
• Pakai button kalau kliknya melakukan sesuatu di halaman yang sama: mengirim formulir, membuka menu, memutar video, menambah barang ke keranjang. Tombol adalah soal aksi.

Analoginya: a itu seperti rambu penunjuk jalan ("ke sana"), sedangkan button itu seperti saklar lampu (melakukan sesuatu di tempat). Contoh nyata yang realistis:

<!-- NAVIGASI: pakai a -->
<a class="tombol" href="/katalog.pdf" download>Unduh Katalog (PDF)</a>
<a class="tombol" href="mailto:[email protected]">Hubungi Kami</a>

<!-- AKSI: pakai button -->
<button type="button" id="tambah-keranjang">Tambah ke Keranjang</button>
<button type="button" id="putar-video">Putar Video</button>

Kenapa aturan ini penting? Karena browser, screen reader, dan mesin pencari memperlakukan keduanya berbeda. Link bisa dibuka di tab baru, disalin alamatnya, dan diikuti mesin pencari. Tombol bisa diaktifkan dengan keyboard secara berbeda dan tidak punya URL. Tertukar memakai keduanya merusak pengalaman pengguna keyboard dan teknologi bantu.

Kesalahan Umum Pemula

Salah: button yang dipakai untuk pindah halaman.

<!-- SALAH: ini navigasi, bukan aksi -->
<button onclick="location.href='/daftar'">Daftar</button>

<!-- BENAR -->
<a class="tombol" href="/daftar">Daftar</a>

Versi yang salah tidak bisa dibuka di tab baru (klik kanan tidak ada opsi "buka di tab baru"), tidak bisa disalin linknya, dan mesin pencari tidak mengikutinya. JavaScript seharusnya tidak dipakai untuk sesuatu yang HTML bisa lakukan sendiri.

Salah: a dengan href="#" untuk aksi.

<!-- SALAH -->
<a href="#" id="tutup-popup">Tutup</a>

<!-- BENAR -->
<button type="button" id="tutup-popup">Tutup</button>

Menutup popup adalah aksi di halaman yang sama, jadi ini pekerjaan button. Versi a mengotori riwayat browser dan membingungkan screen reader.

Salah: menumpuk elemen interaktif (link di dalam link, tombol di dalam link).

<!-- SALAH: tidak valid, perilaku tidak terduga -->
<a href="/produk">
  <img src="kopi.jpg" alt="Kopi" />
  <a href="/favorit">Simpan favorit</a>
</a>

<!-- BENAR: jadikan kartu biasa, link terpisah -->
<div class="kartu">
  <a href="/produk"><img src="kopi.jpg" alt="Kopi tubruk" /></a>
  <button type="button">Simpan favorit</button>
</div>

Salah: gambar-link tanpa alt yang menjelaskan tujuan. Tanpa alt yang tepat, pengguna screen reader hanya mendengar "link, gambar" tanpa tahu akan dibawa ke mana. Selalu tulis alt dari sudut pandang tujuan link.

Catatan teknis: Secara visual, a dan button bisa dibuat terlihat identik dengan CSS, tetapi secara semantik mereka tidak pernah bisa saling menggantikan. Uji cepatnya: kalau kamu bisa menjawab "klik ini membawa ke URL apa?", pakai a. Kalau jawabannya "tidak ke mana-mana, tapi terjadi sesuatu", pakai button. Kebiasaan kecil ini membuat websitemu langsung naik kelas dalam aksesibilitas.