Label dan alternatif teks

Rob Dodson

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

Ketika nama elemen digabungkan dengan peran elemen, hal ini memberikan konteks pengguna sehingga mereka dapat memahami jenis elemen apa yang berinteraksi dengan elemen tersebut dan cara elemen tersebut dinyatakan di halaman. Jika tidak ada nama, pembaca layar hanya membacakan peran elemen tersebut. Bayangkan mencoba menavigasi halaman dan mendengarkan, "tombol", "kotak centang", "gambar" tanpa konteks tambahan. Inilah sebabnya mengapa pelabelan dan alternatif teks sangat penting untuk pengalaman yang baik dan mudah diakses.

Memeriksa nama elemen

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

  1. Klik kanan elemen, lalu pilih Periksa. Tindakan ini akan membuka panel Elements DevTools.
  2. Di panel Elements, cari panel Accessibility. Kode ini mungkin tersembunyi di balik simbol ».
  3. Di dropdown Computed Properties, cari properti Name.
Panel aksesibilitas DevTools yang menampilkan nama yang dihitung untuk sebuah tombol.

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

Periksa apakah ada 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 yang dapat diakses dan link ke 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 Elemen bentuk label

Memberi label pada dokumen dan bingkai

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

Misalnya, pada halaman di bawah ini terdapat judul "Mary's Maple Bar Fast-Baking Recipe":

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

Demikian pula, 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 frame dan mengumumkan peran elemen—"frame"—dan nama yang dapat diakses, yang disediakan oleh atribut title. Hal ini memungkinkan pengguna memutuskan apakah ingin memasuki frame atau mengabaikannya.

Menyertakan alternatif teks untuk gambar dan objek

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

Menulis teks alt yang baik memang sedikit mudah, tetapi ada beberapa panduan yang dapat Anda ikuti:

  1. Menentukan apakah gambar memberikan konten yang biasanya sulit dicapai dengan membaca teks di sekitarnya.
  2. Jika demikian, sampaikan konten sesingkat mungkin.

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

Gambar yang digabungkan dalam link harus menggunakan atribut alt img untuk mendeskripsikan tempat yang akan dibuka 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 yang disematkan

Elemen <object>, yang biasanya digunakan untuk sematan seperti Flash, PDF, atau ActiveX, juga harus berisi teks alternatif. Serupa dengan gambar, teks ini ditampilkan jika elemen gagal dirender. Teks alternatif masuk ke 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 penting bagi pengalaman situs, dan keduanya harus memiliki nama yang mudah diakses.

Tombol

Elemen button selalu mencoba menghitung nama yang dapat diakses menggunakan konten teksnya. Untuk tombol yang bukan bagian dari form, Anda mungkin hanya perlu menulis tindakan yang jelas karena konten teks adalah satu-satunya yang Anda butuhkan untuk membuat nama yang dapat diakses dengan baik.

<button>Book Room</button>

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

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

Tombol ikon rata kiri.

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

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

Mirip dengan tombol, link pada dasarnya mendapatkan nama yang dapat diakses dari konten teksnya. Trik yang bagus saat membuat link adalah dengan memasukkan bagian teks yang paling bermakna ke dalam link itu sendiri, bukan 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 bagi pembaca layar yang menawarkan pintasan untuk mencantumkan semua link di halaman. Jika link penuh dengan teks pengisi yang berulang, pintasan ini akan menjadi kurang berguna:

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

Elemen formulir label

Ada dua cara untuk mengaitkan label dengan elemen formulir seperti kotak centang. Kedua metode tersebut menyebabkan teks label juga menjadi target klik untuk kotak centang, yang juga berguna bagi pengguna mouse atau layar sentuh. Untuk mengaitkan label dengan elemen:

  • 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 status dicentang, dan diberi nama "Menerima penawaran promosi?" seperti dalam contoh VoiceOver di bawah ini:

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

TODO: DevSite - Pikirkan dan Periksa penilaian