Agar pembaca layar dapat menampilkan UI lisan kepada pengguna, elemen tersebut harus memiliki label atau alternatif teks yang tepat. Label atau teks alternatif memberi elemen name-nya yang dapat diakses, salah satu properti utama untuk mengekspresikan semantik elemen di hierarki aksesibilitas.
Ketika nama elemen digabungkan dengan peran elemen, ini memberikan konteks pengguna sehingga mereka dapat memahami jenis elemen apa yang mereka berinteraksi dan bagaimana menampilkannya di laman. Jika tidak ada nama, maka pembaca layar hanya mengucapkan peran elemen. Bayangkan mencoba menavigasi sebuah laman dan mendengar, "tombol," "kotak centang", "gambar" tanpa tambahan konteks tambahan. Inilah sebabnya mengapa pelabelan dan alternatif teks sangat penting untuk tujuan yang baik, yang mudah diakses.
Memeriksa nama elemen
Sangat mudah untuk memeriksa nama elemen yang bisa diakses menggunakan Chrome DevTools:
- Klik kanan elemen dan pilih Inspect. Tindakan ini akan membuka DevTools Panel elemen.
- Di panel Elemen, cari panel Aksesibilitas. Mungkin tersembunyi
di belakang simbol
». - Di dropdown Computed Properties, cari properti Nama.
Baik Anda melihat img dengan teks alt maupun input dengan
label, semua skenario ini menghasilkan hasil yang sama: memberikan
nama yang mudah diakses.
Periksa nama yang tidak ada
Ada berbagai cara untuk menambahkan nama yang dapat diakses ke elemen, tergantung pada jenisnya. Tabel berikut mencantumkan jenis elemen yang paling umum yang memerlukan nama aksesibilitas dan link ke penjelasan tentang 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 | Menyertakan alternatif teks untuk gambar dan objek |
<input type="image"> elemen
|
Menyertakan alternatif teks untuk gambar dan objek |
<object> elemen
|
Menyertakan alternatif teks untuk gambar dan objek |
| Tombol | Memberi label pada tombol dan link |
| Link | Memberi label pada tombol dan link |
| Elemen formulir | Elemen formulir label |
Melabeli dokumen dan bingkai
Setiap halaman harus memiliki
title
elemen yang menjelaskan secara singkat tentang apa halaman tersebut. Elemen title memberi
halaman dengan nama yang
dapat diakses. Saat pembaca layar memasuki halaman, ini adalah
teks pertama yang diumumkan.
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, elemen
{i>screen reader<i} biasanya berhenti di batas {i>frame<i} dan mengumumkan
peran—"frame"—dan nama yang dapat diakses, yang disediakan oleh atribut title. Ini
memungkinkan pengguna memutuskan apakah mereka ingin
masuk ke dalam {i>frame <i}atau melewatinya.
Menyertakan alternatif teks untuk gambar dan objek
img harus selalu disertai dengan
alt
untuk memberi gambar nama yang mudah diakses. Jika gambar gagal dimuat,
Teks alt digunakan sebagai placeholder sehingga pengguna dapat mengetahui gambar tersebut
ingin Anda sampaikan.
Menulis teks alt yang baik memang terkadang perlu, tetapi ada beberapa panduannya
Anda dapat mengikuti:
- Tentukan apakah gambar menampilkan konten yang seharusnya sulit untuk capai dari membaca teks di sekitarnya.
- Jika demikian, sampaikan konten sesingkat mungkin.
Jika gambar berfungsi sebagai hiasan dan tidak memberikan konten yang bermanfaat,
Anda dapat memberikan atribut alt="" kosong untuk menghapusnya dari aksesibilitas
hierarki.
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 gambar
tombol ini 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. Mirip dengan gambar, teks ini
ditampilkan jika elemen gagal dirender. Teks alternatif masuk ke dalam
Elemen object sebagai teks biasa, seperti "Laporan tahunan" di bawah ini:
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>
Memberi label pada tombol dan link
Tombol dan tautan sering kali penting untuk pengalaman situs, dan itu penting bahwa keduanya memiliki aksesibilitas yang baik.
Tombol
Elemen button selalu mencoba menghitung nama yang dapat diakses menggunakan
konten teks. Untuk tombol yang bukan bagian dari form, menulis perintah yang jelas
tindakan karena konten teks mungkin yang Anda butuhkan untuk membuat
nama.
<button>Book Room</button>
Satu pengecualian umum untuk aturan ini adalah tombol ikon. Tombol ikon dapat menggunakan gambar atau {i>font<i} ikon untuk menyediakan konten teks pada tombol. Misalnya, tombol yang digunakan pada editor {i>What You See Is What You Get<i} (WYSIWYG) untuk memformat biasanya hanya berupa simbol grafis:
Saat bekerja dengan tombol ikon, akan sangat membantu untuk menampilkan
nama yang dapat diakses menggunakan atribut aria-label. aria-label mengganti semua
konten teks di dalam tombol, memungkinkan Anda
untuk menjelaskan tindakan dengan jelas
siapa pun yang menggunakan
pembaca layar atau {i>screen reader.<i}
<button aria-label="Left align"></button>
Link
Serupa dengan tombol, sebagian besar link mendapatkan nama yang dapat diakses dari teksnya saat ini. Trik yang bagus saat membuat tautan adalah menempatkan bagian yang paling penting teks ke dalam link itu sendiri, dan bukan kata pengisi seperti "Di sini" atau "Baca Lainnya."
Check out our guide to web performance <a href="/guide">here</a>.
Check out <a href="/guide">our guide to web performance</a>.
Ini sangat membantu bagi pembaca layar yang menawarkan pintasan untuk mencantumkan semua tautan di laman. Jika tautan penuh dengan teks pengisi yang berulang, pintasan menjadi tidak begitu berguna:
Beri label elemen formulir
Ada dua cara untuk mengaitkan label dengan elemen formulir, misalnya kotak centang. Salah satu metode tersebut menyebabkan teks label juga menjadi target klik bagi kotak centang, yang juga membantu pengguna {i>mouse<i} atau layar sentuh. Untuk mengaitkan label dengan suatu elemen, dapat berupa:
- 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>
Saat kotak centang diberi label dengan benar, pembaca layar dapat melaporkan elemen memiliki peran kotak centang, dalam keadaan dicentang, dan diberi nama "Terima penawaran promosi?" seperti dalam contoh VoiceOver di bawah ini:
TODO: DevSite - Penilaian Think and Check