Gambar Anda Mungkin Tidak Dekoratif

Atribut alt elemen img dapat menjadi "nulled", yang merupakan tindakan menyetelnya ke string kosong alih-alih deskripsi teks. Membatalkan deskripsi alt berarti tidak ada informasi antara tanda kutip pembukaan dan penutupan. Jika ada ruang kosong, itu tidak akan dianggap batal:

  
<img alt="" src="/images/cat.jpg" />

  
<img alt=" " src="/images/dog.jpg" />

Apa Artinya "Dekoratif"?

Meniadakan gambar menunjukkan bahwa itu hanya untuk tujuan dekoratif.

Dalam konteks ini, dekoratif berarti bahwa gambar tidak secara visual mengkomunikasikan informasi yang penting untuk memahami tujuan halaman atau tampilan, dan mengapa gambar dimasukkan sebagai bagian dari itu.

Dekoratif bukan berarti gambar mengandung konten yang dianggap sebagai hiasan.

“

Misalnya, situs web yang menjual wallpaper ingin memiliki deskripsi alternatif untuk sampel wallpaper:

 <a href="/products/umbrella?variant=73849024783051"> <img alt="Small red and white illustrated umbrellas on a teal background." src="/images/73849024783051.png" /> </a>

Contoh lain dapat berupa situs web museum, di mana menyajikan karya dari koleksi mereka dapat mengambil manfaat dari deskripsi alternatif dan keterangan:

 <figure role="figure" aria-label="View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds."> <img alt="A tile painting, composed of 33 Delft tiles forming a view of the port of Rotterdam. Set in a modern mahogany frame, with gilded inscription on bottom border." src="/collection/w0895/2005-1057.png" /> <figcaption> View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds. </figcaption> </figure>

Pastikan deskripsi alternatif Anda juga menyertakan tanda baca!

Mengapa Anda Ingin Membuat Gambar Dekoratif?

Teknologi bantu akan melewati gambar yang dibatalkan dan tidak mengumumkan kehadirannya. Alasan keinginan untuk melakukan ini sebagian besar bersifat historis.

Teknik Tata Letak Lama

Teknik pengembangan web awal mengandalkan gambar untuk membantu mereka menjamin tata letak yang konsisten di berbagai sistem operasi, browser, dan versi browser. Contoh paling umum dari hal ini adalah spacer.gif , piksel transparan 1×1 yang direntangkan ke berbagai ukuran untuk mendorong konten ke tempatnya.

Teknik ini biasanya akan menggunakan banyak gambar spasi untuk membuat desain visual. Tanpa cara untuk membungkam kehadiran mereka, gambar-gambar ini akan mengacaukan apa yang diumumkan oleh teknologi bantu dan membuatnya membingungkan serta memakan waktu untuk menavigasi dan mengambil tindakan pada konten web.

Teknik Desain Lama

Sebelum ada properti CSS seperti box-shadow , pengembang harus menggunakan teknik yang memotong gaya dekoratif agar berfungsi dengan konten dengan tinggi atau lebar tak tentu. Teknik ini disebut 9-slice scaling, istilah yang mengacu pada 9 bagian konten yang perlu Anda buat.

Sama seperti gambar spacer, penskalaan 9-irisan menggunakan banyak gambar untuk menciptakan efek visual yang diinginkan. Dan, seperti gambar spacer, satu-satunya cara untuk menghilangkan kekacauan yang dibuat oleh gambar-gambar ini adalah dengan menandainya sebagai dekoratif.

Pengumuman Berlebihan

Ada skenario langka di mana gambar diulang pada halaman atau tampilan, dan penempatan berulang itu tidak menyediakan konteks tambahan apa pun. Anda harus berhati-hati dalam menandai dekoratif gambar dalam situasi ini, karena kurangnya pengumuman untuk gambar yang terlihat dapat membingungkan bagi seseorang dengan gangguan penglihatan yang menggunakan pembaca layar.

Ikon Tambahan

Tautan dan tombol yang menggunakan ikon harus selalu memiliki nama yang dapat diakses yang mengkomunikasikan fungsionalitas. Jika desain juga menyertakan ikon, desain ikon tidak perlu dikomunikasikan.

 <button type="button"> <img src="icon-print.svg" alt="" /> Print </button>

