ACCESSIBILITY DOCS

WCAG-GUIDELINES

WCAG 2.2 – Perceivable (Prinsip 1)
Description: Informasi dan antarmuka harus dapat dipahami oleh indra pengguna.
Example: 
Alt text pada gambar, transkrip video, kontras warna cukup.
Output: Konten dapat diakses
WCAG 2.2 – Operable (Prinsip 2)
Description: Antarmuka harus dapat dioperasikan oleh semua pengguna (keyboard, touch, voice).
Example: 
Semua fungsi dapat diakses keyboard, cukup waktu membaca, hindari konten flashing.
Output: Navigasi inklusif
WCAG 2.2 – Understandable (Prinsip 3)
Description: Informasi dan operasi antarmuka harus dapat dimengerti.
Example: 
Label formulir jelas, error disampaikan dengan teks, konsistensi navigasi.
Output: UI mudah dipahami
WCAG 2.2 – Robust (Prinsip 4)
Description: Konten harus cukup tangguh untuk ditafsirkan oleh berbagai user agent, termasuk assistive technology.
Example: 
HTML valid, gunakan ARIA bila diperlukan, status disampaikan.
Output: Kompatibel dengan screen reader
Level A (Minimum)
Description: Kriteria paling dasar. Tanpa ini beberapa pengguna tidak bisa mengakses.
Example: 
Alt text untuk gambar, form label, tidak ada keyboard trap.
Output: Dapat diakses dasar
Level AA (Standar)
Description: Target umum untuk sebagian besar website. Mengatasi hambatan terbesar.
Example: 
Kontras minimal 4.5:1, fokus terlihat, heading terstruktur.
Output: Aksesibilitas baik
Level AAA (Tertinggi)
Description: Tingkat aksesibilitas tertinggi. Tidak semua konten bisa mencapai AAA.
Example: 
Kontras 7:1, teks isyarat, tidak ada batas waktu.
Output: Aksesibilitas maksimal

SEMANTIC-HTML

<header>
Description: Mendefinisikan bagian kepala halaman atau bagian.
Example: 
<header><h1>Logo</h1><nav>...</nav></header>
Output: Screen reader kenali sebagai banner (jika dalam <body>)
<main>
Description: Konten utama dokumen. Harus unik per halaman.
Example: 
<main><article>...</article></main>
Output: Langsung lompat ke konten
<nav>
Description: Navigasi utama. Gunakan aria-label jika ada banyak nav.
Example: 
<nav aria-label="Main"><ul>...</ul></nav>
Output: Screen reader identifikasi navigasi
<footer>
Description: Bagian kaki halaman.
Example: 
<footer><p>&copy; 2025</p></footer>
Output: Dikenali sebagai contentinfo
<section>
Description: Pengelompokan tematik, sebaiknya punya heading.
Example: 
<section aria-labelledby="id"><h2 id="id">...</h2></section>
Output: Region terdefinisi
<article>
Description: Konten mandiri yang dapat berdiri sendiri.
Example: 
<article><h2>Judul Artikel</h2>...</article>
Output: Screen reader bisa ringkas
<aside>
Description: Konten sampingan, sering sebagai complementary.
Example: 
<aside aria-label="Related articles">...</aside>
Output: Dapat dilewati
Headings (h1-h6)
Description: Struktur hierarki. Jangan lewati level.
Example: 
<h1>Judul Halaman</h1><h2>Sub Judul</h2>
Output: Navigasi cepat dengan screen reader

ARIA-BASICS

role
Description: Mendefinisikan peran elemen (bila tidak menggunakan elemen semantik).
Example: 
<div role="button" tabindex="0" onclick="...">Klik</div>
Output: Diperlakukan sebagai tombol
aria-label
Description: Memberikan label yang dapat dibaca oleh assistive technology.
Example: 
<button aria-label="Tutup">&times;</button>
Output: Dibaca 'Tutup'
aria-labelledby
Description: Merujuk id elemen lain sebagai label.
Example: 
<h2 id="section-title">Berita</h2><section aria-labelledby="section-title">
Output: Region bernama
aria-describedby
Description: Merujuk deskripsi tambahan.
Example: 
<input aria-describedby="hint"><span id="hint">Masukkan email</span>
Output: Deskripsi dibacakan setelah label
aria-hidden
Description: Menyembunyikan elemen dari assistive technology.
Example: 
<span aria-hidden="true">🎉</span>
Output: Ikon tidak dibacakan
aria-live
Description: Menandakan wilayah dinamis yang akan diumumkan saat konten berubah.
Example: 
<div aria-live="polite" id="notification">Pesan terkirim</div>
Output: Screen reader mengumumkan perubahan
aria-atomic
Description: Apakah seluruh konten live region harus diumumkan.
Example: 
aria-atomic="true"
Output: Semua konten dibaca ulang
aria-relevant
Description: Tipe perubahan yang perlu diumumkan (additions, removals, text, all).
Example: 
aria-relevant="additions"
Output: Hanya penambahan

KEYBOARD-ACCESSIBILITY

