Alt Text

Atribut alt telah kita kenal pada section Images dan Media, namun menulis isinya melibatkan keputusan yang lebih dalam daripada sekadar menjelaskan gambar. Isi yang tepat bergantung pada peran gambar di halaman: satu foto bisa butuh deskripsi panjang di satu konteks, dan butuh alt="" di konteks lain. Chapter ini mengupas fungsi alt, empat kategori gambar dari tutorial resmi WAI, serta pola penulisan untuk tiap kategori.

Tiga Peran Atribut alt #

Isi alt dipakai tiga pihak sekaligus. Screen reader membacakannya sebagai nama gambar; browser menampilkannya di kotak gambar rusak; mesin pencari memakainya untuk memahami gambar yang tak bisa dilihat. Satu kalimat pendek menampung tiga pembaca itu, itulah sebabnya atribut kecil ini menentukan banyak hal.

Perlu dibedakan dua keadaan yang sering dicampur: alt="" dan atribut yang tak ditulis sama sekali. Nilai kosong adalah pernyataan sadar bahwa gambar tak membawa informasi, dan screen reader melewati gambar tersebut. Atribut yang hilang adalah kelalaian: pembaca layar bisa berhenti dan membacakan nama file seperti “grafik-penjualan-2024”, yang jelas bukan informasi yang kita maksud.

Konteks Menentukan Isi alt #

Foto yang sama bisa membutuhkan alt berbeda-beda. Pada katalog produk, foto lidah buaya membawa informasi bentuk tanaman sehingga layak dideskripsikan. Pada halaman promosi yang sama, foto itu justru dipakai sebagai hiasan latar belakang, dan mengulang deskripsinya hanya menambah bacaan yang tak perlu.

Pertanyaan pemandunya satu: apa yang hilang dari halaman bila gambar gagal dimuat? Bila jawabannya “ada informasi penting”, tulis informasi tersebut di alt. Bila jawabannya “hanya kesan visual”, isi alt="" dan pindahkan informasi ke teks halaman.

Empat Kategori Gambar dari WAI #

Tutorial gambar resmi WAI membagi gambar menjadi empat kategori, dan setiap kategori punya pola penulisan alt yang berbeda:

Gambar kompleks, misalnya grafik data, tetap termasuk informasional namun butuh perlakuan khusus: alt singkat ditambah deskripsi panjang di dekat gambar. Pola tiap kategori berikut ini kita praktikkan langsung pada satu halaman.

Menerapkan Kategori dalam Satu Halaman #

Contoh berikut menampung keempat kategori sekaligus:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Katalog Tanaman</title>
</head>
<body>
  <h1>Katalog Tanaman Toko Bunga Melati</h1>

  <h2>Produk Unggulan</h2>
  <p>
    <img src="foto-lidah-buaya.jpg" alt="Tanaman lidah buaya setinggi 40 cm dalam pot tanah liat" width="320" height="240">
    Lidah buaya, Rp45.000 per pot.
  </p>

  <h2>Grafik Penjualan</h2>
  <figure>
    <img src="grafik-penjualan-2024.svg" alt="Grafik batang penjualan bulanan 2024, naik dari 32 juta rupiah pada Januari menjadi 45 juta rupiah pada Desember" width="480" height="240">
    <figcaption>Penjualan naik stabil sepanjang 2024; kenaikan terbesar terjadi pada Juli setelah cabang Serpong dibuka.</figcaption>
  </figure>

  <p>
    <a href="www.example.com/">
      <img src="logo-toko.svg" alt="Toko Bunga Melati, kembali ke halaman utama" width="160" height="40">
    </a>
  </p>

  <hr>
  <p><img src="pembatas-daun.svg" alt="" width="240" height="16"></p>
</body>
</html>

Output yang Dihasilkan:

Screen reader mengumumkan gambar demi gambar:
  - "Tanaman lidah buaya setinggi 40 cm dalam pot tanah liat, gambar"
  - "Grafik batang penjualan bulanan 2024, naik dari 32 juta rupiah
     pada Januari menjadi 45 juta rupiah, gambar"
  - "Toko Bunga Melati, kembali ke halaman utama, link, gambar"
  - gambar pembatas-daun.svg: dilewati karena alt=""

Mari kita bedah tiap kategori pada contoh di atas:

1. Baris 12-14 (informasional): alt menyatakan isi penting foto, yaitu jenis tanaman, ukuran, dan wadah; harga tetap ditulis di teks biasa agar tak tergantung gambar.
2. Baris 18-21 (kompleks): alt memuat kesimpulan arah data, sedangkan figcaption menyimpan detail yang tak muat; pembaca memilih kedalaman yang dibutuhkan.
3. Baris 25-27 (fungsional): logo berada di dalam a, sehingga alt menyatakan tujuan link, bukan isi gambar; mengumumkan “logo-toko” membuat pengguna menebak-nebak.
4. Baris 30 (dekoratif): garis pembatas daun diberi alt="" agar screen reader melewatinya tanpa berhenti.

File gambar pada contoh ini hipotetis; sediakan file sendiri saat mencoba, karena validator hanya memeriksa sintaks, bukan keberadaan berkas.

Gambar Kompleks dan Gambar Teks #

Untuk grafik dan diagram, rumusnya bekerja berlapis: alt singkat memuat kesimpulan utama, lalu deskripsi panjang menampung angka penting di dekat gambar, misalnya lewat figcaption atau paragraf berikutnya. Penempatan berdekatan penting karena tidak semua teknologi membantu merujuk deskripsi yang letaknya jauh.

Sementara itu, kategori gambar teks sebaiknya diperlakukan sebagai peringatan: hindari memasang teks sebagai gambar. Teks dalam gambar tak bisa diubah ukurannya aman, tak bisa diterjemahkan, dan tak bisa dicari, padahal alt yang menyalin teksnya hanya jalan keluar sebagian. Pengecualian yang lazim diterima adalah logo beraksen khusus, dan itupun alt-nya wajib menyalin teks logo.

Dengan gambar beres, kelompok elemen berikutnya yang paling menuntut detail adalah form. Chapter berikutnya merakit form aksesibel dari label, kelompok, petunjuk, hingga pesan kesalahan yang terhubung.

Referensi resmi untuk pendalaman:

• W3C WAI — Images Tutorial
• MDN Web Docs — Elemen img
• MDN Web Docs — HTML images

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Katalog Tanaman</title>
</head>
<body>
  <h1>Katalog Tanaman Toko Bunga Melati</h1>

  <h2>Produk Unggulan</h2>
  <p>
    <img src="foto-lidah-buaya.jpg" alt="Tanaman lidah buaya setinggi 40 cm dalam pot tanah liat" width="320" height="240">
    Lidah buaya, Rp45.000 per pot.
  </p>

  <h2>Grafik Penjualan</h2>
  <figure>
    <img src="grafik-penjualan-2024.svg" alt="Grafik batang penjualan bulanan 2024, naik dari 32 juta rupiah pada Januari menjadi 45 juta rupiah pada Desember" width="480" height="240">
    <figcaption>Penjualan naik stabil sepanjang 2024; kenaikan terbesar terjadi pada Juli setelah cabang Serpong dibuka.</figcaption>
  </figure>

  <p>
    <a href="www.example.com/">
      <img src="logo-toko.svg" alt="Toko Bunga Melati, kembali ke halaman utama" width="160" height="40">
    </a>
  </p>

  <hr>
  <p><img src="pembatas-daun.svg" alt="" width="240" height="16"></p>
</body>
</html>