Teks Alt dan Teks Tautan

Teks alt dan teks tautan adalah dua teks pendek yang paling sering dibacakan pembaca layar, sehingga kualitas keduanya menentukan mutu pengalaman aksesibilitas sebuah halaman. Topik ini membahas keputusan teks alt untuk empat jenis gambar, penyusunan frasa tautan yang dapat dipahami tanpa konteks, dan pemeriksaan daftar tautan sebagaimana dilihat pembaca layar. Setelah mengikuti topik ini, setiap gambar dan tautan pada halaman dapat diberi teks yang tetap bermakna ketika dibacakan terpisah dari sekitarnya.

Keputusan teks alt per jenis gambar#

Topik Gambar pada modul Halaman Pertama sudah memperkenalkan atribut alt beserta aturan dasarnya, yaitu teks yang menggantikan gambar ketika gambar tidak dapat dilihat. Dari sudut pandang alat bantu, teks alt yang tepat ditentukan oleh fungsi gambarnya, bukan oleh bentuknya. Gambar yang sama dapat memerlukan teks berbeda pada halaman yang berbeda, karena yang digambarkan adalah peran gambar tersebut di dalam halaman.

Empat keputusan pada tabel tersebut menutup kemungkinan yang lazim ditemui. Kesalahan yang paling merugikan adalah membalik jenisnya. Satu contohnya adalah memberi deskripsi panjang pada gambar dekoratif, sehingga pembaca layar membacakan hiasan yang tidak penting. Contoh lainnya adalah mengosongkan teks alt gambar informatif, sehingga datanya hilang sama sekali. Aturan keputusannya sederhana, yaitu tanyakan apa yang hilang dari halaman apabila gambar itu tidak dapat dilihat, lalu tuliskan hal itu secara ringkas.

Gambar dekoratif dan gambar fungsional#

<!-- informatif: alt menggambarkan isi datanya -->
<img src="grafik-nilai.svg" alt="Rata-rata nilai ulangan naik dari 70 pada Maret menjadi 84 pada Juni" width="240" height="120">

<!-- dekoratif: alt kosong agar dilewati pembaca layar -->
<img src="ornamen.svg" alt="">

<!-- gambar di dalam tautan: alt menyatakan tujuan tautan -->
<a href="/jadwal"><img src="ikon-kalender.svg" alt="Buka jadwal piket" width="48" height="48"></a>

Gambar dekoratif diberi alt="" yang kosong, dan pembaca layar melewatinya tanpa mengumumkan apa pun. Menghapus atribut alt sama sekali memberikan hasil yang berbeda, karena tanpa atribut itu pembaca layar kerap membacakan nama berkasnya sebagai ganti. Hiasan yang tidak membawa informasi pun sebaiknya dipindahkan ke CSS sebagai latar bila memungkinkan, sehingga markup hanya memuat gambar yang benar-benar berperan.

Gambar fungsional seperti ikon kalender di atas memuat alt berupa fungsi yang terjadi, yaitu membuka jadwal piket, dan bukan bentuk gambarnya seperti kotak biru berisi deretan angka. Pada tombol yang isinya hanya gambar, teks alt tersebut sekaligus menjadi nama aksesibel tombolnya.

Apabila gambar berada di dalam tautan yang juga memuat teks, tugas menyebut tujuan berpindah ke teks tautan, dan gambarnya boleh diperlakukan dekoratif dengan alt="". Membiarkan keduanya menyebut tujuan yang sama membuat nama tautan terdengar ganda. Pemisahan tugas seperti ini menjaga teks tautan tetap singkat tanpa kehilangan informasinya.

Frasa teks tautan yang berdiri sendiri#

Pembaca layar menyediakan cara melihat halaman tanpa membacanya dari awal. Salah satu cara tersebut adalah daftar tautan (links list) yang menghimpun seluruh tautan di luar konteks kalimatnya. Pengguna juga dapat menekan Tab dan mendengar teks setiap tautan satu per satu tanpa kalimat di sekitarnya. Karena itu, frasa tautan harus bermakna ketika dibaca terpisah, dan frasa seperti klik di sini atau baca lagi tidak memberikan petunjuk apa pun tentang tujuannya.

Frasa yang baik menuliskan nama atau isi tujuannya, misalnya Baca Panduan Gambar dari WAI. Kata kerja klik sebaiknya dihindari pada frasa itu, karena tidak semua pengguna mengklik, sedangkan pengguna papan ketik mengaktifkan tautan dengan Enter. Menuliskan alamat mentah sebagai teks tautan juga buruk, karena alamat panjang dibacakan huruf demi huruf dan tidak menyatakan isinya.

