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:
- Klik kanan elemen, lalu pilih Periksa. Tindakan ini akan membuka panel Elements DevTools.
- Di panel Elements, cari panel Accessibility. Kode ini mungkin tersembunyi
di balik simbol
»
. - Di dropdown Computed Properties, cari properti Name.
![](https://web.dev/static/articles/labels-and-text-alternatives/image/38c68DmamTCqt2LFxTmu.png?authuser=6&hl=id)
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:
- Menentukan apakah gambar memberikan konten yang biasanya sulit dicapai dengan membaca teks di sekitarnya.
- 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 sebagai link dan input
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>
Memberi label tombol dan link
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>
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:
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>
Link
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".
Check out our guide to web performance <a href="/guide">here</a>.
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 'di sini'.](https://web.dev/static/articles/labels-and-text-alternatives/image/voiceovers-links-menu-fi-ded4907601b74.jpg?authuser=6&hl=id)
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 lihatid
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 'Terima penawaran promosi?'](https://web.dev/static/articles/labels-and-text-alternatives/image/voiceover-text-output-sho-06b78b7590326.png?authuser=6&hl=id)
TODO: DevSite - Pikirkan dan Periksa penilaian