Accessibility - HTML Semantik

HTML semantik menggunakan elemen sesuai maknanya, bukan hanya untuk styling. Ini adalah fondasi aksesibilitas yang paling fundamental.

Perbedaan Semantik vs Non-Semantik

<!-- Buruk — div dan span tanpa makna -->
<div class="header">
  <div class="nav">
    <div class="button" onclick="submit()">Kirim</div>
  </div>
</div>

<!-- Baik — elemen dengan makna -->
<header>
  <nav>
    <button type="submit">Kirim</button>
  </nav>
</header>

Elemen Semantik Penting

Elemen	Fungsi	Screen Reader
`<header>`	Header halaman/section	Banner
`<nav>`	Navigasi utama	Navigation
`<main>`	Konten utama	Main
`<article>`	Konten independen	Article
`<section>`	Bagian dengan tema	Region (jika punya heading)
`<aside>`	Konten sampingan	Complementary
`<footer>`	Footer	Contentinfo
`<figure>` / `<figcaption>`	Gambar dengan caption	Figure
`<time>`	Tanggal/waktu	—
`<details>` / `<summary>`	Konten expandable	—

Landmark Regions

Screen reader menggunakan landmark untuk navigasi cepat:

<body>
  <header>...</header>
  <nav aria-label="Utama">...</nav>
  <main>
    <section aria-labelledby="judul-1">
      <h2 id="judul-1">Judul Section</h2>
      ...
    </section>
  </main>
  <aside>...</aside>
  <footer>...</footer>
</body>

Heading Hierarchy

Heading (<h1> sampai <h6>) harus bersifat hierarkis dan tidak boleh skip:

<!-- Salah — skip dari h1 ke h3 -->
<h1>Judul Halaman</h1>
<h3>Subjudul</h3>

<!-- Benar -->
<h1>Judul Halaman</h1>
<h2>Bab 1</h2>
<h3>Subbab 1.1</h3>
<h2>Bab 2</h2>

Link vs Button

<!-- Gunakan <a> untuk navigasi ke halaman/resource -->
<a href="/tentang">Tentang Kami</a>

<!-- Gunakan <button> untuk aksi di halaman yang sama -->
<button type="button" onclick="bukaModal()">Buka Modal</button>

List Semantik

<!-- Screen reader akan mengumumkan "list, 3 items" -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Ordered list untuk urutan penting -->
<ol>
  <li>Buka aplikasi</li>
  <li>Klik "Daftar"</li>
  <li>Isi formulir</li>
</ol>