Sepanjang section ini kita menandai kesalahan kecil satu per satu. Chapter penutup merangkum semuanya menjadi satu tabel rujukan cepat: gejala yang terlihat pada halaman dan perbaikan yang menyertainya. Gunakan daftar ini sebagai pemeriksaan terakhir sebelum halaman diunggah.

Tabel Kesalahan Umum #

KesalahanGejalaPerbaikan
alt hilang atau berisi nama berkasPembaca layar membacakan nama berkas; halaman tidak terbaca tanpa gambarTulis alt bermakna; alt="" untuk gambar dekoratif
Ukuran asli jutaan piksel tanpa width/heightLayout melompat saat gambar tiba; berkas berat diunduhPasang width/height; kecilkan berkas sebelum diunggah
Format tidak sesuai jenis gambarFoto dalam PNG berukuran berkali lipat; teks dan logo dalam JPG berpinggir kotorFoto ke JPG/WebP/AVIF; tangkapan layar dan teks ke PNG/SVG
Teks disimpan dalam gambarTidak bisa dipilih, dicari, maupun dibacakan pembaca layarTulis sebagai teks HTML; gambar hanya visual pendukung
Hotlink gambar situs orang lainGambar hilang atau terblokir tanpa peringatanSimpan berkas pada folder proyek sendiri
Konten penting sebagai latar CSSPembaca layar dan mesin pencari tidak mengenalinyaGunakan img dengan alt
Jalur salah atau kapitalisasi berbedaIkon gagal termuat plus teks alt; galat 404 di panel NetworkRapikan jalur; tulis huruf kecil konsisten

Baris pertama tabel — kualitas alt — tidak terlihat sama sekali saat gambarnya sehat. Perhatikan kedua gambar berikut: keduanya tampil persis sama, padahal salah satunya memakai alt yang buruk:

Pada demo, kedua gambar memakai placeholder SVG yang identik. Perbedaannya baru terasa di luar layar: pembaca layar membacakan alt pertama sebagai kata “gambar” yang tidak menambah informasi, sementara alt kedua menceritakan isi fotonya — dan saat berkasnya gagal termuat, hanya gambar kedua yang menyampaikan maknanya.

Dua pola pada tabel itu layak dibedah lebih dalam karena paling sering lolos dari pemeriksaan mata.

Teks dalam Gambar #

Jam buka kedai yang ditulis di dalam gambar banner tampak sama bagi mata, tetapi kehilangan tiga kemampuan sekaligus: pengunjung tidak bisa menyalin teksnya, mesin pencari tidak bisa mengindeksnya, dan pembaca layar tidak bisa membacakannya — alt yang mendeskripsikannya sekalipun tetap bukan teks yang bisa dipilih. Aturan praktisnya: bila informasinya berupa teks, tulis sebagai teks HTML, dan biarkan gambar hanya membawa visual pendukung.

Bentuk keliru yang dimaksud:

html 
<img src="assets/banner-jam.jpg" alt="banner.jpg">

Perbaikannya menuliskan jam buka sebagai teks dan memakai gambar hanya bila memang diperlukan:

html 
<p>Kedai buka setiap hari, 07.00–22.00 WIB.</p>

Konten Penting sebagai Latar CSS #

background-image pada CSS hanya untuk hiasan. Konten yang memuat informasi — foto produk, diagram, ilustrasi artikel — harus memakai img dengan alt, karena latar CSS tidak diumumkan pembaca layar, tidak punya teks pengganti, dan tidak dikenali mesin pencari sebagai konten. Batasnya sederhana: hiasan boleh menjadi latar; informasi harus menjadi elemen.

Kebiasaan Baik #

Lima kebiasaan berikut mencegah hampir seluruh baris tabel di atas:

  1. Tulis setiap img dengan src yang benar, alt yang bermakna (atau alt="" bila dekoratif), serta width/height.
  2. Pilih format sesuai jenisnya: foto ke JPG/WebP/AVIF; ikon dan logo ke SVG; tangkapan layar ke PNG.
  3. Kecilkan berkas dan sediakan beberapa lebar, lalu biarkan srcset dan sizes yang memilih.
  4. Simpan seluruh aset gambar pada satu folder khusus dalam proyek, misalnya assets/img/.
  5. Uji halaman dengan gambar dimatikan dan koneksi lambat sebelum mengunggah.

Ringkasan #

  • Tujuh kesalahan paling umum: alt kosong terlanjur, ukuran tanpa atribut, format tak sesuai, teks dalam gambar, hotlink, konten sebagai latar CSS, dan jalur salah.
  • Teks dalam gambar kehilangan tiga kemampuan: dipilih, dicari, dibacakan.
  • Lima kebiasaan baik di atas menjaga halaman tetap ringan, stabil, dan terbaca semua pengunjung.

Section Images tuntas — media berikutnya membawa unsur lain ke halaman: suara dan video pada Section Audio dan Video.