Aksesibilitas: bukan opsional

Aksesibilitas biasanya dijelaskan sebagai hal untuk pengguna tunanetra. Cakupannya lebih luas dari itu, dan memikirkannya secara sempit adalah alasan ia dianggap opsional.

• Seseorang dengan tangan patah yang memakai satu tangan, hanya minggu ini.
• Seseorang di kereta dengan layar terkena matahari, yang butuh kontras.
• Seseorang yang mematikan gambar untuk menghemat kuota.
• Seseorang berusia 70 tahun yang butuh teks lebih besar.
• Seseorang yang trackpad-nya rusak.
• Crawler mesin pencari, yang membaca halamanmu seperti screen reader.
• Test otomatismu sendiri, yang mencari berdasarkan role dan label.

Kontras

Contrast ratio membandingkan tingkat kecerahan teks dengan latarnya, dari 1:1 (tak terlihat) sampai 21:1 (hitam di atas putih). WCAG menetapkan batas minimum, dan itu bukan angka sembarangan — semuanya berasal dari riset keterbacaan yang terukur.

Fokus

Fokus adalah kursor untuk keyboard. Kalau pengguna tidak bisa melihat posisinya, halamannya tidak bisa dipakai tanpa mouse.

/* The single worst line of CSS on the web. */
*:focus { outline: none; }

/* If the default ring is ugly, replace it - never remove it. */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

• Jangan pernah menghapus indikator fokus tanpa menyediakan pengganti yang jelas terlihat.
• Urutannya mengikuti DOM. Kalau CSS-mu memindahkan sesuatu secara visual, urutan Tab tidak akan cocok — susun ulang markup-nya.
• Kembalikan fokus setelah dialog ditutup, ke kontrol yang membukanya. Kalau tidak, fokusnya melompat ke atas halaman dan penggunanya tersesat.
• Sediakan skip link supaya pengguna keyboard bisa melompati navigasi. Situs ini punya satu — tekan Tab di halaman mana pun sebagai aksi pertamamu.
• Jangan pernah pakai `tabindex` positif. tabindex="0" membuat sesuatu bisa difokus, -1 membuatnya hanya bisa difokus lewat script. tabindex="3" menciptakan urutan yang tidak bisa dipelihara siapa pun.

ARIA: aturan pertamanya adalah jangan pakai ARIA

Atribut ARIA mendeskripsikan role dan state ke teknologi bantu. Aturan pertama ARIA yang resmi adalah: kalau ada elemen native yang bisa melakukannya, pakai itu. ARIA hanya mengubah apa yang *dibacakan* — ia tidak menambahkan perilaku apa pun.

<!-- Bad: a lie. It says "button" but behaves like a div. -->
<div role="button">Save</div>

<!-- Good: no ARIA needed, because the element is already right. -->
<button>Save</button>

<!-- Good ARIA: describing state a native element cannot express. -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<div id="menu" hidden>...</div>

<!-- Good ARIA: announcing content that changes without a page load. -->
<div aria-live="polite">3 venues found</div>