Gambar yang dapat diakses mungkin tampak seperti topik yang cepat pada pandangan pertama—Anda menambahkan beberapa "teks alternatif" ke gambar, dan selesai. Namun, topik ini lebih bernuansa daripada yang dipikirkan sebagian orang. Di bagian ini, kita akan meninjau:
- Cara memperbarui kode untuk membuat gambar dapat diakses.
- Informasi apa yang harus dibagikan kepada pengguna dan tempat membagikannya.
- Cara tambahan untuk meningkatkan kualitas gambar Anda guna mendukung penyandang disabilitas.
Tujuan dan konteks gambar
Sebelum Anda menulis satu baris kode pun, pikirkan tujuan gambar titik, tempat gambar akan berada, dan cara gambar akan digunakan. Mengajukan pertanyaan ini kepada diri sendiri dapat membantu Anda menentukan cara terbaik untuk menyampaikan informasi kepada seseorang yang menggunakan teknologi pendukung (AT), seperti pembaca layar.
Anda mungkin bertanya kepada diri sendiri:
- Apakah gambar penting untuk memahami konteks fitur atau halaman?
- Jenis informasi apa yang ingin disampaikan oleh gambar?
- Apakah gambar tersebut sederhana atau kompleks?
- Apakah gambar tersebut memicu emosi atau mendorong pengguna untuk bertindak?
- Atau apakah gambar tersebut hanya "pemanis mata" visual tanpa tujuan yang sebenarnya?
Coba sembunyikan gambar di situs atau aplikasi web Anda menggunakan ekstensi browser atau metode lainnya. Kemudian tanyakan kepada diri Anda: "Apakah saya memahami konten yang tersisa?" Jika jawabannya ya, kemungkinan besar gambar tersebut adalah gambar dekoratif. Jika tidak, gambar tersebut bersifat informatif dan diperlukan secara kontekstual. Setelah menentukan tujuan gambar, Anda dapat menentukan cara paling akurat untuk membuat kodenya.
Gambar dekoratif
Gambar dekoratif adalah elemen visual yang tidak menambahkan konteks atau informasi tambahan yang memungkinkan pengguna memahami konteks dengan lebih baik. Gambar dekoratif bersifat tambahan dan mungkin memberikan gaya, bukan substansi.
Jika Anda memutuskan bahwa gambar bersifat dekoratif, gambar tersebut harus disembunyikan secara terprogram dari AT. Saat Anda memprogram gambar agar disembunyikan, hal ini akan memberi sinyal kepada AT bahwa gambar tersebut tidak diperlukan untuk memahami konten, konteks, atau tindakan halaman. Ada banyak cara untuk menyembunyikan gambar, termasuk menggunakan teks alternatif kosong atau null, menerapkan ARIA, atau menambahkan gambar sebagai latar belakang CSS. Berikut beberapa contoh cara menyembunyikan gambar dekoratif dari pengguna.
alt kosong atau null
Atribut teks alternatif kosong atau null berbeda dengan atribut teks alternatif yang tidak ada. Jika atribut teks alternatif tidak ada, AT mungkin akan membacakan nama file atau konten di sekitarnya untuk memberikan informasi lebih lanjut kepada pengguna tentang gambar tersebut.
Peran ditetapkan ke presentation atau none
Peran yang ditetapkan ke
presentation atau none
akan menghapus semantik elemen dari eksposur ke pohon aksesibilitas.
Sementara itu, aria-hidden= "true"
akan menghapus seluruh elemen—dan semua turunannya—dari
API aksesibilitas.
<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">
Gunakan aria-hidden dengan hati-hati karena dapat menyembunyikan elemen yang tidak ingin Anda sembunyikan.
Gambar di CSS
Saat Anda menambahkan gambar latar belakang dengan CSS, pembaca layar tidak dapat mendeteksi file gambar. Pastikan Anda ingin gambar tersebut disembunyikan sebelum menerapkan metode ini.
Gambar informatif
Gambar informatif adalah gambar yang menyampaikan konsep, ide, atau emosi. Gambar informatif mencakup foto objek dunia nyata, ikon penting, gambar sederhana, dan gambar teks.
Jika gambar Anda bersifat informatif, Anda harus menyertakan teks alternatif terprogram yang menjelaskan tujuan gambar. Deskripsi gambar alternatif—sering disingkat sebagai "teks alternatif"—memberikan lebih banyak konteks kepada pengguna AT tentang gambar dan membantu mereka memahami pesan atau maksud gambar dengan lebih baik.
Deskripsi alternatif untuk elemen ditambahkan dengan menyertakan atribut, terlepas dari jenis file yang ditujukannya, seperti , , , dan lainnya.<img>alt.jpg.png.svg
<img src=".../Ladybug_Swarm.jpg" alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">
Namun, saat menggunakan elemen <svg> secara inline, Anda harus memperhatikan aksesibilitas.
Pertama, karena SVG dikodekan secara semantik, AT akan melewatinya secara default.
Jika Anda memiliki gambar dekoratif, hal ini tidak menjadi masalah—AT akan mengabaikannya seperti yang diharapkan. Namun, jika Anda memiliki gambar informatif, ARIA role="img"
harus ditambahkan ke pola agar AT dapat mengenalinya sebagai gambar.
Kedua, elemen <svg> tidak menggunakan atribut alt, sehingga
metode coding yang berbeda harus
digunakan untuk menambahkan deskripsi alternatif ke gambar informatif Anda.
<svg role="img" ...>
<title>Cartoon drawing of a red, black, and gray ladybug.</title>
</svg>
Gambar fungsional
Gambar fungsional terhubung ke tindakan. Contoh gambar fungsional adalah logo yang ditautkan ke halaman beranda, kaca pembesar yang digunakan sebagai tombol penelusuran, atau ikon media sosial yang mengarahkan Anda ke situs atau aplikasi lain.
Seperti gambar informatif, gambar fungsional harus menyertakan deskripsi alternatif untuk memberi tahu semua pengguna tentang tujuannya. Tidak seperti gambar informatif, setiap gambar fungsional harus menjelaskan tindakan gambar—bukan aspek visual.
Dalam contoh logo, gambar tersebut bersifat informatif dan dapat ditindaklanjuti karena merupakan gambar yang menyampaikan informasi dan berperilaku sebagai link. Dalam kasus seperti ini, Anda dapat menambahkan deskripsi alternatif ke setiap elemen—tetapi hal ini tidak wajib.
Salah satu cara untuk menambahkan deskripsi alternatif ke gambar adalah melalui teks yang disembunyikan secara visual. Saat Anda menggunakan metode ini, teks akan dibaca oleh pembaca layar karena berada di DOM, tetapi teks tersebut disembunyikan secara visual dengan bantuan CSS kustom.
Anda dapat melihat dari cuplikan kode bahwa "Navigate to the homepage" adalah judul wrapper, dan teks alternatif gambar adalah "Lovely Ladybugs for your Lawn". Saat Anda mendengarkan kode logo dengan pembaca layar, Anda akan mendengar visual dan tindakan yang disampaikan dalam satu gambar.
<div title="Navigate to the homepage">
<a href="/">
<img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
</a>
</div>
Gambar yang kompleks
Gambar yang kompleks sering kali memerlukan penjelasan lebih lanjut daripada gambar dekoratif, informatif, atau fungsional. Gambar tersebut memerlukan deskripsi alternatif singkat dan panjang untuk menyampaikan pesan lengkap. Gambar yang kompleks mencakup infografis, peta, grafik/diagram, dan ilustrasi yang kompleks.
Seperti jenis gambar lainnya, ada berbagai metode yang dapat Anda gunakan untuk menambahkan deskripsi alternatif ke gambar yang kompleks.
<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug.">
<a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>
Salah satu cara untuk menambahkan penjelasan tambahan ke gambar adalah dengan menautkan ke resource atau memberikan link lompatan ke penjelasan yang lebih panjang di halaman. Metode ini adalah pilihan yang baik, tidak hanya untuk pengguna AT, tetapi juga membantu penyandang disabilitas—seperti disabilitas kognitif, pembelajaran, dan membaca—yang mungkin mendapatkan manfaat dari informasi gambar tambahan ini yang tersedia di layar, bukan tersembunyi dalam kode.
Metode lain yang dapat Anda gunakan adalah menambahkan atribut aria-describedby ke elemen
<img>. Anda dapat menautkan gambar secara terprogram ke ID yang berisi deskripsi yang lebih panjang. Metode ini membuat hubungan yang kuat antara gambar dan deskripsi lengkap. Deskripsi yang diperluas dapat ditampilkan di layar atau disembunyikan secara visual—tetapi sebaiknya tetap terlihat untuk mendukung lebih banyak orang.
Cara lain untuk mengelompokkan deskripsi alternatif singkat dengan deskripsi yang lebih panjang adalah dengan
menggunakan elemen<figure> dan <figcaption>. Elemen ini bertindak serupa dengan aria-describedby karena mengelompokkan elemen secara semantik, sehingga membentuk hubungan yang lebih kuat antara gambar dan deskripsinya.
Menambahkan ARIA role="group" memastikan kompatibilitas mundur dengan browser web lama
yang tidak mendukung semantik elemen <figure>.
Praktik terbaik teks alternatif
Tentu saja, menyertakan teks alternatif tidaklah cukup. Teks tersebut juga harus bermakna. Misalnya, jika gambar Anda adalah tentang sekawanan kepik yang mengunyah daun semak mawar kesayangan Anda, tetapi teks alternatif Anda berbunyi "serangga", apakah teks tersebut akan menyampaikan pesan dan maksud gambar sepenuhnya? Tentu saja tidak.
Deskripsi alternatif harus menangkap informasi visual relevan sebanyak mungkin dan harus ringkas. Meskipun tidak ada batasan jumlah karakter yang dapat dibaca oleh pembaca layar, biasanya disarankan untuk membatasi teks alternatif Anda hingga 150 karakter atau kurang untuk menghindari kelelahan pembaca. Jika Anda perlu menambahkan konteks tambahan ke gambar, Anda dapat menggunakan salah satu pola gambar yang kompleks, menambahkan teks keterangan, atau menjelaskan lebih lanjut gambar tersebut dalam salinan utama.
Beberapa praktik terbaik teks alternatif tambahan mencakup:
- Hindari penggunaan kata-kata seperti "gambar" atau "foto" dalam deskripsi, karena pembaca layar akan mengidentifikasi jenis file ini untuk Anda.
- Saat memberi nama gambar, usahakan untuk konsisten dan akurat. Nama gambar adalah pengganti jika teks alternatif tidak ada atau diabaikan.
- Hindari penggunaan karakter non-alfa (misalnya, #, 9, &) dan gunakan tanda hubung antar-kata, bukan garis bawah dalam nama gambar atau teks alternatif Anda.
- Gunakan tanda baca yang tepat jika memungkinkan. Tanpa tanda baca yang tepat, deskripsi gambar akan terdengar seperti satu kalimat panjang yang tidak pernah berakhir.
- Tulis teks alternatif seperti manusia, bukan robot. Penggunaan kata kunci yang berlebihan tidak akan menguntungkan siapa pun—orang yang menggunakan pembaca layar akan merasa terganggu, dan algoritma mesin telusur akan memberikan penalti kepada Anda.