Accessible Names

Setiap kontrol interaktif menyimpan satu potongan teks yang jarang terlihat di layar namun selalu terdengar di screen reader: accessible name. Nama inilah yang diumumkan ketika pengguna berpindah fokus, sehingga tombol tanpa nama terdengar seperti sekadar “tombol” tanpa identitas. Chapter ini menjelaskan apa itu accessible name, urutan sumber yang dipakai browser menentukannya, dan elemen mana yang wajib kita beri nama secara sadar.

Apa Itu Accessible Name #

Accessible name adalah label singkat yang menyatakan maksud sebuah elemen, dihitung browser dan disajikan pada accessibility tree, yaitu struktur data yang dibaca assistive technology. Nama berbeda dari deskripsi: nama adalah identitas (“Cari”), sedangkan deskripsi adalah penjelasan tambahan (“format nomor 08xx”) yang nanti kita hubungkan lewat aria-describedby pada chapter form. Perhatikan ilustrasi urutan pengumuman berikut:

Siti menekan Tab pada halaman katalog:
  - fokus berpindah ke tombol pencarian
  - screen reader mengumumkan: "Cari, tombol"

Kata “Cari” adalah accessible name dan kata “tombol” adalah role (peran). Tanpa nama, pengumuman berhenti di “tombol”, dan pengguna tidak punya dasar memutuskan untuk menjalankannya. Name juga menjadi sasaran perintah suara: pengguna voice control menyebut nama yang terlihat untuk memilih kontrol.

Urutan Prioritas Sumber Nama #

Browser menghitung accessible name dengan urutan prioritas yang tetap. Mengetahui urutannya penting agar kita tahu sumber mana yang menang bila dua sumber diisi sekaligus:

1. aria-labelledby — nama diambil dari konten elemen lain yang dirujuk lewat id;
2. aria-label — nama ditulis langsung sebagai nilai atribut;
3. sumber native elemen — teks konten untuk button dan a, elemen label untuk kontrol form, alt untuk img, title untuk iframe, dan title global sebagai pilihan terakhir.

Tabel berikut merangkum sumber bawaan sebelum ARIA masuk:

Kontrol yang Wajib Punya Nama #

Empat kelompok elemen paling sering terlewat namanya:

• tombol ikon: button yang berisi gambar tanpa teks sama sekali;
• link ikon: a yang isinya hanya logo atau simbol;
• kontrol form: input, select, dan textarea tanpa label terhubung;
• iframe: konten tertanam yang butuh title sebagai perkenalan isinya.

Tombol ikon adalah kasus paling khas. Bagi mata, gambar keranjang sudah cukup jelas; bagi screen reader, gambar itu tak menghasilkan teks apa pun sehingga tombol terdengar kosong. Solusinya bukan menambah teks terlihat, melainkan memberi nama lewat sumber yang tepat.

aria-label dan aria-labelledby #

Atribut aria-label memberi nama langsung, cocok untuk kontrol tanpa teks:

<button type="submit" aria-label="Cari">
  <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
    <circle cx="10" cy="10" r="6" fill="none" stroke="currentColor" stroke-width="2"/>
    <path d="M15 15l5 5" stroke="currentColor" stroke-width="2"/>
  </svg>
</button>

Atribut aria-hidden="true" pada ikon memastikan gambar tak ikut dibacakan, sehingga nama yang diumumkan bersih. Untuk nama yang menunjuk elemen lain, pakai aria-labelledby; pola ini lazim memberi nama pada nav dari heading yang sudah ada:

<nav aria-labelledby="judul-menu">
  <h2 id="judul-menu">Menu Laporan</h2>
  <ul>
    <li><a href="www.example.com/laporan-harian">Harian</a></li>
    <li><a href="www.example.com/laporan-bulanan">Bulanan</a></li>
  </ul>
</nav>

Keunggulan aria-labelledby adalah teksnya tidak digandakan: heading tetap tampil sebagai heading, dan nilai atributnya hanya merujuk. Perhatikan pula aturan praktis yang melengkapi prioritas tadi: bila kontrol punya teks terlihat, jangan beri aria-label yang berbeda, karena pengguna voice control akan menyebut kata yang mereka lihat.

Membedah Halaman Bernama Lengkap #

