Gambar

Gambar yang aksesibel mungkin tampak seperti topik sederhana secara sekilas—Anda menambahkan beberapa "alt text" gambar, dan selesai. Tapi, topiknya lebih bernuansa dari yang dipikirkan beberapa orang. Di bagian ini, kita akan meninjau:

• Cara memperbarui kode agar gambar dapat diakses.
• Informasi apa yang harus dibagikan kepada pengguna dan di mana harus membagikannya.
• Cara tambahan untuk meningkatkan kualitas gambar Anda guna mendukung penyandang disabilitas.

Tujuan dan konteks gambar

Bahkan sebelum menulis satu baris kode, Anda harus memikirkan poinnya terlebih dahulu dari gambar dan cara penggunaannya. Bertanya pada diri sendiri tentang tujuan dan konteks gambar dapat membantu Anda menentukan cara terbaik untuk menyampaikan informasi kepada seseorang yang menggunakan teknologi pendukung (AT) seperti pembaca layar.

Anda dapat bertanya pada diri sendiri:

• Apakah gambar penting untuk memahami konteks fitur atau halaman?
• Jenis informasi apa yang ingin disampaikan oleh gambar tersebut?
• Apakah gambar terlihat sederhana atau rumit?
• Apakah gambar memicu emosi atau mendorong pengguna untuk bertindak?
• Atau, apakah gambar sekadar "permen mata" secara visual tanpa tujuan yang jelas?

Sebuah diagram alir visual, seperti pohon keputusan image, dapat membantu Anda memutuskan kategori gambar Anda.

Coba sembunyikan gambar di situs atau aplikasi web Anda menggunakan ekstensi browser atau metode lainnya. Lalu tanyakan pada diri sendiri: "Apakah saya memahami konten yang tersisa?" Jika jawabannya ya, kemungkinan besar itu adalah gambar dekoratif. Jika tidak, gambar melainkan informatif dalam beberapa hal dan diperlukan secara kontekstual. Setelah Anda menentukan tujuan gambar, Anda dapat menentukan cara paling akurat untuk menulis kode untuk itu.

Gambar dekoratif

Gambar dekoratif adalah elemen visual yang tidak memberikan konteks atau informasi tambahan yang memungkinkan pengguna untuk lebih memahami konteks. Gambar dekoratif adalah pelengkap dan dapat memberikan gaya, bukan substansi.

Jika Anda memutuskan suatu gambar bersifat dekoratif, gambar harus disembunyikan secara terprogram dari AT. Ketika Anda memprogram gambar untuk disembunyikan, hal itu memberi sinyal ke AT bahwa gambar tidak diperlukan untuk memahami konten, konteks, atau tindakan halaman. Ada ada banyak cara untuk menyembunyikan gambar, termasuk menggunakan alternatif teks kosong/null, menerapkan ARIA, atau menambahkan gambar sebagai latar belakang CSS. Berikut adalah beberapa contoh cara menyembunyikan gambar dekoratif dari pengguna.

alt kosong atau null

Atribut teks alternatif kosong/null berbeda dengan alternatif yang tidak ada teks. Jika atribut teks alternatif tidak ada, AT mungkin membaca nama file atau konten di sekitarnya untuk memberikan informasi lebih lanjut kepada pengguna tentang gambar.

Peran ditetapkan ke presentation atau none

Peran ditetapkan ke presentation atau none menghapus semantik elemen dari eksposur terhadap aksesibilitas hierarki. Sementara itu, aria-hidden= "true" akan menghapus seluruh elemen—dan semua turunannya—dari Accessibility API.

<!-- 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 yang tidak ingin Anda sembunyikan.

Gambar di CSS

Saat Anda menambahkan gambar latar dengan CSS, pembaca layar tidak akan mendeteksi file gambar. Pastikan Anda ingin menyembunyikan gambar sebelum menerapkan metode ini.

Gambar informatif

Gambar yang informatif adalah gambar yang menyampaikan konsep, ide, atau emosi sederhana. Jenis gambar informatif mencakup foto objek di dunia nyata, ikon penting, gambar sederhana, dan gambar teks.

Jika gambar bersifat informatif, Anda harus menyertakan teks alternatif terprogram yang menjelaskan tujuan gambar tersebut. Deskripsi gambar alternatif—sering kali disingkat menjadi “alt text”—memberikan lebih banyak konteks tentang suatu gambar kepada pengguna AT dan membantu mereka lebih memahami pesan atau maksud dari suatu gambar.

Deskripsi alternatif yang sederhana menggunakan <img> elemen dapat dicapai dengan menyertakan atribut alt, apa pun jenis filenya yang dituju, seperti .jpg, .png, .svg, dan lainnya.

<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 perlu memperhatikan aksesibilitas.

Pertama, karena SVG dikodekan secara semantik, AT akan melewatinya secara default. Jika Anda memiliki gambar dekoratif, ini bukan masalah—AT akan mengabaikan sebagaimana mestinya. Namun, jika Anda memiliki gambar yang informatif, gunakan role="img" ARIA perlu ditambahkan ke pola agar AT dapat mengenalinya sebagai gambar.

