Button

Komponen yang memicu tindakan atau peristiwa, seperti mengirimkan formulir atau membuka dialog.

Tombol yang Aksesibel (WCAG 2.2)

Unduhan tersedia setelah formulir dikirim.

<!-- Text button: the visible text is the accessible name -->
<button type="submit" class="btn btn-fill">Kirim</button>

<!-- Disabled: native disabled attribute, plus a visible reason -->
<button type="button" class="btn btn-outline" disabled aria-describedby="download-hint">
  Unduh
</button>
<p id="download-hint">Unduhan tersedia setelah formulir dikirim.</p>

<!-- Icon + text: the icon is decorative -->
<button type="button" class="btn btn-fill">
  <svg aria-hidden="true" focusable="false"><!-- + icon --></svg>
  Lampirkan
</button>

<!-- Icon only: aria-label gives it a name -->
<button type="button" class="btn btn-fill" aria-label="Tambah lampiran">
  <svg aria-hidden="true" focusable="false"><!-- + icon --></svg>
</button>

<!-- Feedback that screen readers announce -->
<p role="status">Formulir terkirim.</p>

<style>
  .btn { min-height: 44px; min-width: 44px; padding: 0.5rem 1rem; }
  .btn-fill { background: #014977; color: #fff; }        /* 9.7:1 */
  .btn-outline { border: 2px solid #014977; color: #014977; }
  .btn:focus-visible { outline: 2px solid #2f2f2f; outline-offset: 2px; }
</style>

Membuat Tombol yang Aksesibel

Gunakan elemen HTML semantik (button) dan tetapkan type-nya
Sediakan interaksi keyboard: tombol bisa difokus dengan Tab dan diaktifkan dengan Enter atau Spasi
Sediakan label yang jelas dan deskriptif, termasuk aria-label untuk tombol yang hanya berisi ikon
Pastikan kontras warna yang memadai dan ukuran target yang cukup besar
Berikan status fokus yang terlihat jelas
Sertakan umpan balik pada interaksi tombol, dan jelaskan mengapa tombol sedang dinonaktifkan

Tombol yang Tidak Aksesibel (Harap Dihindari)

Contoh tidak aksesibel. Jangan ditiru.

Kirim

Klik di sini

Kirim

Unduh

Diklik 0 kali

<!-- A div: no role, not focusable, mouse only, low contrast -->
<div class="fake-btn" onclick="send()" style="color: #a9dcf4; background: #c0eafe">
  Kirim
</div>

<!-- Focusable, but still no role and no Enter/Space; vague text -->
<div class="fake-btn" tabindex="0" onclick="send()">Klik di sini</div>

<!-- aria-label doesn't match the visible text -->
<div class="fake-btn" tabindex="0" aria-label="klik saya dong" onclick="send()">
  Kirim
</div>

<!-- "Disabled" only by colour; nothing tells assistive tech -->
<div class="fake-btn" style="color: #e5e7eb; cursor: not-allowed">Unduh</div>

<!-- Icon only, no name, tiny target -->
<span class="fake-btn" onclick="attach()" style="width: 16px; height: 16px">+</span>

<style>
  .fake-btn { cursor: pointer; user-select: none; outline: none; }
</style>

Contoh Implementasi Tombol yang Tidak Aksesibel

Menggunakan div atau span sebagai tombol, sehingga tidak bisa difokus atau dioperasikan dengan keyboard dan tidak dikenali sebagai tombol oleh pembaca layar
Tidak ada status fokus, sehingga tidak ada indikator visual saat tombol difokus
Kontras warna yang buruk (kombinasi warna teks dan latar tidak memenuhi standar kontras WCAG)
Menggunakan label yang ambigu seperti 'Klik di sini', aria-label yang berbeda dari teks yang terlihat, atau hanya ikon tanpa teks alternatif
Ukuran target terlalu kecil, area yang bisa diklik di bawah 24×24 px (idealnya 44×44 px)