HTML Aria Landmarks Roles Dasar

Ringkasan

ARIA menambah makna untuk assistive tech. Sering tidak perlu kalau elemen HTML semantik sudah cukup — pakai ARIA hanya untuk melengkapi.

Konsep Dasar

• Landmark role: banner (header), navigation (nav), main, contentinfo (footer), complementary (aside), region.
• Elemen sectioning HTML5 sudah memetakan ke landmark otomatis.
• role eksplisit hanya bila elemen tidak punya semantik (mis. <div>).
• aria-label memberi nama bisa dibaca; aria-hidden="true" sembunyikan dari pembaca layar.

Cara Kerja / Struktur

html

<nav aria-label="Utama">...</nav>
<div role="search">...</div>
<button aria-expanded="false" aria-controls="menu">Menu</button>

Catatan Implementasi

• Aturan emas: pakai elemen HTML yang tepat dulu; ARIA sebagai tambalan.
• Jangan override semantik (jangan role="button" di <button>).

Kesalahan Umum

• aria-hidden="true" pada elemen yang sebenarnya perlu dibaca.
• Role redundant (<nav role="navigation">).

Glosarium

• ARIA:Accessible Rich Internet Applications.
• Landmark: region halaman yang jadi titik navigasi.

Referensi

• HTML Table Accessibility Lanjut