iframe yang aman
<iframe> menyematkan halaman lain ke dalam halamanmu, misalnya video YouTube atau peta. Dua atribut yang selalu diperiksa di dunia kerja: title, karena screen reader hanya menyebut 'frame' tanpa itu, dan loading="lazy", yang menunda pemuatan sampai pengguna hampir men-scroll ke sana. Menunda pemuatan adalah salah satu perbaikan performa termurah dan sering jadi rekomendasi pertama audit Lighthouse. Untuk konten dari sumber yang tidak kamu kendalikan, tambahkan juga atribut sandbox agar isinya dibatasi.
👀 Contoh dulu
<iframe src="https://www.openstreetmap.org" title="Peta lokasi kantor" loading="lazy"> </iframe>
Hasilnya: Sebuah jendela kecil di dalam halaman yang menampilkan situs peta.
💡 title dibacakan screen reader sebagai nama frame. Tanpa itu, pengguna hanya mendengar 'frame' tanpa tahu isinya.
📝 Sekarang giliranmu
Buat <iframe> dengan src berisi https://example.com, title berisi Contoh situs, dan loading bernilai lazy.