Ditulis oleh: Ditulis pada: 4/10/2021
Iframe Harus Memiliki Atribut Title - Saya yakin sebagian besar blogger belum mengetahui aturan yang satu ini yaitu untuk setiap iframe harus memiliki atribut title. Saya sendiri baru menyadarinya setelah mendapat error di Lighthouse.
Ketika kita mengecek sebuah halaman yang memiliki iframe dengan tool Lighthouse, misalnya sebagai contohnya embed video Youtube, maka kita akan mendapatkan error pada accessibility yaitu "<frame> or <iframe> elements do not have a title".
Error tersebut terjadi karena pada iframe Youtube tersebut tidak dilengkapi dengan atribut title. Jadi sekarang ini setiap iframe harus memiliki atribut title.
Penambahan atribut title pada iframe ini barangkali belum familiar bagi sebagian besar blogger karena memang belum banyak yang mensosialisasikan hal ini. Google saja sebagai pemilik Youtube dan Adsense belum melengkapi embed dengan atribut title.
Mengapa penambahan atribut title pada iframe itu penting?
Karena pengguna screen reader seperti penyandang tunanetra mengandalkan judul bingkai untuk menjelaskan konten yang diembed tersebut. Mereka akan kesulitan membaca dan memahami konten jika iframe tidak ditandai dengan title atribut.
Dengan menambahkan title yang deskriptif dan unik memungkinkan pengguna untuk dengan cepat menemukan iframe yang mereka butuhkan.
Jadi mulai sekarang, pastikan bahwa semua iframe memiliki nilai atribut title yang valid, deskriptif, dan unik. Jika sebuah halaman memiliki iframe lebih dari 1, maka atribut title-nya tidak boleh sama.
Anda dapat menambahkan atribut title ke elemen iframe seperti berikut:
<iframe src="......." title="Tour Kampung Halaman"></iframe>Title tag pada iframe harus deskriptif menerangkan dengan singkat dan jelas tentang konten yang di-embed tersebut.
Dan atribut title harus benar-benar berisi teks, tidak kosong seperti contoh ini:
<iframe src="......." title=""></iframe>Begitupun dengan tag amp-iframe, sebaiknya lengkapi juga dengan atribut title seperti pada iframe.
Dan untuk tag amp-youtube juga sebaiknya lengkapi juga dengan atribut title seperti pada amp-iframe, meskipun saat ini secara default jika amp-youtube tidak dilengkapi title maka iframe yang dihasilkan akan otomatis memiliki title="Youtube video" seperti pada gambar berikut ini (klik gambar untuk memperbesar).
Untuk postingan penambahan atribut title pada iframe ini, saya juga sudah membuatkan sebuah video agar menjadi lebih jelas. Silahkan tonton videonya berikut ini.
Semoga bermanfaat.