Jika komponen hanya menggunakan ikon, gambar itu sendiri harus digunakan untuk membuat nama yang dapat diakses:

 <button type="button"> <img src="icon-print.svg" alt="Print." /> </button>

Perhatikan bahwa label teks yang terlihat adalah teknik yang disukai. Label teks yang terlihat dapat diterjemahkan dan mengkomunikasikan tujuan secara lebih langsung.

Penggunaan Kontemporer

Tata letak dan teknik gaya CSS modern berarti bahwa penempatan gambar sekarang sangat disengaja. Ini berarti bahwa jika sebuah gambar digunakan, kemungkinan besar akan membutuhkan deskripsi alternatif.

Deskripsi alternatif harus mengomunikasikan tujuan gambar . Itu termasuk konten gambar, tetapi mungkin juga termasuk alasan itu disertakan dalam konteks pada halaman atau tampilan itu telah disertakan. Ini adalah salah satu alasan mengapa deskripsi gambar alternatif tidak akan pernah bisa sepenuhnya otomatis.

Cara Lain Menampilkan Gambar

Ada beberapa cara lain untuk menampilkan gambar pada halaman atau tampilan. Penting untuk memastikan deskripsi alternatif diberikan jika gambar berisi konten yang bermakna — terlepas dari teknik yang digunakan.

Elemen picture

Elemen picture tidak memiliki peran implisit, artinya kehadirannya tidak mengkomunikasikan tujuan apa pun kepada teknologi bantu. Ini berarti tidak dapat digunakan untuk menggambarkan secara semantik keberadaan "gambar".

Elemen picture adalah wadah untuk elemen source dan img . Gunakan atribut alt elemen img untuk memberikan deskripsi alternatif untuk elemen picture induk.

 <a href="/product/9091866/color/3"> <picture> <source type="image/avif" /> <img alt="A black ankle-length boot with metal eyelets, yellow stitching, and a padded collar and tongue." src="9091866-3.png" /> </picture> </a>

Gambar Latar Belakang

Kita dapat menggunakan CSS untuk mendeklarasikan gambar sebagai latar belakang pada elemen HTML. Ini paling sering digunakan untuk menambahkan rasa tekstur pada desain.

Namun, teknik populer lainnya adalah menggunakan gambar background-image untuk menempatkan gambar sedemikian rupa sehingga pengembang tidak akan memiliki kendali atas ukuran gambar yang diunggah seseorang. background-image , dikombinasikan dengan properti lain seperti background-size akan memastikan bahwa konten dengan ukuran yang tidak diketahui ditampilkan tanpa merusak desain.

Dalam skenario seperti ini, teman lama kita spacer.gif mungkin bisa membantu lagi!

SVG sebaris

SVG dapat ditampilkan dengan menautkannya melalui atribut src di elemen img , atau dengan menempatkan kode SVG sebaris di halaman atau tampilan.

Jika Anda menggunakan SVG sebaris, Anda perlu menggunakan elemen title (dan berpotensi desc ) SVG sebagai ganti atribut alt .

 <svg role="img" aria-labelledby="icon-bookmark-desc" xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <title>Bookmark.</title> <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/> </svg>

Pengalaman Setara

Dalam desain dan pengembangan web modern, menampilkan gambar adalah tindakan yang sangat disengaja. Deskripsi alternatif memungkinkan kami menjelaskan konten gambar, dan dengan melakukan itu, mengomunikasikan mengapa gambar itu layak disertakan .

Hanya karena sebuah gambar menampilkan sesuatu yang fantastis bukan berarti gambar itu tidak layak untuk dideskripsikan. Mengumumkan kehadirannya memastikan bahwa siapa pun, terlepas dari kemampuan atau keadaannya, dapat sepenuhnya memahami pengalaman digital Anda.

Bacaan Lebih Lanjut tentang SmashingMag:

• Aksesibilitas Di Chrome DevTools
• Panduan Lengkap Untuk Perkakas Aksesibilitas
• Gambar yang Dapat Diakses Saat Paling Penting
• SVG yang Dapat Diakses: Pola Sempurna Untuk Pengguna Pembaca Layar
• Mendesain Dengan Gerakan yang Dikurangi Untuk Sensitivitas Gerakan
• Baca lebih banyak artikel tentang aksesibilitas, kegunaan, dan UX.