Gambar

Gambar yang dapat diakses mungkin tampak seperti topik sederhana secara sekilas—Anda menambahkan beberapa "teks alternatif" ke gambar, dan selesai. Tapi, topik ini 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 dengan pengguna dan di mana harus membagikannya.
• Cara lain untuk meningkatkan kualitas gambar Anda guna mendukung difabel.

Tujuan dan konteks gambar

Bahkan sebelum satu baris kode ditulis, Anda harus terlebih dahulu memikirkan titik gambar dan bagaimana gambar akan digunakan. Mengajukan pertanyaan kepada diri sendiri tentang tujuan dan konteks gambar dapat membantu Anda menentukan cara terbaik untuk menyampaikan informasi kepada seseorang menggunakan teknologi pendukung (AT) seperti pembaca layar.

Anda mungkin bertanya pada diri sendiri:

• Apakah gambar ini penting untuk memahami konteks fitur atau halaman?
• Jenis informasi apa yang ingin disampaikan oleh gambar?
• Apakah gambar tersebut sederhana atau rumit?
• Apakah gambar membangkitkan emosi atau mendorong pengguna untuk bertindak?
• Atau apakah gambar hanyalah visual "gambar visual" tanpa tujuan nyata?

Diagram alir visual, seperti pohon keputusan gambar, dapat membantu Anda menentukan kategori untuk gambar.

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

Gambar dekoratif

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

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

alt kosong atau null

Atribut teks alternatif kosong/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.

Peran ditetapkan ke presentation atau none

Peran yang ditetapkan ke presentation atau none akan menghapus semantik elemen dari eksposur ke hierarki 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 dengan CSS, pembaca layar tidak akan mendeteksi file gambar. Pastikan Anda ingin gambar disembunyikan sebelum menerapkan metode ini.

Gambar informatif

Gambar 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. Deskripsi gambar alternatif—sering disingkat "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 sederhana yang menggunakan elemen <img> dicapai dengan menyertakan atribut alt, apa pun jenis filenya, 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, hal ini bukan masalah—AT akan mengabaikannya sebagaimana mestinya. Namun, jika Anda memiliki gambar informatif, role="img" ARIA perlu 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 fungsi terhubung ke tindakan. Contoh gambar fungsional adalah logo yang tertaut ke halaman beranda, kaca pembesar yang digunakan sebagai tombol penelusuran, atau ikon media sosial yang mengarahkan Anda ke situs atau aplikasi yang berbeda.

Seperti gambar informatif, gambar fungsional harus menyertakan deskripsi alternatif untuk menginformasikan tujuan gambar kepada semua pengguna. Tidak seperti gambar informatif, setiap gambar fungsional harus menggambarkan tindakan gambar—bukan aspek visual.

Dalam contoh logo, gambar bersifat 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 persyaratan.

Salah satu cara untuk menambahkan deskripsi alternatif ke gambar adalah melalui teks yang tersembunyi secara visual. Jika Anda menggunakan metode ini, teks akan dibaca oleh pembaca layar karena berada dalam DOM, tetapi 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 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"></img>
   </a>
</div>

Gambar kompleks

Gambar kompleks sering kali memerlukan lebih banyak penjelasan daripada gambar dekoratif, informasi, atau fungsional. Diperlukan deskripsi alternatif yang 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 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 memberikan penjelasan tambahan ke gambar adalah dengan menautkan ke resource atau memberikan link pengalihan ke penjelasan yang lebih panjang nanti dalam halaman. Metode ini merupakan pilihan yang bagus, tidak hanya untuk pengguna AT, tetapi juga membantu penyandang disabilitas—seperti difabel kognitif, belajar, dan membaca—yang mungkin diuntungkan jika informasi gambar tambahan ini tersedia di layar, bukan tersembunyi di dalam kode.

Metode lain yang dapat Anda gunakan adalah menambahkan atribut aria-describedby ke elemen <img>. Anda dapat secara terprogram menautkan gambar ke ID yang berisi deskripsi yang lebih panjang. Metode ini menciptakan hubungan yang kuat antara gambar dan deskripsi lengkap. Deskripsi yang diperluas dapat ditampilkan di layar atau disembunyikan secara visual—tetapi pertimbangkan untuk membuatnya terlihat untuk mendukung lebih banyak orang.

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

Praktik terbaik teks alternatif

Tentu saja, menyertakan teks alternatif saja tidak cukup. Teks juga harus memiliki makna. Misalnya, jika gambar Anda adalah tentang kawanan kepik yang mengunyah daun mawar, tetapi teks alternatifnya adalah "bug", apakah itu akan menyampaikan pesan lengkap dan maksud gambar tersebut? Tentu saja tidak.

Deskripsi alternatif harus menangkap informasi visual yang relevan sebanyak mungkin 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 ke gambar, Anda dapat menggunakan salah satu pola gambar kompleks, menambahkan teks teks, atau menjelaskan gambar lebih lanjut dalam salinan utama.

Beberapa praktik terbaik teks alternatif tambahan mencakup:

• Hindari penggunaan kata seperti "gambar" atau "foto" dalam deskripsi karena pembaca layar akan mengidentifikasi jenis file tersebut untuk Anda.
• Saat memberi nama gambar Anda, gunakan nama yang konsisten dan seakurat mungkin. Nama gambar adalah penggantian saat teks alternatif tidak ada atau diabaikan.
• Hindari penggunaan karakter non-alfa (misalnya #, 9, &) dan gunakan tanda hubung di antara kata, bukan garis bawah di nama gambar atau teks alternatif.
• Gunakan tanda baca yang tepat jika memungkinkan. Tanpanya, deskripsi gambar akan terdengar seperti satu kalimat panjang, tanpa akhir, dan terus berlanjut.
• Tulis teks alternatif seperti manusia, bukan robot. Penjejalan kata kunci tidak bermanfaat bagi siapa pun—orang yang menggunakan pembaca layar akan merasa terganggu, dan algoritma mesin telusur akan menghukum Anda.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang ARIA dan HTML