Iframe Title

Pengunjung halaman kontak Siti memakai pembaca layar. Dengan tombol navigasi frame, pengunjung tersebut berpindah dari satu bingkai ke bingkai lain pada halaman — sama seperti kita berpindah antar-heading. Untuk setiap bingkai, pembaca layar mengumumkan namanya. Bila iframe tidak punya title, umumnya yang terdengar hanya kata “frame” — tanpa konteks sedikit pun.

Satu kata “frame” tidak menjelaskan apa pun. Pengguna tidak tahu bingkai itu peta, video, atau widget iklan; satu-satunya cara mengetahuinya adalah masuk ke dalam bingkai dan menebak isinya. Halaman kita sendiri tertata rapi dengan judul dan heading berjenjang — justru jendela yang kita sematkan yang dibiarkan tanpa nama.

title adalah Nama Bingkai #

Aturannya: atribut title pada iframe menjadi nama bingkai (accessible name) yang diumumkan pembaca layar. Atribut ini ditulis pada elemen iframe di halaman induk — cara penulisannya sama seperti title pada elemen lain.

Mekanismenya perlu dipisahkan dari judul dokumen. Dokumen di dalam iframe dapat punya elemen <title> sendiri, tetapi nama yang diumumkan saat pengguna menavigasi bingkai berasal dari atribut title di halaman induk. Untuk embed pihak ketiga kita tidak dapat mengatur <title> dokumen mereka — atribut title milik kita selalu berada dalam kendali kita.

Contoh: Tanpa dan Dengan title #

Bentuk pertama kerap ditempel mentah-mentah dari tombol “Sematkan” penyedia:

<!-- tanpa nama bingkai: pembaca layar hanya mengumumkan "frame" -->
<iframe src="https://www.example.com/peta-kedai" width="600" height="400"></iframe>

Bentuk kedua menambahkan satu atribut — dan mengubah pengalaman navigasi seluruhnya:

<iframe
  src="https://www.example.com/peta-kedai"
  title="Peta lokasi Kedai Kopi Siti"
  width="600"
  height="400">
</iframe>

Hasil render kedua contoh sama: peta tampil dalam kotak 600×400. Perbedaannya baru terasa saat pembaca layar aktif — bingkai kedua diumumkan sebagai “Peta lokasi Kedai Kopi Siti, frame”, sehingga pengguna mengetahui isinya sebelum masuk.

Mari kita telaah bagian yang berubah:

1. Baris 3 (title="Peta lokasi Kedai Kopi Siti"): satu atribut menambahkan nama yang dibacakan pembaca layar pada bingkai.
2. Baris 4–5 (width="600" dan height="400"): tetap ditulis seperti biasa — title tidak mengubah perilaku visual apa pun; fungsinya murni untuk aksesibilitas.

Kedua bentuk itu berdampingan pada demo berikut, sama-sama memuat example.com. Perlu dikatakan terus terang: perbedaannya tidak terlihat oleh mata — title dibaca pembaca layar saat menavigasi bingkai, bukan dirender pada layar. Nilai demonya ada pada markup yang bisa dibandingkan langsung:

Kedua bingkai memuat halaman daring dan membutuhkan koneksi internet.

Menulis title yang Deskriptif #

Nama bingkai menjelaskan isi, bukan teknologinya. Bandingkan:

Pola praktisnya: sebut isi plus kepemilikan bila relevan — “Peta lokasi Kedai Kopi Siti”, “Pratinjau brosur menu”. Jangan pula menuliskan kalimat panjang; pembaca layar mengumumkan seluruhnya setiap kali fokus bertemu bingkai.

Ringkasan #

• title pada iframe adalah nama bingkai yang diumumkan pembaca layar.
• Tanpa title, bingkai umumnya hanya diumumkan sebagai “frame” — pengguna kehilangan konteks dan harus menebak.
• Tulis nama deskriptif berisi konten, bukan teknologi: “Peta lokasi Kedai Kopi Siti”.
• WCAG mewajibkan nama pada setiap bingkai — satu atribut dengan dampak besar.

Bingkai kini bernama. Pertanyaan berikutnya: seberapa banyak kebebasan yang kita berikan kepada isi bingkai tersebut? Chapter berikutnya membahas atribut sandbox.