Kedua, elemen <svg> tidak menggunakan atribut alt, jadi 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 merupakan terhubung dengan suatu tindakan. Contoh gambar yang fungsional adalah logo yang menautkan ke beranda, kaca pembesar yang digunakan sebagai tombol pencarian, atau media sosial ikon yang mengarahkan Anda ke situs web atau aplikasi lain.

Seperti gambar yang informatif, gambar fungsional harus menyertakan alternatif untuk menginformasikan semua pengguna tentang tujuan mereka. Tidak seperti gambar yang informatif, setiap gambar fungsional perlu menggambarkan tindakan gambar—bukan aspek visual.

Dalam contoh logo, gambar bersifat informatif dan dapat ditindaklanjuti karena keduanya gambar yang menyampaikan informasi dan berperilaku sebagai tautan. Dalam kasus seperti ini, Anda dapat menambahkan deskripsi alternatif ke setiap elemen—tetapi itu bukan persyaratan.

Salah satu cara untuk menambahkan deskripsi alternatif ke gambar adalah melalui fitur tersembunyi teks. Bila Anda menggunakan metode ini, teks akan dibaca oleh {i>screen reader<i} karena itu ada di DOM, namun secara visual disembunyikan dengan bantuan CSS khusus.

Anda dapat melihat dari cuplikan kode bahwa "Navigate to the homepage" adalah judul wrapper, dan teks alternatif gambarnya adalah "Kepik Indah untuk Halaman." Saat Anda mendengarkan kode logo dengan pembaca layar, Anda akan mendengar kedua visual dan aksi yang disampaikan dalam satu gambar.

<div title="Navigate to the homepage">
   <a href="/">
      <img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"></img>
   </a>
</div>

Gambar kompleks

Gambar yang kompleks sering kali memerlukan penjelasan lebih dari sekedar dekoratif, informatif, atau gambar fungsional. Cara ini membutuhkan alternatif baik jangka pendek maupun panjang deskripsi untuk menyampaikan pesan lengkap. Gambar yang kompleks mencakup infografis, peta, grafik/diagram, dan ilustrasi kompleks. Seperti yang lainnya jenis gambar, ada berbagai metode yang dapat Anda gunakan untuk menambahkan pada 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 sumber daya atau menyediakan tautan langsung ke penjelasan yang lebih panjang di laman tersebut. Metode ini adalah pilihan yang baik, tidak hanya untuk pengguna AT tetapi juga membantu orang-orang disabilitas—seperti kognitif, belajar, dan membaca disabilitas—yang mungkin mendapatkan manfaat dari memiliki informasi dengan mudah tersedia di layar dan tidak tersembunyi di antara 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 beserta deskripsi lengkap. Deskripsi yang diperluas dapat ditampilkan di layar atau tersembunyi secara visual—tetapi pertimbangkan untuk membuatnya tetap terlihat guna mendukung lebih banyak orang.

Salah satu cara lain untuk mengelompokkan deskripsi alternatif pendek dengan yang lebih panjang adalah dengan menggunakan elemen <figure> dan <figcaption> HTML5. Elemen-elemen ini berfungsi mirip dengan aria-describedby karena mengelompokkan elemen secara semantik, sehingga membentuk hubungan yang lebih kuat antara gambar dan deskripsinya. Menambahkan role="group" ARIA akan memastikan kompatibilitas mundur dengan browser web lama yang tidak mendukung semantik native elemen <figure>.

Praktik terbaik untuk teks alternatif

Tentu saja, menyertakan teks alternatif saja tidak cukup. Teks juga harus bermakna. Misalnya, jika gambar Anda tentang kawanan kepik yang sedang mengunyah daun semak mawar hadiah, tapi teks alternatif Anda bertuliskan "bugs", akan yang menyampaikan pesan dan maksud lengkap dari gambar? Tentu saja tidak.

Deskripsi alternatif perlu menangkap informasi visual yang relevan sebanyak dan ringkas. Meskipun tidak ada batasan jumlah karakter dalam dapat dibaca oleh {i>screen reader<i}, biasanya disarankan untuk membatasi teks alternatif Anda ke 150 karakter atau kurang agar pembaca tidak bosan. Jika Anda perlu menambahkan ke gambar, Anda dapat menggunakan salah satu pola gambar yang kompleks, teks keterangan, atau mendeskripsikan gambar lebih lanjut dalam teks utama.

Beberapa teks alternatif terbaik praktik meliputi:

• Hindari penggunaan kata-kata seperti "gambar dari" atau "foto dari" di deskripsi, karena {i>screen reader <i}akan mengidentifikasi jenis {i>file<i} ini untuk Anda.
• Berikan nama yang konsisten dan seakurat mungkin pada gambar Anda. Foto nama adalah penggantian bila teks alternatif hilang atau diabaikan.
• Hindari penggunaan karakter non-alfa (misalnya, #, 9, &) dan gunakan tanda hubung di antara kata-kata dan bukan garis bawah di nama gambar atau teks alternatif Anda.
• Gunakan tanda baca yang tepat bila memungkinkan. Tanpa label, deskripsi gambar akan terdengar seperti satu kalimat panjang, tidak pernah berakhir, dan terus berjalan.
• Tulis teks alternatif seperti manusia dan bukan robot. Penjejalan kata kunci melakukan tidak menguntungkan siapa pun—orang yang menggunakan pembaca layar akan kesal, dan algoritma mesin telusur akan menghukum Anda.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang ARIA dan HTML