Kebiasaan pelengkap yang baik adalah menjaga panjang frasa tetap wajar, yaitu cukup untuk menyatakan tujuan tanpa menjadi kalimat utuh yang panjang. Frasa yang terlalu pendek kehilangan konteks, sedangkan frasa yang terlalu panjang melelahkan ketika seluruh daftar tautan dibacakan satu per satu.

Memeriksa daftar tautan dengan simulasi#

Skrip berikut meniru fitur daftar tautan pada pembaca layar dengan cara menghimpun teks setiap elemen a dari satu potongan halaman. Untuk tautan yang isinya hanya gambar, teks alt gambar itu dijadikan teks tautannya.

// meniru daftar tautan yang dihimpun pembaca layar dari satu halaman
const halaman = `
  <nav>
    <a href="/beranda">Beranda</a>
    <a href="/jadwal">Jadwal piket</a>
  </nav>
  <a href="/panduan-wai">Baca Panduan Gambar dari WAI</a>
  <a href="/kembali"><img src="panah.svg" alt="Kembali ke daftar catatan"></a>
`;

const semua = halaman.match(/<a\s[^>]*>[\s\S]*?<\/a>/g) || [];
for (const tautan of semua) {
  const alt = tautan.match(/alt="([^"]*)"/);
  const teks = alt ? alt[1] : tautan.replace(/<[^>]+>/g, "").trim();
  console.log(`- ${teks}`);
}

- Beranda
- Jadwal piket
- Baca Panduan Gambar dari WAI
- Kembali ke daftar catatan

Keluaran di atas memperlihatkan cara pembaca layar mengambil teks tautan dari gambar yang berada di dalam tautan. Simulasi ini sederhana. Pembaca layar sesungguhnya menambahkan konteks lain seperti judul halaman dan atribut title, tetapi pola dasarnya sama, yaitu hanya teks tautan itulah yang terbaca. Fitur yang sama tersedia pada banyak pembaca layar dengan nama berbeda, sehingga skrip ini meniru salah satu cara pengguna menyapu halaman. Apabila salah satu barisnya tidak menjelaskan tujuan, perbaiki teks tautan atau teks alt gambar yang bersangkutan, lalu jalankan ulang pemeriksaannya. Dengan daftar seperti itu, frasa generik langsung terlihat kekosongannya.

Berkas utuh teks-alt.html#

Berkas berikut menghimpun seluruh keputusan topik ini pada satu halaman laporan, yaitu gambar informatif dengan deskripsi datanya, gambar dekoratif dengan alt="", gambar di dalam tautan dengan alt berupa tujuannya, dan dua tautan teks yang frasanya berdiri sendiri.

Berkas ini memerlukan tiga berkas gambar dalam satu folder yang sama, yaitu grafik-nilai.svg, ornamen.svg, dan ikon-kalender.svg. Ketiganya ditampilkan sebagai blok kode pada topik ini sehingga dapat disalin sekaligus saat dicoba. Buka halamannya dengan browser, lalu bandingkan teks yang tampak dengan teks alt yang dituliskan, karena keduanya disusun untuk tujuan yang berbeda. Teks yang tampak menjelaskan konteks bagi pengguna yang melihat, sedangkan teks alt menggantikan gambar bagi yang tidak. Uji tambahan yang berguna adalah menyembunyikan tampilan gambar pada DevTools, kemudian membaca ulang halaman untuk memastikan tidak ada informasi yang hilang.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Teks alt dan teks tautan</title>
  <style>
    body { font-family: sans-serif; margin: 0 auto; max-width: 36rem; padding: 0 1rem; }
    img { vertical-align: middle; }
    .ornamen { display: block; width: 240px; height: 24px; }
    ul { list-style: square; }
  </style>
