Heading
Elemen teks yang digunakan untuk menandai dan mengorganisir bagian-bagian konten dalam struktur hierarki. Heading membantu pengguna memahami organisasi dan struktur halaman, serta memudahkan navigasi konten.
Heading yang Aksesibel (WCAG 2.2)
Panduan Belanja Online
Semua yang perlu Anda ketahui, dari membuat akun sampai pesanan tiba.
Membuat Akun
Melakukan Pembayaran
Transfer Bank
Dompet Digital
Pengiriman
<!-- A page of its own starts at h1.
Inside a section, start one level
below its heading: the preview
starts at h3 because it sits
under this page's h2. -->
<h1>Panduan Belanja Online</h1>
<p>Semua yang perlu Anda ketahui, dari membuat akun sampai pesanan tiba.</p>
<h2>Membuat Akun</h2>
<h2>Melakukan Pembayaran</h2>
<h3>Transfer Bank</h3>
<h3>Dompet Digital</h3>
<h2>Pengiriman</h2>Membuat Heading yang Aksesibel
- Gunakan tingkatan heading (h1–h6) secara berurutan dan logis
- Pastikan h1 unik dan menggambarkan konten utama halaman
- Hindari melompati tingkatan heading dalam hierarki
- Mulai dari tingkat tepat di bawah heading induknya. Pratinjau di atas dimulai dari h3 karena berada di bawah h2 bagian ini; pada halaman tersendiri, kode yang sama dimulai dari h1
- Berikan teks heading yang deskriptif dan bermakna
- Pastikan kontras dan ukuran teks yang memadai
Heading yang Tidak Aksesibel (Harap Dihindari)
Contoh tidak aksesibel. Jangan ditiru.
Panduan Belanja Online
Semua yang perlu Anda ketahui, dari membuat akun sampai pesanan tiba.
Membuat Akun
Melakukan Pembayaran
Transfer Bank
Dompet Digital
Pengiriman
<!-- Looks like headings, but nothing here is a heading -->
<div style="font-size: 1.875rem; font-weight: bold">Panduan Belanja Online</div>
<p>Semua yang perlu Anda ketahui, dari membuat akun sampai pesanan tiba.</p>
<p style="font-size: 1.125rem; font-weight: bold">Membuat Akun</p>
<!-- Size picked for looks: a subsection
bigger than its section -->
<p style="font-size: 1.125rem; font-weight: bold">Melakukan Pembayaran</p>
<div style="font-size: 1.5rem; font-weight: bold">Transfer Bank</div>
<div style="font-size: 1.5rem; font-weight: bold">Dompet Digital</div>
<!-- The one real heading skips levels:
after the page's h1 it jumps
straight to h4 -->
<h4 style="font-size: 1rem">Pengiriman</h4>Contoh Implementasi Heading yang Tidak Aksesibel
- Menggunakan div atau p dengan font besar dan tebal sebagai heading, bukan elemen heading semantik (h1–h6)
- Pembaca layar tidak mengenali teks tersebut sebagai heading, sehingga pengguna tidak bisa melompat antarbagian lewat navigasi heading
- Melompati tingkatan heading (dari h1 langsung ke h4), membuat struktur dokumen tidak logis
- Memilih ukuran teks hanya untuk tampilan tanpa nilai semantik yang sesuai, sehingga ukuran visual tidak mencerminkan hierarki