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
Anda dapat dengan mudah memeriksa nama elemen yang dapat diakses menggunakan DevTools Chrome:
- Klik kanan pada elemen, lalu pilih Periksa. Tindakan ini akan membuka panel Elemen DevTools.
- Di panel Elemen, cari panel Aksesibilitas. Simbol ini mungkin disembunyikan
di balik simbol
». - Di dropdown Computed Properties, cari properti Name.
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 | Tombol dan link label |
| Link | Tombol dan link label |
| Elemen formulir | Memberi label 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 memiliki judul "Resep Kue Maple Bar Mary yang Cepat Dibuat":
<!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
dicoba disampaikan oleh gambar.
Menulis teks alt yang baik ada seninya, tetapi ada beberapa panduan
yang dapat Anda ikuti:
- Tentukan apakah gambar memberikan konten yang sulit diperoleh dari membaca teks di sekitarnya.
- Jika demikian, sampaikan konten seringkas mungkin.
Jika gambar berfungsi sebagai dekorasi dan tidak memberikan konten yang berguna,
Anda dapat memberinya atribut alt="" kosong untuk menghapusnya dari hierarki
aksesibilitas.
Gambar sebagai link dan input
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>
Memberi label pada tombol dan link
Tombol dan link sering kali sangat penting untuk pengalaman situs, dan kedua elemen tersebut 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, 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>
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 di editor What You See Is What You Get (WYSIWYG) untuk memformat teks biasanya hanya simbol grafis:
Saat menggunakan tombol ikon, sebaiknya beri nama eksplisit
yang 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>
Link
Serupa dengan tombol, link terutama mendapatkan nama yang dapat diakses dari konten teksnya. Trik yang bagus saat membuat link adalah menempatkan bagian teks yang paling bermakna ke dalam link itu sendiri, bukan kata 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 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:
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
forlabel dan lihatidelemen
<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:
TODO: DevSite - Penilaian Think and Check