Gambar yang dapat diakses mungkin tampak seperti topik yang mudah pada pandangan pertama—Anda menambahkan beberapa "teks alternatif" ke gambar, dan selesai. Namun, topiknya lebih bernuansa daripada yang dipikirkan sebagian orang. Di bagian ini, kita akan membahas:
- Cara memperbarui kode agar 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 tersebut akan berada, dan cara penggunaannya. Mengajukan pertanyaan-pertanyaan ini kepada diri Anda sendiri dapat membantu Anda menentukan cara terbaik untuk menyampaikan informasi kepada seseorang yang menggunakan teknologi pendukung (AT), seperti pembaca layar.
Anda mungkin bertanya pada diri sendiri:
- Apakah gambar penting untuk memahami konteks fitur atau halaman?
- Jenis informasi apa yang coba disampaikan oleh gambar tersebut?
- Apakah gambar sederhana atau rumit?
- Apakah gambar tersebut membangkitkan emosi atau mendorong pengguna untuk bertindak?
- Atau, apakah gambar tersebut hanya "pemanis mata" visual tanpa tujuan yang sebenarnya?
Diagram alur visual, seperti pohon keputusan gambar, dapat membantu Anda memutuskan kategori gambar Anda.
Coba sembunyikan gambar di situs atau aplikasi web Anda menggunakan ekstensi browser atau metode lainnya. Kemudian, tanyakan pada diri Anda: "Apakah saya memahami konten yang tersisa?" Jika jawabannya adalah ya, kemungkinan besar itu adalah gambar dekoratif. Jika tidak, gambar tersebut bersifat informatif dan diperlukan secara kontekstual. Setelah Anda menentukan tujuan gambar, Anda dapat menentukan cara paling akurat untuk membuat kode gambar tersebut.
Gambar dekoratif
Gambar dekoratif adalah elemen visual yang tidak menambahkan konteks atau informasi tambahan yang memungkinkan pengguna lebih memahami konteks. Gambar dekoratif bersifat tambahan dan dapat memberikan gaya daripada substansi.
Jika Anda memutuskan bahwa gambar bersifat dekoratif, gambar tersebut harus disembunyikan secara terprogram dari AT. Saat Anda memprogram gambar agar disembunyikan, hal ini memberi sinyal kepada AT bahwa gambar tidak diperlukan untuk memahami konten, konteks, atau tindakan halaman. Ada banyak cara untuk menyembunyikan gambar, termasuk menggunakan alternatif teks 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 yang kosong atau null berbeda dengan atribut teks alternatif yang tidak ada. Jika atribut teks alternatif tidak ada, AT dapat membacakan nama file atau konten di sekitarnya untuk memberikan informasi lebih lanjut tentang gambar kepada pengguna.
Peran ditetapkan ke presentation atau none
Peran yang ditetapkan ke
presentation atau none
menghapus semantik elemen dari eksposur ke hierarki aksesibilitas.
Sementara itu, aria-hidden= "true"
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 dengan CSS, pembaca layar tidak dapat mendeteksi file gambar. Pastikan Anda ingin menyembunyikan gambar sebelum menerapkan metode ini.
Gambar informatif
Gambar informatif adalah gambar yang menyampaikan konsep, ide, atau emosi. Gambar informatif mencakup foto objek di dunia nyata, ikon penting, gambar sederhana, dan gambar teks.
Jika gambar Anda informatif, Anda harus menyertakan teks alternatif terprogram yang menjelaskan tujuan gambar tersebut. Deskripsi gambar alternatif—sering disingkat sebagai "teks alt"—memberi pengguna AT lebih banyak konteks tentang gambar dan membantu mereka lebih memahami pesan atau maksud gambar.
Anda dapat menambahkan deskripsi alternatif ke
elemen <img>
dengan menyertakan atribut alt. Hal ini berlaku untuk semua jenis file, termasuk JPG, PNG, atau 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 lebih memperhatikan aksesibilitas. SVG dikodekan secara semantik, sehingga AT melewatinya secara default.
Jika SVG adalah gambar dekoratif, tidak masalah—AT akan mengabaikannya sesuai keinginan. Namun, jika SVG Anda adalah gambar informatif, tambahkan ARIA
role="img" ke elemen, sehingga AT 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 perlu mendeskripsikan tindakan gambar, bukan aspek visual.
Dalam contoh logo, gambar tersebut informatif dan dapat ditindaklanjuti karena merupakan gambar yang menyampaikan informasi dan berfungsi 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 pada gambar adalah melalui teks yang tersembunyi secara visual. Saat Anda menggunakan metode ini, teks dibaca oleh pembaca layar karena berada di DOM, tetapi disembunyikan secara visual dengan bantuan CSS kustom.
Anda dapat melihat dari cuplikan kode bahwa "Buka halaman beranda" adalah judul wrapper, dan teks alternatif gambar adalah "Kumbang Cantik untuk Halaman Anda". 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 kompleks sering kali memerlukan penjelasan lebih lanjut daripada gambar dekoratif, informatif, atau fungsional. Hal ini memerlukan deskripsi alternatif pendek dan panjang untuk menyampaikan pesan lengkap. Gambar kompleks mencakup infografis, peta, grafik/diagram, dan ilustrasi kompleks.
Seperti jenis gambar lainnya, ada berbagai metode yang dapat Anda gunakan untuk menambahkan deskripsi alternatif ke gambar 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 pada gambar adalah dengan menautkan ke resource atau menyediakan 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, belajar, 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 lebih panjang 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 secara semantik mengelompokkan elemen, sehingga membentuk
asosiasi 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 saja tidak cukup. Teks juga harus bermakna. Misalnya, jika gambar Anda menampilkan sekawanan kumbang koksi yang sedang mengunyah daun semak mawar kesayangan Anda, tetapi teks alternatifnya hanya "kumbang", apakah itu akan menyampaikan pesan dan maksud gambar secara utuh? Tentu saja tidak.
Deskripsi alternatif harus menangkap sebanyak mungkin informasi visual yang relevan dan ringkas. Meskipun tidak ada batasan jumlah karakter yang dapat dibaca pembaca layar, sebaiknya batasi teks alternatif Anda hingga 150 karakter atau kurang untuk menghindari kelelahan pembaca. Jika perlu menambahkan konteks tambahan pada gambar, Anda dapat menggunakan salah satu pola gambar kompleks, menambahkan teks keterangan, atau menjelaskan lebih lanjut gambar dalam salinan utama.
Beberapa praktik terbaik teks alternatif tambahan meliputi:
- Hindari penggunaan kata-kata seperti "gambar" atau "foto" dalam deskripsi, karena pembaca layar akan mengidentifikasi jenis file ini untuk Anda.
- Saat memberi nama gambar, buatlah seakurat dan sekonsisten mungkin. Nama gambar adalah pengganti jika teks alternatif tidak ada atau diabaikan.
- Hindari penggunaan karakter non-alfa (misalnya, #, 9, &) dan gunakan tanda hubung di antara kata, bukan garis bawah dalam nama gambar atau teks alternatif Anda.
- Gunakan tanda baca yang tepat jika memungkinkan. Tanpa tanda itu, 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 menguntungkan siapa pun—orang yang menggunakan pembaca layar akan merasa terganggu, dan algoritma mesin telusur akan memberikan penalti kepada Anda.