Memperbaiki: "Dokumen tidak memiliki penanda utama" (main landmark)

Audit aksesibilitas seperti axe atau Lighthouse sering menandai halaman yang tidak memiliki elemen landmark utama. Landmark utama (biasanya elemen <main> atau elemen dengan role="main") membantu pengguna pembaca layar dan keyboard untuk langsung menuju isi utama halaman.

Apa Penyebab Peringatan Ini?

Halaman tidak memiliki elemen <main> atau elemen lain yang bertindak sebagai landmark utama.
Template menempatkan konten utama tanpa landmark atau menempatkan beberapa landmark main (sebaiknya hanya satu).
Pada halaman AMP single-doc (kelas i-amphtml-singledoc), struktur dokumen harus tetap menyertakan landmark di <body> agar aksesibilitas lancar.

Mengapa Landmark Utama Penting?

Pengguna pembaca layar dapat melompat (skip) cepat ke konten utama menggunakan landmark. Tanpa landmark, navigasi menjadi lambat dan pengalaman pengguna menurun, khususnya untuk pengguna disabilitas.

Perbaikan Cepat: Tambahkan `<main role="main">`

Solusi paling langsung adalah membungkus konten utama dengan elemen <main> atau menambahkan atribut role jika Anda perlu kompatibilitas lebih luas:

<main id="main-content" role="main">
  <!-- Konten utama posting / artikel di sini -->
  <article>
    <h1>Judul Artikel</h1>
    <p>Isi artikel...</p>
  </article>
</main>

Gunakan id="main-content" untuk memungkinkan "skip link" (tautan lompat) menuju konten utama.

Contoh: Tambahkan "Skip to content" (disarankan)

Tambahkan link lompat di awal <body> agar keyboard user bisa melompat cepat:

<a class="skip-link" href="#main-content">Skip to main content</a>
<!-- style .skip-link agar hanya terlihat saat fokus -->
<style>
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip-link:focus{position:static;left:auto;width:auto;height:auto;background:#fff;padding:8px;border:1px solid #000;}
</style>

Implementasi di Template Blogger (AMP) — Tempel di Template <body> area

Jika kamu memakai template Blogger, cari bagian template yang menampilkan konten posting (biasanya bagian utama dengan <b:section id='main' ...> atau sejenis). Bungkus area itu dengan <main id="main-content" role="main">.

<!-- Contoh: bagian template (sederhana) -->
<!-- Tempelkan langsung di template, di area yang memuat posting -->
<main id="main-content" role="main">
  <b:section id='main' class='main' showaddelement='no'>
    <b:widget id='Blog1' type='Blog'>
      <!-- widget blog akan merender posting di sini -->
    </b:widget>
  </b:section>
</main>

Catatan: letakkan hanya satu elemen <main> per halaman. Jangan menempatkan <main> di dalam elemen lain yang mempunyai role landmark serupa.

Contoh: Jika Kamu Tidak Bisa Mengedit Template — Solusi Per-Post

Kalau hanya bisa edit isi posting (bukan template), kamu tetap bisa menambahkan sebuah pembungkus <div role="main" id="main-content"> di awal konten. Ini berguna sebagai fallback, meski idealnya landmark ditaruh di template.

<!-- Tempelkan di awal isi posting (mode HTML) jika tidak bisa mengubah template -->
<div id="main-content" role="main">
  <h1>Judul Post</h1>
  <p>Isi post...</p>
</div>

Hal yang Perlu Diperhatikan

Hanya satu landmark <main> per halaman. Landmark tambahan untuk nav, header, aside, footer tetap boleh.
Jangan menempatkan <main> di dalam <article> atau di dalam elemen landmark lain.
Pastikan id pada main cocok dengan href pada skip-link.

Verifikasi & Tes

Gunakan Lighthouse (Chrome DevTools → Audits) untuk memeriksa isu aksesibilitas.
Gunakan axe (browser extension) untuk tes lebih mendetail.
Periksa HTML final (View Page Source) untuk memastikan hanya ada satu elemen <main> dan id cocok dengan skip-link.
Gunakan pembaca layar (NVDA / VoiceOver) atau coba tekan Tab pada keyboard untuk melihat apakah link "Skip to main content" bekerja.

Contoh Lengkap: Template Minimal AMP-friendly

Contoh di bawah adalah potongan body yang valid AMP (tanpa <head>). Gunakan sebagai referensi saat mengedit template:

<!-- Skip link untuk akses keyboard -->
<a class="skip-link" href="#main-content">Skip to main content</a>

<header role="banner">
  <div class="site-brand"><a href="/">Bikarscreativ</a></div>
</header>

<main id="main-content" role="main">
  <article>
    <h1>Judul Posting</h1>
    <p>Paragraf pembuka...</p>
    <!-- Konten posting di-render oleh widget / template -->
  </article>
</main>

<aside role="complementary">
  <!-- sidebar -->
</aside>

<footer role="contentinfo">
  <p>© Bikarscreativ</p>
</footer>

Ringkasan Solusi

Tambahkan satu elemen <main id="main-content" role="main"> di template dekat area yang menampilkan posting.
Tambahkan skip-link untuk keyboard user.
Jika tidak bisa mengubah template, tambahkan <div id="main-content" role="main"> di awal isi posting sebagai fallback.
Jalankan Lighthouse / axe untuk verifikasi akhir.

Rujukan & Sumber

Deque University — Landmark: One Main. (Pedoman praktik aksesibilitas)
W3C — ARIA Landmark Roles
Google Web Fundamentals — Accessibility

Memperbaiki Dokumen tidak memiliki penanda utama