Label dan alternatif teks

Rob Dodson

Agar pembaca layar dapat menampilkan UI lisan kepada pengguna, elemen yang bermakna harus memiliki label atau alternatif teks yang tepat. Alternatif label atau teks memberi elemen nama yang dapat diakses, salah satu properti utama untuk mengekspresikan semantik elemen dalam hierarki aksesibilitas.

Jika nama elemen digabungkan dengan peran elemen, hal ini akan memberikan konteks kepada pengguna sehingga mereka dapat memahami jenis elemen yang mereka gunakan dan cara elemen tersebut direpresentasikan di halaman. Jika tidak ada nama, pembaca layar hanya akan mengumumkan peran elemen. Bayangkan Anda mencoba membuka halaman dan mendengar, "tombol", "kotak centang", "gambar" tanpa konteks tambahan. Itulah sebabnya pelabelan dan alternatif teks sangat penting untuk pengalaman yang baik dan mudah diakses.

Memeriksa nama elemen

Sangat mudah untuk memeriksa nama elemen yang bisa diakses menggunakan Chrome DevTools:

  1. Klik kanan pada elemen, lalu pilih Periksa. Tindakan ini akan membuka panel Elemen DevTools.
  2. Di panel Elemen, cari panel Aksesibilitas. Simbol ini mungkin disembunyikan di balik simbol ».
  3. Di dropdown Computed Properties, cari properti Nama.
Panel aksesibilitas DevTools yang menampilkan nama yang dihitung untuk tombol.

Baik Anda melihat img dengan teks alt atau input dengan label, semua skenario ini akan menghasilkan hasil yang sama: memberi elemen nama yang dapat diakses.

Memeriksa nama yang tidak ada

Ada berbagai cara untuk menambahkan nama yang dapat diakses ke elemen, bergantung pada jenisnya. Tabel berikut mencantumkan jenis elemen paling umum yang memerlukan nama dan link yang dapat diakses untuk penjelasan cara menambahkannya.

Jenis elemen Cara menambahkan nama
Dokumen HTML Memberi label pada dokumen dan bingkai
Elemen <frame> atau <iframe> Memberi label pada dokumen dan bingkai
Elemen gambar Sertakan alternatif teks untuk gambar dan objek
<input type="image"> elemen Sertakan alternatif teks untuk gambar dan objek
<object> elemen Sertakan alternatif teks untuk gambar dan objek
Tombol Memberi label pada tombol dan link
Link Memberi label pada tombol dan link
Elemen formulir Memberi label pada elemen formulir

Memberi label pada dokumen dan bingkai

Setiap halaman harus memiliki elemen title yang menjelaskan secara singkat isi halaman. Elemen title memberi halaman nama yang dapat diakses. Saat pembaca layar memasuki halaman, ini adalah teks pertama yang dibacakan.

Misalnya, halaman di bawah ini memiliki judul "Resep Cepat Saji Maple Bar Mary":

<!doctype html>
  <html lang="en">
    <head>
      <title>Mary's Maple Bar Fast-Baking Recipe</title>
    </head>
  <body>
    …
  </body>
</html>

Demikian pula, setiap elemen frame atau iframe harus memiliki atribut title:

<iframe title="An interactive map of San Francisco" src="…"></iframe>

Meskipun konten iframe dapat berisi elemen title internalnya sendiri, pembaca layar biasanya berhenti di batas bingkai dan mengumumkan peran elemen—"bingkai"—dan namanya yang dapat diakses, yang disediakan oleh atribut title. Hal ini memungkinkan pengguna memutuskan apakah mereka ingin memasuki bingkai atau mengabaikannya.

Menyertakan alternatif teks untuk gambar dan objek

img harus selalu disertai dengan atribut alt untuk memberi gambar nama yang dapat diakses. Jika gambar gagal dimuat, teks alt akan digunakan sebagai placeholder sehingga pengguna dapat memahami apa yang ingin disampaikan oleh gambar tersebut.

Menulis teks alt yang baik ada seninya, tetapi ada beberapa panduan yang dapat Anda ikuti:

  1. Tentukan apakah gambar menampilkan konten yang seharusnya sulit diperoleh dengan membaca teks di sekitarnya.
  2. Jika demikian, sampaikan konten sesingkat mungkin.

