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