Link yang Aksesibel

Link yang bekerja secara teknis belum tentu ramah bagi semua pengunjung. Screen reader membaca deretan link tanpa kalimat di sekelilingnya, pengunjung yang mengandalkan keyboard berpindah dari link ke link, dan mesin pencari menilai tujuan dari teksnya. Pada Chapter terakhir section ini kita menyempurnakan mutu link: teks yang bermakna, atribut petunjuk berupa hreflang dan type, indikasi jenis file beserta ukurannya, serta batas antara link dan button.

Teks Link yang Bermakna #

Screen reader menyediakan pintasan untuk mendaftar seluruh link di sebuah halaman, lalu membacakan hasilnya terpisah dari konteks kalimat. Dalam daftar semacam itu, teks “klik di sini” tidak menyampaikan apa pun: pengunjung hanya mendengar deretan frasa yang identik tanpa tahu ke mana masing-masing mengarah. Aturan praktisnya, tulis teks link seolah-olah teks itu berdiri sendiri:

Baris ketiga tabel menunjukkan dua kebiasaan tambahan. Menampilkan URL mentah sebagai teks link menghasilkan pembacaan yang panjang dan membingungkan oleh screen reader — teks link sebaiknya berupa frasa bermakna, bukan alamat. Penulisan www.example.com dalam contoh hanyalah domain latihan; hal serupa berlaku untuk situs sungguhan.

Petunjuk Bahasa, Jenis File, dan Ukuran #

Elemen a menyediakan atribut petunjuk yang membantu pengunjung menimbang sebelum mengeklik. Atribut hreflang menyatakan bahasa halaman tujuan, sedangkan atribut type menyatakan perkiraan jenis file (MIME type) yang dituju. Keduanya bersifat petunjuk: browser umumnya tidak mengubah tampilan, tetapi alat bantu dan mesin pembaca memanfaatkan informasinya:

<a href="https://developer.mozilla.org/en-US/docs/Web" hreflang="en">
  Referensi HTML berbahasa Inggris
</a>
<a href="laporan-2025.pdf" type="application/pdf">Laporan Tahunan 2025 (PDF, 2 MB)</a>

Pada contoh kedua, teks link juga menyebutkan jenis file dan ukurannya. Penyebutan tersebut bukan pengganti atribut, melainkan penanda yang terbaca semua orang: pengunjung mengetahui bahwa klik akan memuat unduhan 2 MB sebelum tindakan itu terjadi. File laporan-2025.pdf hanyalah nama hipotetis — sediakan filenya sendiri bila ingin menguji contoh di atas.

Link atau Button #

Pertanyaan pemandunya sederhana: apakah tindakan itu membawa pengunjung ke tempat lain, atau mengubah sesuatu di halaman saat ini? Perpindahan tempat adalah tugas link — elemen a dengan href — karena link dapat dibuka di tab baru, disimpan sebagai bookmark, dan diikuti mesin pencari. Perubahan pada halaman itu sendiri, seperti menyimpan draf atau membuka dialog, adalah tugas button. Menyamakan keduanya merusak jalan pintas bawaan browser: elemen a tanpa href tidak berperilaku sebagai link dan tidak dapat dijangkau keyboard, sedangkan button berperilaku interaktif sejak awal.

Kita belum menulis button sejauh ini; elemen tersebut diperkenalkan penuh pada section Forms. Untuk sekarang, cukup pahami pembagian perannya: navigasi menuju a, aksi menuju button.

Contoh Lengkap dalam Satu File #

File berikut merangkum praktik baik seluruh section ini dalam satu halaman sumber daya:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sumber Daya Belajar</title>
</head>
<body>
  <h1>Sumber Daya Belajar HTML</h1>
  <nav>
    <ul>
      <li><a href="materi-dasar.html">Materi dasar HTML</a></li>
      <li><a href="latihan-struktur.html">Latihan struktur dokumen</a></li>
    </ul>
  </nav>
  <p>Dokumen pendukung:</p>
  <ul>
    <li><a href="laporan-2025.pdf" type="application/pdf">Laporan Tahunan 2025 (PDF, 2 MB)</a></li>
    <li><a href="https://developer.mozilla.org/en-US/docs/Web" hreflang="en">Referensi HTML berbahasa Inggris</a></li>
  </ul>
  <p><button type="button">Tandai materi ini selesai dibaca</button></p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Menu navigasi dua link dengan teks yang menjelaskan tujuannya
  - Daftar dokumen pendukung berisi link PDF dan link eksternal
  - Button "Tandai materi ini selesai dibaca" di bagian bawah

Mari kita telaah keputusannya:

1. Baris 10-15 (menu navigasi): setiap teks link menyebutkan isi halaman tujuan, sehingga tetap bermakna ketika dibacakan terpisah dari halaman.
2. Baris 18 (link PDF): teks menyebutkan jenis file dan ukuran, sedangkan type="application/pdf" memberi petunjuk mesin atas isi href.
3. Baris 19 (link ber-hreflang): bahasa tujuan dinyatakan eksplisit; pengunjung mengetahui bahwa dokumen ditulis dalam bahasa Inggris sebelum mengeklik.
4. Baris 21 (button): tindakan menandai materi berupa aksi pada halaman, bukan perpindahan tempat, sehingga elemen yang tepat adalah button.

Dengan penutup ini, section Links dan Navigasi selesai: kita telah membangun hyperlink, menguasai URL, melompat antarbagian, menyusun situs multi-halaman, membuka tab dengan aman, dan menghubungkan email serta telepon. Chapter berikutnya membuka section Images dan Media dengan elemen img — elemen yang atribut src-nya memakai pengetahuan URL yang baru saja kita bangun.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen a
• MDN Web Docs — Learn Accessibility
• W3C WAI — WCAG 2.2 Quick Reference

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sumber Daya Belajar</title>
</head>
<body>
  <h1>Sumber Daya Belajar HTML</h1>
  <nav>
    <ul>
      <li><a href="materi-dasar.html">Materi dasar HTML</a></li>
      <li><a href="latihan-struktur.html">Latihan struktur dokumen</a></li>
    </ul>
  </nav>
  <p>Dokumen pendukung:</p>
  <ul>
    <li><a href="laporan-2025.pdf" type="application/pdf">Laporan Tahunan 2025 (PDF, 2 MB)</a></li>
    <li><a href="https://developer.mozilla.org/en-US/docs/Web" hreflang="en">Referensi HTML berbahasa Inggris</a></li>
  </ul>
  <p><button type="button">Tandai materi ini selesai dibaca</button></p>
</body>
</html>