Jika gambar berfungsi sebagai dekorasi dan tidak memberikan konten yang bermanfaat, Anda dapat memberikan atribut alt="" kosong untuk menghapusnya dari hierarki aksesibilitas.

Gambar yang digabungkan dalam link harus menggunakan atribut alt img untuk menjelaskan tujuan pengguna jika mereka mengklik link:

<a href="https://en.wikipedia.org/wiki/Google">
  <img alt="Google's wikipedia page" src="google-logo.jpg">
</a>

Demikian pula, jika elemen <input type="image"> digunakan untuk membuat tombol gambar, elemen tersebut harus berisi teks alt yang menjelaskan tindakan yang terjadi saat pengguna mengklik tombol:

<form>
  <label>
    Username:
    <input type="text">
  </label>
  <input type="image" alt="Sign in" src="./sign-in-button.png">
</form>

Objek tersemat

Elemen <object>, yang biasanya digunakan untuk penyematan seperti Flash, PDF, atau ActiveX, juga harus berisi teks alternatif. Serupa dengan gambar, teks ini ditampilkan jika elemen gagal dirender. Teks alternatif berada di dalam elemen object sebagai teks biasa, seperti "Laporan tahunan" di bawah:

<object type="application/pdf" data="/report.pdf">
Annual report.
</object>

Tombol dan link sering kali sangat penting untuk pengalaman situs, dan kedua elemen tersebut harus memiliki nama yang baik dan mudah diakses.

Tombol

Elemen button selalu mencoba menghitung nama yang dapat diakses menggunakan konten teksnya. Untuk tombol yang bukan bagian dari form, menulis tindakan yang jelas sebagai konten teks mungkin adalah satu-satunya hal yang Anda perlukan untuk membuat nama yang mudah diakses.

<button>Book Room</button>

Formulir seluler dengan tombol &#39;Pesan Kamar&#39;.

Satu pengecualian umum untuk aturan ini adalah tombol ikon. Tombol ikon dapat menggunakan gambar atau font ikon untuk memberikan konten teks untuk tombol. Misalnya, tombol yang digunakan pada editor What You See Is What You Get (WYSIWYG) untuk memformat teks biasanya hanyalah simbol grafis:

Tombol ikon rata kiri.

Saat menangani tombol ikon, sebaiknya beri nama yang jelas dapat diakses menggunakan atribut aria-label. aria-label mengganti konten teks apa pun di dalam tombol, sehingga Anda dapat menjelaskan tindakan dengan jelas kepada siapa saja yang menggunakan pembaca layar.

<button aria-label="Left align"></button>

Serupa dengan tombol, link terutama mendapatkan nama yang dapat diakses dari konten teksnya. Trik yang bagus saat membuat link adalah menempatkan teks yang paling bermakna ke dalam link itu sendiri, bukan dengan kata pengisi seperti "Di Sini" atau "Baca Selengkapnya".

Tidak cukup deskriptif
Check out our guide to web performance <a href="/guide">here</a>.
Konten yang bermanfaat!
Check out <a href="/guide">our guide to web performance</a>.

Hal ini sangat membantu pembaca layar yang menawarkan pintasan untuk mencantumkan semua link di halaman. Jika link penuh dengan teks pengisi berulang, pintasan ini menjadi jauh lebih tidak berguna:

Menu link VoiceOver diisi dengan kata &#39;di sini&#39;.
Contoh VoiceOver, pembaca layar untuk macOS, yang menampilkan menu navigasi berdasarkan link.

Elemen formulir label

Ada dua cara untuk mengaitkan label dengan elemen formulir seperti kotak centang. Salah satu metode ini menyebabkan teks label juga menjadi target klik untuk kotak centang, sehingga juga berguna bagi pengguna mouse atau layar sentuh. Untuk mengaitkan label dengan elemen, Anda dapat:

  • Menempatkan elemen input di dalam elemen label
<label>
  <input type="checkbox">Receive promotional offers?</input>
</label>
  • Atau gunakan atribut for label dan lihat id elemen
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>

Jika kotak centang telah diberi label dengan benar, pembaca layar dapat melaporkan bahwa elemen memiliki peran kotak centang, dalam keadaan dicentang, dan dinamai "Receive promotional offers?" seperti dalam contoh VoiceOver di bawah:

Output teks VoiceOver yang menampilkan &#39;Menerima penawaran promosi?&#39;

TODO: DevSite - Penilaian Think and Check