kodingan mencatumkan keterangan gambar header html

Dalam pembuatan website, salah satu elemen penting yang tidak boleh dilupakan adalah header. Salah satu komponen dalam header yang sering digunakan adalah gambar header. Penggunaan gambar header membuat tampilan website menjadi lebih menarik dan menarik perhatian pengunjung. Namun, tidak hanya menambahkan gambar header saja, tetapi juga harus memberikan keterangan atau deskripsi dari gambar header tersebut untuk meningkatkan aksesibilitas.

Untuk mencatumkan keterangan gambar header pada halaman HTML, terdapat beberapa cara yang bisa dilakukan, di antaranya adalah:

1. Menggunakan Tag

Tag adalah tag HTML yang dapat digunakan untuk menampilkan gambar pada halaman web. Selain menampilkan gambar, juga memiliki atribut alt yang digunakan untuk memberikan deskripsi singkat tentang gambar yang ditampilkan.

<img src="url_gambar_header.jpg" alt="Header website">

Pada contoh di atas, "Header website" adalah deskripsi singkat dari gambar header yang ditampilkan. Deskripsi ini akan muncul jika gambar tidak dapat ditampilkan atau terdapat masalah dalam proses loading.

2. Menggunakan Atribut title

Selain menggunakan atribut alt pada tag , untuk memberikan deskripsi dari gambar header, juga dapat menggunakan atribut title. Atribut title akan menampilkan teks ketika pengguna mengarahkan kursor ke area gambar.

<img src="url_gambar_header.jpg" title="Header website">

3. Menggunakan aria-label dan role

Untuk memastikan bahwa deskripsi singkat dari gambar header dapat diakses oleh pengguna yang menggunakan utilitas bantuan, seperti screen reader, dapat juga menggunakan aria-label dan role. aria-label adalah atribut ARIA yang digunakan untuk memberikan label pada elemen HTML. Sedangkan role adalah atribut ARIA yang digunakan untuk memberikan role atau fungsi pada elemen HTML.

<header role="banner">
  <img src="url_gambar_header.jpg" aria-label="Header website">
</header>

Pada contoh di atas, header memiliki role="banner" yang menandakan bahwa elemen tersebut adalah bagian dari header. Sedangkan pada tag , menggunakan aria-label untuk memberikan deskripsi singkat dari gambar header.

Dengan menggunakan salah satu cara di atas, maka keterangan atau deskripsi gambar header bisa ditampilkan pada halaman web untuk memudahkan pengguna dalam mengakses konten website.