Contoh berikut menyatukan empat kelompok kontrol tadi dalam satu dasbor:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dasbor Jualan</title>
</head>
<body>
  <header>
    <h1>Dasbor Jualan</h1>
    <a href="keranjang.html" aria-label="Keranjang belanja, 3 item">
      <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><path d="M4 7h16l-2 10H6L4 7z" fill="none" stroke="currentColor" stroke-width="2"/></svg>
    </a>
  </header>
  <nav aria-labelledby="judul-menu">
    <h2 id="judul-menu">Menu Laporan</h2>
    <ul>
      <li><a href="www.example.com/laporan-harian">Harian</a></li>
      <li><a href="www.example.com/laporan-bulanan">Bulanan</a></li>
    </ul>
  </nav>
  <main>
    <h2>Pencarian Produk</h2>
    <form action="www.example.com/cari" method="get">
      <label for="kata-kunci">Cari produk</label>
      <input type="search" id="kata-kunci" name="q">
      <button type="submit" aria-label="Cari">
        <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><circle cx="10" cy="10" r="6" fill="none" stroke="currentColor" stroke-width="2"/><path d="M15 15l5 5" stroke="currentColor" stroke-width="2"/></svg>
      </button>
    </form>
    <h2>Lokasi Toko</h2>
    <iframe src="peta-toko.html" title="Peta lokasi Toko Bunga Melati, Jl. Melati No. 10" width="420" height="220"></iframe>
  </main>
</body>
</html>

Output yang Dihasilkan:

Menekan Tab dan berpindah fokus, screen reader mengumumkan:
  - "Keranjang belanja, 3 item, link"
  - "Menu Laporan, navigasi, daftar, Harian, link"
  - "Cari produk, kolom pencarian"
  - "Cari, tombol"
  - "Peta lokasi Toko Bunga Melati, Jl. Melati No. 10, frame"

Mari kita bedah sumber nama di setiap kontrol:

1. Baris 10-12 (link keranjang): isi link hanya gambar svg, sehingga nama berasal dari aria-label="Keranjang belanja, 3 item".
2. Baris 11 (svg aria-hidden="true"): ikon disembunyikan dari pembacaan agar tidak muncul teks aneh di pengumuman.
3. Baris 15-16 (nav + h2): nama navigasi diambil dari heading lewat aria-labelledby="judul-menu", tanpa menggandakan teks.
4. Baris 23-25 (label + input): input pencarian memakai label native; ini sumber tercepat dan tak butuh ARIA.
5. Baris 26-28 (tombol submit): tombol ikon diberi aria-label="Cari" karena kontennya hanya gambar.
6. Baris 31 (iframe): title menjadi nama frame; tanpa itu pembaca hanya mengumumkan “frame” tanpa menjelaskan isinya.

Bila file peta-toko.html belum ada, contoh tetap valid; sediakan file pendukungnya sendiri saat mencoba. Perhatikan bahwa nama yang baik singkat, unik, dan menyatakan tujuan, bukan penampilan. Selanjutnya kita menengok kelompok elemen dengan aturan nama paling terperinci: gambar beserta teks alternatifnya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Accessibility tree
• MDN Web Docs — ARIA: aria-label
• MDN Web Docs — ARIA: aria-labelledby

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dasbor Jualan</title>
</head>
<body>
  <header>
    <h1>Dasbor Jualan</h1>
    <a href="keranjang.html" aria-label="Keranjang belanja, 3 item">
      <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><path d="M4 7h16l-2 10H6L4 7z" fill="none" stroke="currentColor" stroke-width="2"/></svg>
    </a>
  </header>
  <nav aria-labelledby="judul-menu">
    <h2 id="judul-menu">Menu Laporan</h2>
    <ul>
      <li><a href="www.example.com/laporan-harian">Harian</a></li>
      <li><a href="www.example.com/laporan-bulanan">Bulanan</a></li>
    </ul>
  </nav>
  <main>
    <h2>Pencarian Produk</h2>
    <form action="www.example.com/cari" method="get">
      <label for="kata-kunci">Cari produk</label>
      <input type="search" id="kata-kunci" name="q">
      <button type="submit" aria-label="Cari">
        <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><circle cx="10" cy="10" r="6" fill="none" stroke="currentColor" stroke-width="2"/><path d="M15 15l5 5" stroke="currentColor" stroke-width="2"/></svg>
      </button>
    </form>
    <h2>Lokasi Toko</h2>
    <iframe src="peta-toko.html" title="Peta lokasi Toko Bunga Melati, Jl. Melati No. 10" width="420" height="220"></iframe>
  </main>
</body>
</html>