Lompat ke konten utama
←

UX Writing

Pelajaran 13 dari 14

Angka, panjang teks, dan aksesibilitas

Teks untuk pembaca layar

Setelah pelajaran ini kamu bisa memberi nama aksesibel pada tombol ikon dan tautan gambar, dan memeriksanya terhadap WCAG 2.5.3, WCAG 2.4.4, serta Microsoft Writing for all abilities.

±14 menitDiperiksa 28 Sep 2026

Materi

Pembaca layar membacakan nama setiap kontrol, dan nama itu juga teks antarmuka walau tidak terlihat. Tutorial label W3C menyatakan: bila tujuan kolom sudah jelas dari konteksnya, label boleh disembunyikan secara visual tetapi tetap harus ada di kode. Tombol yang hanya berupa ikon diberi nama lewat aria-label; atribut ini bekerja untuk teknologi bantu, tetapi tidak tampil bagi pengguna yang melihat layar. WCAG 2.2 kriteria 2.5.3 Label in Name menyatakan: bila kontrol punya label berupa teks, nama aksesibelnya memuat teks yang tampil itu, dan praktik terbaiknya teks label diletakkan di awal nama. Contoh W3C: label tampil Search, nama aksesibel Search for a value. Aturan ini melindungi pengguna perintah suara yang menyebut kata yang mereka lihat.

Tautan yang hanya berupa gambar butuh teks alternatif. Microsoft Writing Style Guide meminta alt teks tautan seperti itu menyebut apa yang dilakukan tautannya, bukan apa isi gambarnya; contohnya "Buka sesi obrolan dengan layanan pelanggan", bukan deskripsi foto orang yang sedang menelepon. WCAG 2.4.4 meminta tujuan setiap tautan bisa dipahami dari teksnya atau konteksnya, dan Apple meminta frasa deskriptif sebagai ganti Klik di sini. Aturan teks tautan di paragraf dibahas lengkap di kelas Menulis Konten Web.

Microsoft, di bagian Writing for all abilities, menambahkan tiga aturan: tulis kata seperti dan, plus, dan sekitar dengan huruf, karena pembaca layar bisa salah membaca atau melewati simbol + dan ~; jangan memakai arah seperti kiri, kanan, atas, atau bawah sebagai satu-satunya petunjuk letak; dan pakai kata kerja umum yang berlaku untuk semua cara masukan.

<button type="button" class="ikon-bagikan" aria-label="Bagikan resep"></button>
<a href="/keranjang"><img src="ikon-keranjang.svg" alt="Buka keranjang belanja"></a>

Latihan

0/3 lulus

Jawaban diperiksa di server. Lulus berarti kamu memahami contohnya, bukan penilaian seluruh pekerjaanmu.

Latihan 1 dari 3

Tombol bertuliskan Kirim diberi aria-label. Nilai mana yang memenuhi WCAG 2.5.3 Label in Name dan praktik terbaiknya?

Pilih satu jawaban

Latihan 2 dari 3

Logo taman baca di pojok halaman adalah tautan ke beranda, dan tautan itu tidak punya teks lain. Alt mana yang sesuai Microsoft Writing Style Guide?

Pilih satu jawaban

Catatanmu

Memuat catatan…

tersimpan otomatis, ikut tercetak · 0/4.000

Luluskan semua latihan dulu untuk menandai pelajaran ini selesai.

Lanjutkan ke