Title pada Iframe

Chapter sebelumnya berakhir dengan satu celah: area sematan yang tampil tanpa perkenalan. Bagi pengguna screen reader, iframe tanpa nama diumumkan sekadar sebagai “frame” — sama sekali tidak menyatakan isinya. Atribut title mengisi kekosongan itu dengan accessible name, yaitu nama yang diumumkan assistive technology saat fokus berpindah. Chapter ini membahas mengapa title wajib ada, cara menuliskannya, dan perbedaannya dengan heading di dokumen sematan.

Mengapa Iframe Wajib Punya Title #

Screen reader menyediakan navigasi khusus antar frame: daftar frame yang dapat ditelusuri beserta tombol pintasnya. Saat mengumumkan frame, screen reader membacakan namanya dari atribut title, lalu menyebut role-nya. Tanpa title, pengumuman berhenti di kata “frame” — pengguna tak punya dasar untuk menjelajah atau melewatinya. WCAG menetapkan kebutuhan ini lewat teknik H64 yang mewajibkan title deskriptif pada iframe.

<!-- Tanpa title: diumumkan hanya sebagai "frame" -->
<iframe src="www.example.com/widgets/jadwal" width="300" height="180"></iframe>

<!-- Dengan title: diumumkan bersama namanya -->
<iframe src="www.example.com/widgets/jadwal" title="Jadwal buka warung Siti pekan ini" width="300" height="180"></iframe>

Output yang Dihasilkan:

Navigasi frame pada screen reader:
  - iframe pertama: "frame"
  - iframe kedua: "Jadwal buka warung Siti pekan ini, frame"

Mari kita bedah perbandingan di atas:

1. iframe pertama: title hilang, sehingga accessible name-nya kosong; screen reader hanya punya role “frame” untuk diumumkan.
2. iframe kedua: nilai title menjadi accessible name yang diumumkan sebelum role.
3. src yang sama pada keduanya: kualitas nama tak ditentukan alamatnya; nama yang baik menyatakan konten dari sudut pandang halaman kita.

Menulis Title yang Deskriptif #

title yang baik menyatakan isi sematan dengan ringkas dan spesifik, bukan menyalin nama elemen atau alamatnya. Bayangkan daftar frame berisi tiga pengumuman “frame” identik — pengguna tidak punya dasar memilih. Bandingkan nilai-nilai berikut:

Tulis title sebagaimana menjelaskan area itu secara lisan kepada orang yang tidak melihat layar. Satu kalimat pendek biasanya cukup; nama terlalu panjang memperlambat pengumuman, nama terlalu umum membuat frame sulit dibedakan. Bila halaman memuat beberapa sematan, pastikan setiap title unik dan menyebut perannya.

Title Iframe vs Heading di Dalam Iframe #

Dokumen sematan sering memiliki heading sendiri; bukankah itu cukup sebagai pengenalan? Atribut title ditulis di dokumen induk dan selalu terbaca saat pengguna menelusuri daftar frame; heading berada di dalam dokumen sematan dan baru terjangkau setelah screen reader masuk ke dalam frame. Untuk sematan pihak ketiga, kita bahkan tidak dapat mengubah heading-nya — satu-satunya kendali ada pada title di sisi kita.

Keduanya saling melengkapi: title menjadi pintu masuknya, heading membantu navigasi di dalamnya.

Menguji Title dengan Screen Reader #

Uji title dengan cara yang sama seperti menguji kontrol lain: buka halaman dengan screen reader, telusuri daftar frame, lalu dengarkan pengumumannya. Bila tidak memakai screen reader, inspeksi accessibility tree lewat panel aksesibilitas DevTools; nama frame muncul di sana seperti milik tombol dan link. Prinsipnya sederhana: setiap frame pada daftar harus dapat dibedakan tanpa melihat layar.

Output yang Dihasilkan:

Daftar frame pada halaman uji:
  - "Jam buka warung Siti pekan ini, frame"
  - "Peta lokasi warung Siti di Jl. Melati No. 10, frame"

Contoh Lengkap dalam Satu File #

File berikut menempatkan dua sematan pihak ketiga pada satu dasbor, keduanya dengan title deskriptif dan lazy loading:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dasbor Warung Siti</title>
</head>
<body>
  <h1>Dasbor warung Siti</h1>
  <iframe src="www.example.com/widgets/jam-buka?warung=siti" title="Jam buka warung Siti pekan ini" width="300" height="180" loading="lazy"></iframe>
  <iframe src="www.example.com/peta?lokasi=jl-melati-10" title="Peta lokasi warung Siti di Jl. Melati No. 10" width="420" height="260" loading="lazy"></iframe>
  <p>Kedua panel di atas berasal dari layanan www.example.com.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul "Dasbor warung Siti"
  - Panel jam buka 300x180 dari layanan widget
  - Panel peta 420x260 di bawahnya
  - Paragraf sumber layanan di bagian bawah

Mari kita bedah baris-baris pentingnya:

1. Baris 10 (panel jam buka): title menyebut isi dan periodenya, sehingga terbedakan dari panel kedua.
2. Baris 11 (panel peta): title menyertakan alamat agar peta ini tetap terbedakan bila nanti ada peta lain di halaman yang sama.
3. Baris 12 (paragraf sumber): pembaca yang melihat layar mendapat konteks sumber yang sama seperti pengguna screen reader.
4. Kedua iframe memakai loading="lazy": pola chapter sebelumnya tetap dipakai bersama title.

Dengan title, setiap sematan memiliki nama yang jelas, tetapi nama tidak membatasi apa yang dapat dilakukan dokumen sematan. Chapter berikutnya menambahkan remnya melalui atribut sandbox.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen iframe
• W3C WAI — Teknik H64: Using the title attribute of the iframe element
• WHATWG — HTML Living Standard: Iframes, embeds, and objects

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dasbor Warung Siti</title>
</head>
<body>
  <h1>Dasbor warung Siti</h1>
  <iframe src="www.example.com/widgets/jam-buka?warung=siti" title="Jam buka warung Siti pekan ini" width="300" height="180" loading="lazy"></iframe>
  <iframe src="www.example.com/peta?lokasi=jl-melati-10" title="Peta lokasi warung Siti di Jl. Melati No. 10" width="420" height="260" loading="lazy"></iframe>
  <p>Kedua panel di atas berasal dari layanan www.example.com.</p>
</body>
</html>