</head>
<body>
  <h1>Laporan piket kelas</h1>

  <!-- gambar informatif: alt menggambarkan isi datanya -->
  <img src="grafik-nilai.svg" alt="Rata-rata nilai ulangan naik dari 70 pada Maret menjadi 84 pada Juni" width="240" height="120">
  <p>Rata-rata nilai kelas meningkat selama semester ini.</p>

  <!-- gambar dekoratif: alt kosong agar dilewati pembaca layar -->
  <img class="ornamen" src="ornamen.svg" alt="">

  <!-- gambar di dalam tautan: alt menyatakan tujuan tautan -->
  <a href="/jadwal"><img src="ikon-kalender.svg" alt="Buka jadwal piket" width="48" height="48"></a>

  <!-- frasa tautan yang berdiri sendiri -->
  <ul>
    <li><a href="/panduan-wai">Baca Panduan Gambar dari WAI</a></li>
    <li><a href="/notulen">Unduh notulen rapat piket bulan Juni</a></li>
  </ul>
</body>
</html>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120">
  <rect width="240" height="120" fill="#f5f5f5"/>
  <rect x="40" y="45" width="30" height="55" fill="#1565c0"/>
  <rect x="120" y="22" width="30" height="78" fill="#1565c0"/>
  <text x="55" y="112" text-anchor="middle" font-size="10" font-family="sans-serif" fill="#333333">Maret</text>
  <text x="135" y="112" text-anchor="middle" font-size="10" font-family="sans-serif" fill="#333333">Juni</text>
  <text x="55" y="40" text-anchor="middle" font-size="10" font-family="sans-serif" fill="#333333">70</text>
  <text x="135" y="17" text-anchor="middle" font-size="10" font-family="sans-serif" fill="#333333">84</text>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 24">
  <path d="M8 12 Q 38 -8 68 12 T 128 12 T 188 12 T 232 12" fill="none" stroke="#b0bec5" stroke-width="3" stroke-linecap="round"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
  <rect x="6" y="10" width="36" height="32" rx="4" fill="#1565c0"/>
  <rect x="6" y="10" width="36" height="9" rx="4" fill="#0d47a1"/>
  <rect x="14" y="5" width="4" height="9" rx="2" fill="#0d47a1"/>
  <rect x="30" y="5" width="4" height="9" rx="2" fill="#0d47a1"/>
  <g fill="#e3f2fd">
    <rect x="13" y="24" width="6" height="6"/>
    <rect x="21" y="24" width="6" height="6"/>
    <rect x="29" y="24" width="6" height="6"/>
    <rect x="13" y="32" width="6" height="6"/>
    <rect x="21" y="32" width="6" height="6"/>
  </g>
</svg>

Kesalahan umum#

Menghapus atribut alt alih-alih mengosongkannya pada gambar dekoratif. Tanpa atribut alt, pembaca layar kerap membacakan nama berkasnya, sehingga pengguna mendengar ornamen.svg tanpa arti apa pun. Tuliskan alt="" yang benar-benar kosong untuk gambar yang tidak membawa informasi.

Frasa tautan generik seperti klik di sini. Frasa semacam ini hilang maknanya pada daftar tautan dan saat pengguna menekan Tab dari satu tautan ke tautan berikutnya. Tuliskan nama atau isi tujuan tautan pada frasanya, misalnya Baca Panduan Gambar dari WAI.

Menggambarkan bentuk gambar fungsional. Teks alt seperti ikon kalender biru menyatakan penampil gambar, sedangkan yang dibutuhkan adalah fungsi yang terjadi saat gambar diaktifkan. Sebut tujuan atau aksinya, misalnya Buka jadwal piket.

Ringkasan#

• Teks alt mengikuti fungsi gambar, yaitu deskripsi untuk gambar informatif, alt="" untuk dekoratif, nama fungsi untuk fungsional, dan tujuan tautan untuk gambar di dalam tautan.
• Pembaca layar menghimpun tautan keluar dari konteksnya, sehingga frasa tautan harus bermakna ketika dibaca terpisah.
• Frasa seperti klik di sini, selengkapnya, dan alamat mentah tidak menyatakan tujuan dan sebaiknya diganti dengan nama tujuannya.
• Simulasi daftar tautan membantu memeriksa halaman dengan cara yang sama seperti yang dilihat pembaca layar.

Referensi#

• Images Tutorial — W3C WAI — Panduan resmi keputusan teks alt untuk setiap jenis gambar.
• An Alt Text Decision Tree — W3C WAI — Bagan keputusan teks alt langkah demi langkah.
• Elemen img — MDN Web Docs — Dokumentasi atribut alt beserta kaidah penulisannya.
• Requirements for providing text to act as an alternative for images — WHATWG — Ketentuan teks alt pada spesifikasi HTML Living Standard.
• Creating hyperlinks — MDN Web Docs — Panduan menulis teks tautan yang baik.