tabindex="0"
Description: Membuat elemen dapat difokuskan sesuai urutan DOM.
Example: 
<div tabindex="0" role="button">Klik</div>
Output: Bisa Tab
tabindex="-1"
Description: Dapat difokuskan lewat JavaScript, tidak dengan Tab.
Example: 
<div tabindex="-1" id="modal">...</div>
Output: Fokus programatik
Keyboard Event Handling
Description: Tangani Enter dan Space untuk mengaktifkan, Escape untuk menutup.
Example: 
button.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') activate() })
Output: Interaksi keyboard penuh
Focus Management
Description: Pindahkan fokus ke elemen relevan setelah tindakan (contoh: setelah membuka modal).
Example: 
modalOpen ? firstFocusable.focus() : trigger.focus()
Output: Tidak tersesat
No Keyboard Trap
Description: Pastikan pengguna keyboard bisa keluar dari semua komponen.
Example: 
Modal: Escape tutup, Tab melingkar di dalam.
Output: Kebebasan navigasi

FORMS-ACCESSIBILITY

<label>
Description: Mengaitkan label dengan input melalui atribut for/id.
Example: 
<label for="email">Email</label><input id="email" type="email">
Output: Klik label fokus ke input
aria-required / required
Description: Menandai input wajib.
Example: 
<input aria-required="true" required>
Output: Diumumkan wajib
aria-invalid
Description: Menandai input yang tidak valid.
Example: 
<input aria-invalid="true" aria-describedby="error-msg">
Output: Error diumumkan
Error Message (Live Region)
Description: Tampilkan pesan error dengan aria-live untuk diumumkan.
Example: 
<div id="error-msg" role="alert" aria-live="assertive">Email tidak valid</div>
Output: Langsung dibacakan

COLOR-CONTRAST

Minimum Contrast (AA)
Description: Teks normal minimal rasio 4.5:1, teks besar 3:1.
Example: 
#333 di atas #fff → rasio 12.6:1 (lulus)
Output: Terbaca jelas
Enhanced Contrast (AAA)
Description: Teks normal minimal 7:1, teks besar 4.5:1.
Example: 
#000 di atas #fff → 21:1
Output: Sangat kontras
Non-text Contrast
Description: Komponen UI dan grafik harus memiliki kontras minimal 3:1 terhadap latar.
Example: 
Border input #ccc → kontras rendah, ganti #888
Output: Komponen terlihat
Jangan Hanya Warna
Description: Informasi tidak boleh hanya disampaikan lewat warna.
Example: 
Grafik: bedakan juga dengan pola atau label.
Output: Aksesibel untuk buta warna

ACCESSIBLE-NAMES

aria-label pada tombol ikon
Description: Tombol tanpa teks harus punya aria-label.
Example: 
<button aria-label="Tutup dialog"><svg>...</svg></button>
Output: Nama aksesibel: 'Tutup dialog'
aria-labelledby untuk komponen kompleks
Description: Gabungkan beberapa ID untuk nama yang lebih deskriptif.
Example: 
<div role="tablist" aria-labelledby="tablist-title"><h2 id="tablist-title">Pengaturan</h2>
Output: Nama aksesibel
alt pada gambar
Description: Atribut alt memberikan deskripsi gambar.
Example: 
<img src="chart.png" alt="Grafik penjualan kuartal 3 menunjukkan peningkatan 20%">
Output: Dibacakan

MEDIA-ACCESSIBILITY

Caption & Subtitles
Description: Sediakan teks untuk audio/video.
Example: 
<track kind="captions" src="captions.vtt" srclang="en" label="English">
Output: Teks berjalan
Audio Description
Description: Deskripsi suara untuk konten visual penting.
Example: 
<track kind="descriptions" src="desc.vtt">
Output: Penjelasan visual
Transkrip
Description: Teks lengkap dari konten audio/video.
Example: 
Tautan ke halaman transkrip di dekat video.
Output: Alternatif teks penuh

TESTING-TOOLS

Lighthouse (Audit A11y)
Description: Alat bawaan Chrome DevTools untuk menilai aksesibilitas.
Example: 
Buka DevTools > Lighthouse > Accessibility
Output: Skor a11y
axe DevTools
Description: Ekstensi browser untuk menemukan masalah a11y otomatis.
Example: 
Buka DevTools > axe DevTools > Scan all
Output: Daftar pelanggaran
WAVE
Description: Web Accessibility Evaluation Tool.
Example: 
Kunjungi wave.webaim.org, masukkan URL.
Output: Laporan visual
Screen Reader Testing (NVDA/ VoiceOver)
Description: Uji manual dengan screen reader untuk memastikan pengalaman pengguna.
Example: 
Gunakan VoiceOver di Mac (Cmd+F5) atau NVDA di Windows.
Output: Navigasi non-visual

BEST-PRACTICES

Skip Navigation Link
Description: Tautan tersembunyi yang muncul saat fokus untuk langsung ke konten utama.
Example: 
<a href="#main-content" class="skip-link">Skip to main content</a>
Output: Langsung ke <main id="main-content">
Gunakan Elemen Semantik
Description: Prioritaskan HTML semantik sebelum ARIA.
Example: 
Gunakan <button> bukan <div role="button">
Output: Lebih mudah dan inklusif
Sediakan Teks Alternatif untuk Semua Gambar
Description: Termasuk gambar dekoratif (alt="").
Example: 
<img src="dekorasi.png" alt="">
Output: Dilewati screen reader
Pastikan Focus Indicator Jelas
Description: Hindari outline: none tanpa pengganti.
Example: 
:focus { outline: 2px solid blue; }
Output: Pengguna keyboard tahu lokasi