Tunanetra Meraba Website: Menyelami Navigasi Screen Reader
Bagi pengguna awam, sebuah halaman web adalah pengalaman visual dua dimensi yang penuh warna, tata letak grid, gambar, dan tipografi. Namun, bagi pengguna tunanetra, web adalah pengalaman linear satu dimensi yang dibacakan baris demi baris oleh perangkat lunak Screen Reader (Pembaca Layar).
Memahami cara kerja Screen Reader—serta tantangan nyata yang dihadapi penggunanya—adalah langkah fundamental pertama dalam menciptakan produk digital yang benar-benar inklusif. Artikel ini akan membedah secara teknis bagaimana desain antarmuka dikonversi menjadi audio, dan mengapa penulisan kode HTML yang semantik adalah kunci utamanya.
1. Bagaimana Screen Reader Bekerja?
Screen reader seperti JAWS, NVDA (Windows), dan VoiceOver (macOS/iOS) tidak "melihat" layar secara visual. Sebaliknya, mereka berinteraksi langsung dengan Accessibility Tree (Pohon Aksesibilitas)—sebuah representasi data yang dibangun oleh browser berdasarkan Document Object Model (DOM).
Konsep "Virtual Buffer"
Saat sebuah halaman dimuat,
screen reader membuat salinan virtual dari konten halaman yang disebut
Virtual Buffer. Pengguna menavigasi
buffer ini menggunakan
keyboard (biasanya tombol panah atas/bawah), bukan dengan memindahkan kursor
mouse.
Inilah mengapa urutan elemen di dalam kode HTML (DOM order) sangatlah krusial. Jika secara visual sebuah elemen berada di kiri, namun di dalam HTML elemen tersebut ditulis paling bawah, maka pengguna screen reader akan mendengarnya di urutan paling akhir.
[!CAUTION]
Bahaya Manipulasi CSS: Jangan menggunakan properti CSS seperti float, flex-direction: row-reverse, atau order untuk mengubah posisi visual elemen secara radikal jika hal itu merusak urutan logis DOM. Screen reader membaca urutan DOM, bukan urutan visual.
2. Navigasi Melalui Landmark HTML5
Pengguna tunanetra jarang membaca halaman dari ujung atas hingga bawah secara berurutan. Mereka menggunakan fitur pintasan (shortcuts) pada screen reader untuk melompat langsung ke bagian yang mereka butuhkan.
Landmarks (Markah Tanah) adalah cara utama pengguna "memetakan" halaman. Dengan menekan sebuah tombol, mereka bisa melihat daftar area utama halaman.
Contoh Implementasi Semantik
Hindari penggunaan elemen generik `
` untuk struktur utama. Gunakan tag HTML5 yang memiliki makna bawaan:
<!-- BURUK: Tidak memiliki makna semantik -->
<div class="header">...</div>
<div class="sidebar">...</div>
<div class="content">...</div>
<div class="footer">...</div>
<!-- BAIK: Dikenali sebagai Landmark oleh Screen Reader -->
<header>...</header>
<aside>...</aside>
<main>...</main>
<footer>...</footer>
Jika terpaksa menggunakan <div> (misalnya karena keterbatasan framework legacy), Anda harus menggunakan atribut role dari spesifikasi ARIA: <div role="main">. Namun, hukum pertama ARIA adalah: Gunakan HTML asli (native) jika memungkinkan.
3. Hierarki Heading (Judul) Sebagai Kerangka Halaman
Selain landmarks, metode navigasi terpopuler kedua bagi tunanetra adalah melompat antar Heading (<h1> hingga <h6>). Screen reader memungkinkan pengguna menekan tombol "H" untuk melompat ke judul berikutnya, memberikan gambaran cepat tentang topik apa saja yang ada di halaman tersebut.
Aturan Emas Heading:
1.
Gunakan hanya satu ``:
`
` harus mendeskripsikan tujuan utama dari halaman tersebut (biasanya sama dengan elemen ``).
2. <strong>Jangan melompati level:</strong> Jangan gunakan `<h3>` tepat setelah `<h1>` hanya karena Anda menyukai ukuran <em>font</em>-nya secara visual. Urutan harus logis (`<h1>` -> `<h2>` -> `<h3>`).
3. <strong>Pisahkan gaya visual dari struktur:</strong> Jika `<h2>` terasa terlalu besar, gunakan CSS untuk mengecilkan ukurannya, jangan mengubah tag HTML-nya menjadi `<h4>`.<hr>
<h2 id="4-teks-tautan-yang-tidak-ambigu">4. Teks Tautan yang Tidak Ambigu</h2><p>Bayangkan Anda mengaktifkan fitur <em>screen reader</em> yang merangkum seluruh tautan (link) di halaman menjadi sebuah daftar (<em>List of Links</em>).</p>
<p>Jika Anda menggunakan teks seperti:</p>
<ul>
<li>"Klik di sini"</li>
<li>"Baca selengkapnya"</li>
<li>"Lebih lanjut"</li>
</ul>
<p>Maka daftar tautan yang didengar pengguna tunanetra adalah: <em>"Klik di sini, Klik di sini, Baca selengkapnya"</em>. Ini sama sekali tidak memberikan konteks ke mana tautan tersebut akan membawa mereka.</p>
<h3 id="solusi-tautan-deskriptif">Solusi Tautan Deskriptif</h3>
Teks tautan harus dapat dipahami secara mandiri (<em>standalone</em>).
- <strong>Buruk:</strong> Untuk melihat laporan keuangan, [klik di sini].
- <strong>Baik:</strong> Silakan tinjau [laporan keuangan tahunan] kami.<p>Jika desain visual bersikeras menggunakan tombol bertuliskan "Read More", Anda dapat menyembunyikan teks konteks tambahan secara visual (menggunakan kelas <code>.sr-only</code>), tetapi tetap dapat dibaca oleh <em>screen reader</em>.</p>
<pre><code class="language-html"><a href="/berita/123" class="btn">
Baca selengkapnya <span class="sr-only">tentang rilis fitur aksesibilitas baru</span>
</a>
</code></pre>
<hr>
<h2 id="5-kesimpulan-aksesibilitas-adalah-akuntabilitas">5. Kesimpulan: Aksesibilitas adalah Akuntabilitas</h2><p>Menulis kode yang aksesibel pada dasarnya adalah menulis kode HTML yang baik, bersih, dan sesuai standar. Saat Anda mengabaikan semantik HTML, Anda tidak hanya menyulitkan mesin pencari (SEO), tetapi Anda secara harfiah telah menutup pintu situs Anda bagi jutaan pengguna yang mengandalkan perangkat teknologi asistif.</p>
<p>Mulailah dengan mencoba mencabut kabel <em>mouse</em> Anda, nyalakan <em>Screen Reader</em> bawaan komputer Anda (Narrator di Windows atau VoiceOver di Mac), dan cobalah melakukan pembelian atau mengisi formulir di situs web yang sedang Anda bangun.</p>
<hr>
<h3 id="referensi">Referensi</h3>
Artikel ini disusun dengan merujuk pada prinsip-prinsip desain instruksional, navigasi disabilitas, dan semantik HTML tingkat lanjut sebagaimana dikupas tuntas dalam <strong>Practical Web Accessibility</strong> oleh Ashley Firth. Pemahaman teknis mendalam tentang <em>Screen Reader</em> dan navigasi <em>keyboard</em> diadaptasi langsung dari filosofi desain inklusif yang diajarkan dalam literatur tersebut.</div><div class="mt-12 mb-8 flex flex-col items-center justify-center gap-4 rounded-3xl border-4 border-slate-900 bg-slate-50 p-8 shadow-[8px_8px_0px_0px_rgba(15,23,42,1)] sm:flex-row sm:gap-8"><div class="text-center sm:text-right"><h3 class="text-lg font-black uppercase italic tracking-tight text-slate-900">Bagaimana menurut Anda?</h3><p class="text-xs font-bold text-slate-500">Berikan reaksi Anda pada artikel ini</p></div><div class="hidden h-12 w-1 bg-slate-200 sm:block"></div><div class="flex flex-wrap items-center justify-center gap-4"><button aria-label="Beri reaksi Mencerahkan. Total 0 reaksi." class="flex items-center gap-2 rounded-2xl border-2 px-4 py-2 transition-all hover:-translate-y-1 hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-blue-500/20 disabled:hover:translate-y-0 disabled:hover:shadow-none border-slate-200 bg-white text-slate-600 hover:border-slate-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lightbulb size-5" aria-hidden="true"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path><path d="M9 18h6"></path><path d="M10 22h4"></path></svg><span class="font-bold">0</span><span class="hidden text-xs font-medium text-slate-500 sm:inline">Mencerahkan</span></button><button aria-label="Beri reaksi Praktik Baik. Total 0 reaksi." class="flex items-center gap-2 rounded-2xl border-2 px-4 py-2 transition-all hover:-translate-y-1 hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-blue-500/20 disabled:hover:translate-y-0 disabled:hover:shadow-none border-slate-200 bg-white text-slate-600 hover:border-slate-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-handshake size-5" aria-hidden="true"><path d="m11 17 2 2a1 1 0 1 0 3-3"></path><path d="m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"></path><path d="m21 3 1 11h-2"></path><path d="M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3"></path><path d="M3 4h8"></path></svg><span class="font-bold">0</span><span class="hidden text-xs font-medium text-slate-500 sm:inline">Praktik Baik</span></button><button aria-label="Beri reaksi Apresiasi. Total 0 reaksi." class="flex items-center gap-2 rounded-2xl border-2 px-4 py-2 transition-all hover:-translate-y-1 hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-blue-500/20 disabled:hover:translate-y-0 disabled:hover:shadow-none border-slate-200 bg-white text-slate-600 hover:border-slate-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-thumbs-up size-5" aria-hidden="true"><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"></path><path d="M7 10v12"></path></svg><span class="font-bold">0</span><span class="hidden text-xs font-medium text-slate-500 sm:inline">Apresiasi</span></button><button aria-label="Beri reaksi Perlu Koreksi / Kritis. Total 0 reaksi." class="flex items-center gap-2 rounded-2xl border-2 px-4 py-2 transition-all hover:-translate-y-1 hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-blue-500/20 disabled:hover:translate-y-0 disabled:hover:shadow-none border-slate-200 bg-white text-slate-600 hover:border-slate-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scale size-5" aria-hidden="true"><path d="M12 3v18"></path><path d="m19 8 3 8a5 5 0 0 1-6 0zV7"></path><path d="M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1"></path><path d="m5 8 3 8a5 5 0 0 1-6 0zV7"></path><path d="M7 21h10"></path></svg><span class="font-bold">0</span><span class="hidden text-xs font-medium text-slate-500 sm:inline">Perlu Koreksi / Kritis</span></button></div></div></article><div class="mt-20 border-t-8 border-slate-900 pt-16"><h3 class="mb-8 text-2xl font-black uppercase italic tracking-tighter text-slate-900">Artikel Terkait Lainnya</h3><div class="grid gap-6 md:grid-cols-3"><a class="group flex flex-col border-4 border-slate-900 bg-white p-6 shadow-[8px_8px_0px_0px_rgba(15,23,42,1)] transition-transform hover:-translate-y-2" href="/id/artikel/memahami-aspek-hukum-dan-regulasi-aksesibilitas-digital-ada-eaa-dll"><h4 class="mb-3 text-lg font-black uppercase italic text-slate-900 group-hover:text-blue-600 line-clamp-2">Memahami Aspek Hukum dan Regulasi Aksesibilitas Digital (ADA, EAA, dll)</h4><p class="flex-1 text-sm font-medium leading-relaxed text-slate-600">Lanskap legal aksesibilitas web global: Dari Americans with Disabilities Act hingga European Accessibility Act.</p><div class="mt-6 flex items-center font-bold text-blue-700 group-hover:text-blue-800">Baca Selengkapnya<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-2 size-4 transition-transform group-hover:translate-x-1" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a class="group flex flex-col border-4 border-slate-900 bg-white p-6 shadow-[8px_8px_0px_0px_rgba(15,23,42,1)] transition-transform hover:-translate-y-2" href="/id/artikel/bahaya-simulasi-disabilitas-dan-membangun-empati-inklusif-di-perusahaan"><h4 class="mb-3 text-lg font-black uppercase italic text-slate-900 group-hover:text-blue-600 line-clamp-2">Bahaya Simulasi Disabilitas dan Membangun Empati Inklusif di Perusahaan</h4><p class="flex-1 text-sm font-medium leading-relaxed text-slate-600">Mengapa memakai penutup mata untuk berpura-pura tunanetra itu berbahaya? Pelajari cara membangun budaya desain inklusif yang sejati.</p><div class="mt-6 flex items-center font-bold text-blue-700 group-hover:text-blue-800">Baca Selengkapnya<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-2 size-4 transition-transform group-hover:translate-x-1" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a><a class="group flex flex-col border-4 border-slate-900 bg-white p-6 shadow-[8px_8px_0px_0px_rgba(15,23,42,1)] transition-transform hover:-translate-y-2" href="/id/artikel/enam-kunci-pengembangan-kursus-online-yang-aksesibel"><h4 class="mb-3 text-lg font-black uppercase italic text-slate-900 group-hover:text-blue-600 line-clamp-2">Enam Kunci Pengembangan Kursus Online yang Aksesibel</h4><p class="flex-1 text-sm font-medium leading-relaxed text-slate-600">Panduan strategis bagi dosen dan desainer instruksional untuk memastikan materi e-learning bebas dari hambatan.</p><div class="mt-6 flex items-center font-bold text-blue-700 group-hover:text-blue-800">Baca Selengkapnya<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-2 size-4 transition-transform group-hover:translate-x-1" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></a></div></div></div></main></main><footer class="mt-auto w-full border-t border-slate-200 bg-slate-100 dark:border-slate-800 dark:bg-slate-950 print:hidden"><div class="container px-4 py-16 md:px-8"><div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-4"><div class="flex flex-col space-y-6"><div class="text-left"><h2 class="text-xl font-black uppercase italic tracking-tighter text-slate-900 dark:text-slate-50">Disabilitas.com</h2><p class="mt-4 text-sm font-bold italic leading-relaxed text-slate-500 dark:text-slate-400">Hub Digital Pengembangan Karir Inklusif. Menghubungkan potensi talenta dengan industri melalui validasi institusi dan standar aksesibilitas digital.</p></div><div class="rounded-2xl border-2 border-slate-200 bg-white p-4 text-left shadow-sm transition-all hover:border-blue-500 dark:border-slate-800 dark:bg-slate-900"><span class="mb-2 block text-[10px] font-black uppercase tracking-widest text-slate-400">Pusat Keahlian</span><a href="https://dimaster.co.id" class="inline-flex items-center text-sm font-bold text-slate-900 transition-colors hover:text-blue-600 dark:text-slate-100 dark:hover:text-blue-400" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap mr-2 size-4 text-blue-600" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg> Dimaster Group <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link ml-1 size-3 opacity-30" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div></div><nav aria-label="Hub Pemangku Kepentingan" class="text-left"><h3 class="mb-6 text-[11px] font-black uppercase tracking-[0.2em] text-blue-600 dark:text-blue-400">Stakeholder Hub</h3><ul class="space-y-4 text-sm font-bold text-slate-600 dark:text-slate-400"><li><a class="transition-all hover:pl-1 hover:text-blue-600" href="/id/talent">Portal Talenta</a></li><li><a class="transition-all hover:pl-1 hover:text-blue-600" href="/id/perusahaan">Portal Pemberi Kerja</a></li><li><a class="transition-all hover:pl-1 hover:text-blue-600" href="/id/kampus">Portal Perguruan Tinggi</a></li><li><a class="transition-all hover:pl-1 hover:text-blue-600" href="/id/government">Portal Pemerintah</a></li><li><a class="transition-all hover:pl-1 hover:text-blue-600" href="/id/partner">Portal Mitra Organisasi</a></li></ul></nav><nav aria-label="Layanan dan Legalitas" class="text-left"><h3 class="mb-6 text-[11px] font-black uppercase tracking-[0.2em] text-slate-900 dark:text-slate-50">Layanan & Legal</h3><ul class="space-y-4 text-sm font-bold text-slate-600 dark:text-slate-400"><li><a class="text-purple-600 transition-all hover:text-purple-800 dark:text-purple-400" href="/id/bisnis/audit">Audit Aksesibilitas</a></li><li><a class="text-blue-600 transition-all hover:pl-1 hover:text-blue-800 dark:text-blue-400" href="/id/tools">Alat Aksesibilitas Gratis</a></li><li><a class="transition-all hover:pl-1 hover:text-blue-600" href="/id/aksesibilitas">Pernyataan Aksesibilitas</a></li><li><a class="text-red-600 transition-all hover:pl-1 hover:text-red-800 dark:text-red-400" href="/id/cek-akses">Cek Aksesibilitas</a></li><li><a class="transition-all hover:pl-1 hover:text-blue-600" href="/id/privasi">Kebijakan Privasi</a></li><li><a class="transition-all hover:pl-1 hover:text-blue-600" href="/id/kontak">Hubungi Kami</a></li></ul></nav><div class="text-left"><h3 class="mb-6 text-[11px] font-black uppercase tracking-[0.2em] text-slate-900 dark:text-slate-50">Kantor Pusat</h3><address class="space-y-4 text-sm font-bold not-italic text-slate-600 dark:text-slate-400"><div class="group flex items-start"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin mr-3 size-5 shrink-0 text-blue-600 transition-transform group-hover:scale-110" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg><span class="leading-relaxed">Jl. Mulya Makarya No. A/1,<br/>Larangan, Tangerang,<br/>Banten 15154.</span></div><div class="group flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail mr-3 size-4 shrink-0 text-blue-600" aria-hidden="true"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg><a href="mailto:halo@disabilitas.com" class="transition-colors group-hover:text-blue-600">halo@disabilitas.com</a></div><div class="group flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone mr-3 size-4 shrink-0 text-blue-600" aria-hidden="true"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"></path></svg><a href="https://wa.me/6282310301799" target="_blank" rel="noopener noreferrer" class="transition-colors group-hover:text-blue-600">+62 823-1030-1799</a></div></address></div></div><div class="mt-16 border-t border-slate-200 pt-8 dark:border-slate-800"><div class="flex flex-col items-center justify-between gap-4 md:flex-row"><p class="text-[10px] font-black uppercase tracking-[0.3em] text-slate-400">© <!-- -->2026<!-- --> PT Dimaster Education Berprestasi.</p><div class="flex items-center gap-4 text-[9px] font-bold uppercase text-slate-400"><span class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check size-3 text-emerald-500" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg> WCAG 2.1 AA Compliant</span><span class="size-1 rounded-full bg-slate-300"></span><span>ISO 27001 Ready</span></div></div></div></div></footer></div><script src="/_next/static/chunks/webpack-f3431c5c918deb1b.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"4:\"$Sreact.fragment\"\n5:I[15244,[],\"\"]\n6:I[43866,[],\"\"]\n9:I[86213,[],\"OutletBoundary\"]\nb:I[86213,[],\"MetadataBoundary\"]\nd:I[86213,[],\"ViewportBoundary\"]\nf:I[87401,[\"4219\",\"static/chunks/app/global-error-de0cbc61949d6427.js\"],\"default\"]\n10:I[14627,[\"5730\",\"static/chunks/44530001-5ea03d37101ae639.js\",\"4839\",\"static/chunks/4839-a92f908409f97802.js\",\"4623\",\"static/chunks/4623-20ac7a1557f4495c.js\",\"7970\",\"static/chunks/7970-d8ee8f5b777713f4.js\",\"5669\",\"static/chunks/5669-04be93275c267fe5.js\",\"3276\",\"static/chunks/3276-1e85e01078c9d652.js\",\"4807\",\"static/chunks/4807-45b8e3a795fbcbfb.js\",\"3123\",\"static/chunks/app/(public)/%5Blang%5D/layout-84e53f07c5107763.js\"],\"ThemeProvider\"]\n11:I[53784,[\"5730\",\"static/chunks/44530001-5ea03d37101ae639.js\",\"4839\",\"static/chunks/4839-a92f908409f97802.js\",\"4623\",\"static/chunks/4623-20ac7a1557f4495c.js\",\"7970\",\"static/chunks/7970-d8ee8f5b777713f4.js\",\"5669\",\"static/chunks/5669-04be93275c267fe5.js\",\"3276\",\"static/chunks/3276-1e85e01078c9d652.js\",\"4807\",\"static/chunks/4807-45b8e3a795fbcbfb.js\",\"3123\",\"static/chunks/app/(public)/%5Blang%5D/layout-84e53f07c5107763.js\"],\"SiteHeader\"]\n12:I[97527,[\"617\",\"static/chunks/app/(public)/%5Blang%5D/error-152dc043c6b96d59.js\"],\"default\"]\n13:I[73957,[\"4839\",\"static/chunks/4839-a92f908409f97802.js\",\"1071\",\"static/chunks/app/(public)/%5Blang%5D/not-found-cf974c6db5ebe2e9.js\"],\"default\"]\n14:I[63925,[\"5730\",\"static/chunks/44530001-5ea03d37101ae639.js\",\"4839\",\"static/chunks/4839-a92f908409f97802.js\",\"4623\",\"static/chunks/4623-20ac7a1557f4495c.js\",\"7970\",\"static/chunks/7970-d8ee8f5b777713f4.js\",\"5669\",\"static/chunks/5669-04be93275c267fe5.js\",\"3276\",\"static/chunks/3276-1e85e01078c9d652.js\",\"4807\",\"static/chunks/4807-45b8e3a795fbcbfb.js\",\"3123\",\"static/chunks/app/(public)/%5Blang%5D/layout-84e53f07c5107763.js\"],\"Omnibar\"]\n15:I[33691,[\"5730\",\"static/chunks/44530001-5ea03d37101ae639.js\",\"4839\",\"static/chunks/4839-a92f908409f97802.js\",\"4623\",\"static/chunks/4623-20ac7a1557f4495c.js\",\"7970\",\"static/chunks/7970-d8ee8f5b777713f4.js\",\"5669\",\"static/chunks/5669-04be93275c267fe5.js\",\"3276\",\"static/chunks/3276-1e85e01078c9d652.js\",\"4807\",\"static/chunks/4807-45b8e3a795fbcbfb.js\",\"3123\",\"static/chunks/app/(public)/%5Blang%5D/layout-84e53f07c5107763.js\"],\"SiteFooter\"]\n16:I[53704,[\"5730\",\"static/chunks/44530001-5ea03d37101ae639.js\",\"4839\",\"static/chunks/4839-a92f908409f97802.js\",\"4623\",\"static/chunks/4623-20ac7a1557f4495c.js\",\"7970\",\"static/chunks/7970-d8ee8f5b777713f4.js\",\"5669\",\"static/chunks/5669-04be93275c267fe5.js\",\"3276\",\"static/chunks/3276-1e85e01078c9d652.js\",\"4807\",\"static/chunks/4807-45b8e3a795fbcbfb.js\",\"3123\",\"static/chunks/app/(public)/%5Blang%5D/layout-84e53f07c5107763.js\"],\"\"]\n1:HL[\"/_next/static/media/e4af272ccee01ff0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n2:HL[\"/_next/static/css/3d305dfa369e5a4f.css\",\"style\"]\n3:HL[\"/_next/static/css/b782f198e237d337.css\",\"style\"]\n0:{\"P\":null,\"b\":\"qYs9i7xP-0s0z3FTI-xas\",\"p\":\"\",\"c\":[\"\",\"id\",\"artikel\",\"tunanetra-meraba-website-navigasi-dan-screen-reader\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"(public)\",{\"children\":[[\"lang\",\"id\",\"d\"],{\"children\":[\"artikel\",{\"children\":[[\"slug\",\"tunanetra-meraba-website-navigasi-dan-screen-reader\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true]}]}],[\"\",[\"$\",\"$4\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-colo"])</script><script>self.__next_f.push([1,"r-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}]]}],{\"children\":[\"(public)\",[\"$\",\"$4\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(public)\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:1:props:children:1:props:notFound:1:props:style\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":\"$0:f:0:1:1:props:children:1:props:notFound:1:props:children:props:children:1:props:style\",\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:1:props:children:1:props:notFound:1:props:children:props:children:2:props:style\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$0:f:0:1:1:props:children:1:props:notFound:1:props:children:props:children:2:props:children:props:style\",\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}]]}],{\"children\":[[\"lang\",\"id\",\"d\"],[\"$\",\"$4\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/3d305dfa369e5a4f.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/b782f198e237d337.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],\"$L7\"]}],{\"children\":[\"artikel\",[\"$\",\"$4\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(public)\",\"children\",\"$0:f:0:1:2:children:2:children:0\",\"children\",\"artikel\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]]}],{\"children\":[[\"slug\",\"tunanetra-meraba-website-navigasi-dan-screen-reader\",\"d\"],[\"$\",\"$4\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(public)\",\"children\",\"$0:f:0:1:2:children:2:children:0\",\"children\",\"artikel\",\"children\",\"$0:f:0:1:2:children:2:children:2:children:2:children:0\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$4\",\"c\",{\"children\":[\"$L8\",null,[\"$\",\"$L9\",null,{\"children\":\"$La\"}]]}],{},null]},null]},null]},null]},null]},null],[\"$\",\"$4\",\"h\",{\"children\":[null,[\"$\",\"$4\",\"KRciCh4pYwKy0ija_bBCF\",{\"children\":[[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\"}]]}]]}]]],\"m\":\"$undefined\",\"G\":[\"$f\",[]],\"s\":false,\"S\":false}\n7:[\"$\",\"html\",null,{\"lang\":\"id\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"className\":\"min-h-screen bg-background font-sans antialiased __variable_f367f3\",\"children\":[\"$\",\"$L10\",null,{\"attribute\":\"class\",\"defaultTheme\":\"system\",\"enableSystem\":true,\"children\":[\"$\",\"div\",null,{\"className\":\"relative flex min-h-screen flex-col\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#main-content\",\"className\":\"sr-only outline-none transitio"])</script><script>self.__next_f.push([1,"n-all focus:not-sr-only focus:fixed focus:left-6 focus:top-6 focus:z-[100] focus:rounded-2xl focus:border-4 focus:border-slate-900 focus:bg-blue-600 focus:px-8 focus:py-5 focus:font-black focus:uppercase focus:text-white focus:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]\",\"children\":\"Lompat ke Konten Utama\"}],[\"$\",\"$L11\",null,{\"lang\":\"id\"}],[\"$\",\"main\",null,{\"id\":\"main-content\",\"className\":\"flex-1 outline-none\",\"tabIndex\":-1,\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(public)\",\"children\",\"$0:f:0:1:2:children:2:children:0\",\"children\"],\"error\":\"$12\",\"errorStyles\":[],\"errorScripts\":[],\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[\"$\",\"$L13\",null,{}],\"notFoundStyles\":[]}]}],[\"$\",\"$L14\",null,{\"lang\":\"id\"}],[\"$\",\"$L15\",null,{\"lang\":\"id\"}],[\"$\",\"$L16\",null,{\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-Q9H6SLY8R0\",\"strategy\":\"afterInteractive\"}],[\"$\",\"$L16\",null,{\"id\":\"google-analytics\",\"strategy\":\"afterInteractive\",\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag(){dataLayer.push(arguments);}\\n gtag('js', new Date());\\n gtag('config', 'G-Q9H6SLY8R0');\\n \"}]]}]}]}]}]\ne:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\nc:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"1\",{\"children\":\"Tunanetra Meraba Website: Navigasi dan Screen Reader | Disabilitas.com | Disabilitas.com\"}],[\"$\",\"meta\",\"2\",{\"name\":\"description\",\"content\":\"Memahami secara teknis bagaimana pengguna tunanetra berinteraksi dengan website menggunakan pembaca layar dan struktur semantik HTML.\"}],[\"$\",\"meta\",\"3\",{\"name\":\"author\",\"content\":\"Redaksi Disabilitas.com\"}],[\"$\",\"link\",\"4\",{\"rel\":\"manifest\",\"href\":\"/manifest.webmanifest\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"meta\",\"5\",{\"name\":\"keywords\",\"content\":\"lowongan disabilitas,audit aksesibilitas,inklusi kerja,audit SPBE,Dimaster Group,ASN Inklusif\"}],[\"$\",\"link\",\"6\",{\"rel\":\"canonical\",\"href\":\"https://disabilitas.com/id/artikel/tunanetra-meraba-website-navigasi-dan-screen-reader\"}],[\"$\",\"link\",\"7\",{\"rel\":\"alternate\",\"hrefLang\":\"id\",\"href\":\"https://disabilitas.com/id/artikel/tunanetra-meraba-website-navigasi-dan-screen-reader\"}],[\"$\",\"link\",\"8\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://disabilitas.com/en/artikel/blind-users-navigating-websites-screen-readers-semantics\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:title\",\"content\":\"Tunanetra Meraba Website: Navigasi dan Screen Reader | Disabilitas.com\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:description\",\"content\":\"Memahami secara teknis bagaimana pengguna tunanetra berinteraksi dengan website menggunakan pembaca layar dan struktur semantik HTML.\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:url\",\"content\":\"https://disabilitas.com/id/artikel/tunanetra-meraba-website-navigasi-dan-screen-reader\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:title\",\"content\":\"Tunanetra Meraba Website: Navigasi dan Screen Reader | Disabilitas.com\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:description\",\"content\":\"Memahami secara teknis bagaimana pengguna tunanetra berinteraksi dengan website menggunakan pembaca layar dan struktur semantik HTML.\"}],[\"$\",\"link\",\"16\",{\"rel\":\"icon\",\"href\":\"/logo.png\"}]]\na:null\n17:I[15028,[\"4839\",\"static/chunks/4839-a92f908409f97802.js\",\"2101\",\"static/chunks/app/(public)/%5Blang%5D/artikel/%5Bslug%5D/page-5c7e89565a0a70f8.js\"],\"ReadingProgressBar\"]\n18:I[44839,[\"4839\",\"static/chunks/4839-a92f908409f97802.js\",\"2101\",\"static/chunks/app/(public)/%5Blang%5D/artikel/%5Bslug%5D/page-5c7e89565a0a70f8.js\"],\"\"]\n19:I[79310,[\"4839\",\"static/chunks/4839-a92f908409f97802.js\",\"2101\",\"static/chunks/app/(public)/%5Blang%5D/artikel/%5Bslug%5D/page-5c7e89565a0a70f8.js\"],\"default\"]\n1a:I[91975,[\"4839\",\"static/chunks/4839-a92f908409f97802.js\",\"2101\",\"static/chunks/app/(public)/%5Blang%5D/artikel/%5Bslug%5D/page-5c7e89565a0a70f8.js\"],\"ViewCounter\"]\n1b:I["])</script><script>self.__next_f.push([1,"91975,[\"4839\",\"static/chunks/4839-a92f908409f97802.js\",\"2101\",\"static/chunks/app/(public)/%5Blang%5D/artikel/%5Bslug%5D/page-5c7e89565a0a70f8.js\"],\"ArticleUtilities\"]\n1e:I[13543,[\"4839\",\"static/chunks/4839-a92f908409f97802.js\",\"2101\",\"static/chunks/app/(public)/%5Blang%5D/artikel/%5Bslug%5D/page-5c7e89565a0a70f8.js\"],\"ArticleReactions\"]\n1c:T1b49,\u003ch2\u003eTunanetra Meraba Website: Menyelami Navigasi Screen Reader\u003c/h2\u003e\u003cp\u003eBagi pengguna awam, sebuah halaman web adalah pengalaman visual dua dimensi yang penuh warna, tata letak grid, gambar, dan tipografi. Namun, bagi pengguna tunanetra, web adalah pengalaman \u003cstrong\u003elinear satu dimensi\u003c/strong\u003e yang dibacakan baris demi baris oleh perangkat lunak \u003cem\u003eScreen Reader\u003c/em\u003e (Pembaca Layar).\u003c/p\u003e\n\u003cp\u003eMemahami cara kerja \u003cem\u003eScreen Reader\u003c/em\u003e—serta tantangan nyata yang dihadapi penggunanya—adalah langkah fundamental pertama dalam menciptakan produk digital yang benar-benar inklusif. Artikel ini akan membedah secara teknis bagaimana desain antarmuka dikonversi menjadi audio, dan mengapa penulisan kode HTML yang semantik adalah kunci utamanya.\u003c/p\u003e\n\u003chr\u003e\n\u003ch2\u003e1. Bagaimana Screen Reader Bekerja?\u003c/h2\u003e\u003cp\u003e\u003cem\u003eScreen reader\u003c/em\u003e seperti \u003cstrong\u003eJAWS\u003c/strong\u003e, \u003cstrong\u003eNVDA\u003c/strong\u003e (Windows), dan \u003cstrong\u003eVoiceOver\u003c/strong\u003e (macOS/iOS) tidak \u0026quot;melihat\u0026quot; layar secara visual. Sebaliknya, mereka berinteraksi langsung dengan \u003cem\u003eAccessibility Tree\u003c/em\u003e (Pohon Aksesibilitas)—sebuah representasi data yang dibangun oleh browser berdasarkan \u003cem\u003eDocument Object Model\u003c/em\u003e (DOM).\u003c/p\u003e\n\u003ch3\u003eKonsep \"Virtual Buffer\"\u003c/h3\u003e\nSaat sebuah halaman dimuat, \u003cem\u003escreen reader\u003c/em\u003e membuat salinan virtual dari konten halaman yang disebut \u003cem\u003eVirtual Buffer\u003c/em\u003e. Pengguna menavigasi \u003cem\u003ebuffer\u003c/em\u003e ini menggunakan \u003cem\u003ekeyboard\u003c/em\u003e (biasanya tombol panah atas/bawah), bukan dengan memindahkan kursor \u003cem\u003emouse\u003c/em\u003e. \u003cp\u003eInilah mengapa urutan elemen di dalam kode HTML (DOM order) sangatlah krusial. Jika secara visual sebuah elemen berada di kiri, namun di dalam HTML elemen tersebut ditulis paling bawah, maka pengguna \u003cem\u003escreen reader\u003c/em\u003e akan mendengarnya di urutan paling akhir.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e[!CAUTION]\n\u003cstrong\u003eBahaya Manipulasi CSS:\u003c/strong\u003e Jangan menggunakan properti CSS seperti \u003ccode\u003efloat\u003c/code\u003e, \u003ccode\u003eflex-direction: row-reverse\u003c/code\u003e, atau \u003ccode\u003eorder\u003c/code\u003e untuk mengubah posisi visual elemen secara radikal jika hal itu merusak urutan logis DOM. \u003cem\u003eScreen reader\u003c/em\u003e membaca urutan DOM, bukan urutan visual.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003chr\u003e\n\u003ch2\u003e2. Navigasi Melalui Landmark HTML5\u003c/h2\u003e\u003cp\u003ePengguna tunanetra jarang membaca halaman dari ujung atas hingga bawah secara berurutan. Mereka menggunakan fitur pintasan (\u003cem\u003eshortcuts\u003c/em\u003e) pada \u003cem\u003escreen reader\u003c/em\u003e untuk melompat langsung ke bagian yang mereka butuhkan. \u003c/p\u003e\n\u003cp\u003e\u003cem\u003eLandmarks\u003c/em\u003e (Markah Tanah) adalah cara utama pengguna \u0026quot;memetakan\u0026quot; halaman. Dengan menekan sebuah tombol, mereka bisa melihat daftar area utama halaman.\u003c/p\u003e\n\u003ch3\u003eContoh Implementasi Semantik\u003c/h3\u003e\nHindari penggunaan elemen generik `\u003cdiv\u003e` untuk struktur utama. Gunakan tag HTML5 yang memiliki makna bawaan:\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;!-- BURUK: Tidak memiliki makna semantik --\u0026gt;\n\u0026lt;div class=\u0026quot;header\u0026quot;\u0026gt;...\u0026lt;/div\u0026gt;\n\u0026lt;div class=\u0026quot;sidebar\u0026quot;\u0026gt;...\u0026lt;/div\u0026gt;\n\u0026lt;div class=\u0026quot;content\u0026quot;\u0026gt;...\u0026lt;/div\u0026gt;\n\u0026lt;div class=\u0026quot;footer\u0026quot;\u0026gt;...\u0026lt;/div\u0026gt;\n\n\u0026lt;!-- BAIK: Dikenali sebagai Landmark oleh Screen Reader --\u0026gt;\n\u0026lt;header\u0026gt;...\u0026lt;/header\u0026gt;\n\u0026lt;aside\u0026gt;...\u0026lt;/aside\u0026gt;\n\u0026lt;main\u0026gt;...\u0026lt;/main\u0026gt;\n\u0026lt;footer\u0026gt;...\u0026lt;/footer\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eJika terpaksa menggunakan \u003ccode\u003e\u0026lt;div\u0026gt;\u003c/code\u003e (misalnya karena keterbatasan \u003cem\u003eframework\u003c/em\u003e legacy), Anda harus menggunakan atribut \u003ccode\u003erole\u003c/code\u003e dari spesifikasi ARIA: \u003ccode\u003e\u0026lt;div role=\u0026quot;main\u0026quot;\u0026gt;\u003c/code\u003e. Namun, hukum pertama ARIA adalah: \u003cstrong\u003eGunakan HTML asli (\u003cem\u003enative\u003c/em\u003e) jika memungkinkan.\u003c/strong\u003e\u003c/p\u003e\n\u003chr\u003e\n\u003ch2\u003e3. Hierarki Heading (Judul) Sebagai Kerangka Halaman\u003c/h2\u003e\u003cp\u003eSelain \u003cem\u003elandmarks\u003c/em\u003e, metode navigasi terpopuler kedua bagi tunanetra adalah mel"])</script><script>self.__next_f.push([1,"ompat antar \u003cem\u003eHeading\u003c/em\u003e (\u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e hingga \u003ccode\u003e\u0026lt;h6\u0026gt;\u003c/code\u003e). \u003cem\u003eScreen reader\u003c/em\u003e memungkinkan pengguna menekan tombol \u0026quot;H\u0026quot; untuk melompat ke judul berikutnya, memberikan gambaran cepat tentang topik apa saja yang ada di halaman tersebut.\u003c/p\u003e\n\u003ch3\u003eAturan Emas Heading:\u003c/h3\u003e\n1. \u003cstrong\u003eGunakan hanya satu `\u003ch1\u003e`:\u003c/strong\u003e `\u003cH1\u003e` harus mendeskripsikan tujuan utama dari halaman tersebut (biasanya sama dengan elemen `\u003ctitle\u003e`).\n2. \u003cstrong\u003eJangan melompati level:\u003c/strong\u003e Jangan gunakan `\u003ch3\u003e` tepat setelah `\u003ch1\u003e` hanya karena Anda menyukai ukuran \u003cem\u003efont\u003c/em\u003e-nya secara visual. Urutan harus logis (`\u003ch1\u003e` -\u003e `\u003ch2\u003e` -\u003e `\u003ch3\u003e`).\n3. \u003cstrong\u003ePisahkan gaya visual dari struktur:\u003c/strong\u003e Jika `\u003ch2\u003e` terasa terlalu besar, gunakan CSS untuk mengecilkan ukurannya, jangan mengubah tag HTML-nya menjadi `\u003ch4\u003e`.\u003chr\u003e\n\u003ch2\u003e4. Teks Tautan yang Tidak Ambigu\u003c/h2\u003e\u003cp\u003eBayangkan Anda mengaktifkan fitur \u003cem\u003escreen reader\u003c/em\u003e yang merangkum seluruh tautan (link) di halaman menjadi sebuah daftar (\u003cem\u003eList of Links\u003c/em\u003e).\u003c/p\u003e\n\u003cp\u003eJika Anda menggunakan teks seperti:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u0026quot;Klik di sini\u0026quot;\u003c/li\u003e\n\u003cli\u003e\u0026quot;Baca selengkapnya\u0026quot;\u003c/li\u003e\n\u003cli\u003e\u0026quot;Lebih lanjut\u0026quot;\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eMaka daftar tautan yang didengar pengguna tunanetra adalah: \u003cem\u003e\u0026quot;Klik di sini, Klik di sini, Baca selengkapnya\u0026quot;\u003c/em\u003e. Ini sama sekali tidak memberikan konteks ke mana tautan tersebut akan membawa mereka.\u003c/p\u003e\n\u003ch3\u003eSolusi Tautan Deskriptif\u003c/h3\u003e\nTeks tautan harus dapat dipahami secara mandiri (\u003cem\u003estandalone\u003c/em\u003e).\n- \u003cstrong\u003eBuruk:\u003c/strong\u003e Untuk melihat laporan keuangan, [klik di sini].\n- \u003cstrong\u003eBaik:\u003c/strong\u003e Silakan tinjau [laporan keuangan tahunan] kami.\u003cp\u003eJika desain visual bersikeras menggunakan tombol bertuliskan \u0026quot;Read More\u0026quot;, Anda dapat menyembunyikan teks konteks tambahan secara visual (menggunakan kelas \u003ccode\u003e.sr-only\u003c/code\u003e), tetapi tetap dapat dibaca oleh \u003cem\u003escreen reader\u003c/em\u003e.\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;a href=\u0026quot;/berita/123\u0026quot; class=\u0026quot;btn\u0026quot;\u0026gt;\n Baca selengkapnya \u0026lt;span class=\u0026quot;sr-only\u0026quot;\u0026gt;tentang rilis fitur aksesibilitas baru\u0026lt;/span\u0026gt;\n\u0026lt;/a\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\u003chr\u003e\n\u003ch2\u003e5. Kesimpulan: Aksesibilitas adalah Akuntabilitas\u003c/h2\u003e\u003cp\u003eMenulis kode yang aksesibel pada dasarnya adalah menulis kode HTML yang baik, bersih, dan sesuai standar. Saat Anda mengabaikan semantik HTML, Anda tidak hanya menyulitkan mesin pencari (SEO), tetapi Anda secara harfiah telah menutup pintu situs Anda bagi jutaan pengguna yang mengandalkan perangkat teknologi asistif.\u003c/p\u003e\n\u003cp\u003eMulailah dengan mencoba mencabut kabel \u003cem\u003emouse\u003c/em\u003e Anda, nyalakan \u003cem\u003eScreen Reader\u003c/em\u003e bawaan komputer Anda (Narrator di Windows atau VoiceOver di Mac), dan cobalah melakukan pembelian atau mengisi formulir di situs web yang sedang Anda bangun.\u003c/p\u003e\n\u003chr\u003e\n\u003ch3\u003eReferensi\u003c/h3\u003e\nArtikel ini disusun dengan merujuk pada prinsip-prinsip desain instruksional, navigasi disabilitas, dan semantik HTML tingkat lanjut sebagaimana dikupas tuntas dalam \u003cstrong\u003ePractical Web Accessibility\u003c/strong\u003e oleh Ashley Firth. Pemahaman teknis mendalam tentang \u003cem\u003eScreen Reader\u003c/em\u003e dan navigasi \u003cem\u003ekeyboard\u003c/em\u003e diadaptasi langsung dari filosofi desain inklusif yang diajarkan dalam literatur tersebut.1d:T2358,\u003ch2 id=\"tunanetra-meraba-website-menyelami-navigasi-screen-reader\"\u003eTunanetra Meraba Website: Menyelami Navigasi Screen Reader\u003c/h2\u003e\u003cp\u003eBagi pengguna awam, sebuah halaman web adalah pengalaman visual dua dimensi yang penuh warna, tata letak grid, gambar, dan tipografi. Namun, bagi pengguna tunanetra, web adalah pengalaman \u003cstrong\u003elinear satu dimensi\u003c/strong\u003e yang dibacakan baris demi baris oleh perangkat lunak \u003cem\u003eScreen Reader\u003c/em\u003e (Pembaca Layar).\u003c/p\u003e\n\u003cp\u003eMemahami cara kerja \u003cem\u003eScreen Reader\u003c/em\u003e—serta tantangan nyata yang dihadapi penggunanya—adalah langkah fundamental pertama dalam menciptakan produk digital yang benar-benar inklusif. Artikel ini akan membedah secara teknis bagaimana desain antarmuka dikonversi menjadi audio, dan mengapa penulisan kode HTML yang semantik adalah kunci utamanya.\u003c/p\u003e\n \u003cdiv class=\"my-8 rounded-xl "])</script><script>self.__next_f.push([1,"border-l-8 border-blue-600 bg-slate-50 p-6 shadow-[4px_4px_0px_0px_rgba(15,23,42,1)]\"\u003e\n \u003ch3 class=\"mb-1 text-[10px] font-black uppercase tracking-widest text-slate-500\"\u003eInsight Terkait\u003c/h3\u003e\n \u003ca href=\"/id/artikel/aksesibilitas-web-dan-kesehatan-mental-merancang-desain-yang-menenangkan\" class=\"text-xl font-black italic uppercase text-slate-900 transition-colors hover:text-blue-700\"\u003e\n Aksesibilitas Web dan Kesehatan Mental: Merancang Desain yang Menenangkan\n \u003c/a\u003e\n \u003c/div\u003e\n \n\u003chr\u003e\n\u003ch2 id=\"1-bagaimana-screen-reader-bekerja\"\u003e1. Bagaimana Screen Reader Bekerja?\u003c/h2\u003e\u003cp\u003e\u003cem\u003eScreen reader\u003c/em\u003e seperti \u003cstrong\u003eJAWS\u003c/strong\u003e, \u003cstrong\u003eNVDA\u003c/strong\u003e (Windows), dan \u003cstrong\u003eVoiceOver\u003c/strong\u003e (macOS/iOS) tidak \u0026quot;melihat\u0026quot; layar secara visual. Sebaliknya, mereka berinteraksi langsung dengan \u003cem\u003eAccessibility Tree\u003c/em\u003e (Pohon Aksesibilitas)—sebuah representasi data yang dibangun oleh browser berdasarkan \u003cem\u003eDocument Object Model\u003c/em\u003e (DOM).\u003c/p\u003e\n\u003ch3 id=\"konsep-virtual-buffer\"\u003eKonsep \"Virtual Buffer\"\u003c/h3\u003e\nSaat sebuah halaman dimuat, \u003cem\u003escreen reader\u003c/em\u003e membuat salinan virtual dari konten halaman yang disebut \u003cem\u003eVirtual Buffer\u003c/em\u003e. Pengguna menavigasi \u003cem\u003ebuffer\u003c/em\u003e ini menggunakan \u003cem\u003ekeyboard\u003c/em\u003e (biasanya tombol panah atas/bawah), bukan dengan memindahkan kursor \u003cem\u003emouse\u003c/em\u003e. \u003cp\u003eInilah mengapa urutan elemen di dalam kode HTML (DOM order) sangatlah krusial. Jika secara visual sebuah elemen berada di kiri, namun di dalam HTML elemen tersebut ditulis paling bawah, maka pengguna \u003cem\u003escreen reader\u003c/em\u003e akan mendengarnya di urutan paling akhir.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e[!CAUTION]\n\u003cstrong\u003eBahaya Manipulasi CSS:\u003c/strong\u003e Jangan menggunakan properti CSS seperti \u003ccode\u003efloat\u003c/code\u003e, \u003ccode\u003eflex-direction: row-reverse\u003c/code\u003e, atau \u003ccode\u003eorder\u003c/code\u003e untuk mengubah posisi visual elemen secara radikal jika hal itu merusak urutan logis DOM. \u003cem\u003eScreen reader\u003c/em\u003e membaca urutan DOM, bukan urutan visual.\u003c/p\u003e\n \u003cdiv class=\"my-8 rounded-xl border-l-8 border-blue-600 bg-slate-50 p-6 shadow-[4px_4px_0px_0px_rgba(15,23,42,1)]\"\u003e\n \u003ch3 class=\"mb-1 text-[10px] font-black uppercase tracking-widest text-slate-500\"\u003eInsight Terkait\u003c/h3\u003e\n \u003ca href=\"/id/artikel/desain-pembelajaran-online-lms-yang-ramah-mahasiswa-disabilitas\" class=\"text-xl font-black italic uppercase text-slate-900 transition-colors hover:text-blue-700\"\u003e\n Desain Pembelajaran Online (LMS) yang Ramah Mahasiswa Disabilitas\n \u003c/a\u003e\n \u003c/div\u003e\n \n\u003c/blockquote\u003e\n\u003chr\u003e\n\u003ch2 id=\"2-navigasi-melalui-landmark-html5\"\u003e2. Navigasi Melalui Landmark HTML5\u003c/h2\u003e\u003cp\u003ePengguna tunanetra jarang membaca halaman dari ujung atas hingga bawah secara berurutan. Mereka menggunakan fitur pintasan (\u003cem\u003eshortcuts\u003c/em\u003e) pada \u003cem\u003escreen reader\u003c/em\u003e untuk melompat langsung ke bagian yang mereka butuhkan. \u003c/p\u003e\n\u003cp\u003e\u003cem\u003eLandmarks\u003c/em\u003e (Markah Tanah) adalah cara utama pengguna \u0026quot;memetakan\u0026quot; halaman. Dengan menekan sebuah tombol, mereka bisa melihat daftar area utama halaman.\u003c/p\u003e\n\u003ch3 id=\"contoh-implementasi-semantik\"\u003eContoh Implementasi Semantik\u003c/h3\u003e\nHindari penggunaan elemen generik `\u003cdiv\u003e` untuk struktur utama. Gunakan tag HTML5 yang memiliki makna bawaan:\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;!-- BURUK: Tidak memiliki makna semantik --\u0026gt;\n\u0026lt;div class=\u0026quot;header\u0026quot;\u0026gt;...\u0026lt;/div\u0026gt;\n\u0026lt;div class=\u0026quot;sidebar\u0026quot;\u0026gt;...\u0026lt;/div\u0026gt;\n\u0026lt;div class=\u0026quot;content\u0026quot;\u0026gt;...\u0026lt;/div\u0026gt;\n\u0026lt;div class=\u0026quot;footer\u0026quot;\u0026gt;...\u0026lt;/div\u0026gt;\n\n\u0026lt;!-- BAIK: Dikenali sebagai Landmark oleh Screen Reader --\u0026gt;\n\u0026lt;header\u0026gt;...\u0026lt;/header\u0026gt;\n\u0026lt;aside\u0026gt;...\u0026lt;/aside\u0026gt;\n\u0026lt;main\u0026gt;...\u0026lt;/main\u0026gt;\n\u0026lt;footer\u0026gt;...\u0026lt;/footer\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eJika terpaksa menggunakan \u003ccode\u003e\u0026lt;div\u0026gt;\u003c/code\u003e (misalnya karena keterbatasan \u003cem\u003eframework\u003c/em\u003e legacy), Anda harus menggunakan atribut \u003ccode\u003erole\u003c/code\u003e dari spesifikasi ARIA: \u003ccode\u003e\u0026lt;div role=\u0026quot;main\u0026quot;\u0026gt;\u003c/code\u003e. Namun, hukum pertama ARIA adalah: \u003cstrong\u003eGunakan HTML asli (\u003cem\u003enative\u003c/em\u003e) jika memungkinkan.\u003c/strong\u003e\u003c/p\u003e\n \u003cdiv class=\"my-8 rounded-xl border-l-"])</script><script>self.__next_f.push([1,"8 border-blue-600 bg-slate-50 p-6 shadow-[4px_4px_0px_0px_rgba(15,23,42,1)]\"\u003e\n \u003ch3 class=\"mb-1 text-[10px] font-black uppercase tracking-widest text-slate-500\"\u003eInsight Terkait\u003c/h3\u003e\n \u003ca href=\"/id/artikel/autentikasi-aksesibel-login-yang-aman-tanpa-membebani-kognitif\" class=\"text-xl font-black italic uppercase text-slate-900 transition-colors hover:text-blue-700\"\u003e\n Autentikasi Aksesibel: Login yang Aman Tanpa Membebani Kognitif\n \u003c/a\u003e\n \u003c/div\u003e\n \n\u003chr\u003e\n\u003ch2 id=\"3-hierarki-heading-judul-sebagai-kerangka-halaman\"\u003e3. Hierarki Heading (Judul) Sebagai Kerangka Halaman\u003c/h2\u003e\u003cp\u003eSelain \u003cem\u003elandmarks\u003c/em\u003e, metode navigasi terpopuler kedua bagi tunanetra adalah melompat antar \u003cem\u003eHeading\u003c/em\u003e (\u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e hingga \u003ccode\u003e\u0026lt;h6\u0026gt;\u003c/code\u003e). \u003cem\u003eScreen reader\u003c/em\u003e memungkinkan pengguna menekan tombol \u0026quot;H\u0026quot; untuk melompat ke judul berikutnya, memberikan gambaran cepat tentang topik apa saja yang ada di halaman tersebut.\u003c/p\u003e\n\u003ch3 id=\"aturan-emas-heading\"\u003eAturan Emas Heading:\u003c/h3\u003e\n1. \u003cstrong\u003eGunakan hanya satu `\u003ch1\u003e`:\u003c/strong\u003e `\u003cH1\u003e` harus mendeskripsikan tujuan utama dari halaman tersebut (biasanya sama dengan elemen `\u003ctitle\u003e`).\n2. \u003cstrong\u003eJangan melompati level:\u003c/strong\u003e Jangan gunakan `\u003ch3\u003e` tepat setelah `\u003ch1\u003e` hanya karena Anda menyukai ukuran \u003cem\u003efont\u003c/em\u003e-nya secara visual. Urutan harus logis (`\u003ch1\u003e` -\u003e `\u003ch2\u003e` -\u003e `\u003ch3\u003e`).\n3. \u003cstrong\u003ePisahkan gaya visual dari struktur:\u003c/strong\u003e Jika `\u003ch2\u003e` terasa terlalu besar, gunakan CSS untuk mengecilkan ukurannya, jangan mengubah tag HTML-nya menjadi `\u003ch4\u003e`.\u003chr\u003e\n\u003ch2 id=\"4-teks-tautan-yang-tidak-ambigu\"\u003e4. Teks Tautan yang Tidak Ambigu\u003c/h2\u003e\u003cp\u003eBayangkan Anda mengaktifkan fitur \u003cem\u003escreen reader\u003c/em\u003e yang merangkum seluruh tautan (link) di halaman menjadi sebuah daftar (\u003cem\u003eList of Links\u003c/em\u003e).\u003c/p\u003e\n\u003cp\u003eJika Anda menggunakan teks seperti:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u0026quot;Klik di sini\u0026quot;\u003c/li\u003e\n\u003cli\u003e\u0026quot;Baca selengkapnya\u0026quot;\u003c/li\u003e\n\u003cli\u003e\u0026quot;Lebih lanjut\u0026quot;\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eMaka daftar tautan yang didengar pengguna tunanetra adalah: \u003cem\u003e\u0026quot;Klik di sini, Klik di sini, Baca selengkapnya\u0026quot;\u003c/em\u003e. Ini sama sekali tidak memberikan konteks ke mana tautan tersebut akan membawa mereka.\u003c/p\u003e\n\u003ch3 id=\"solusi-tautan-deskriptif\"\u003eSolusi Tautan Deskriptif\u003c/h3\u003e\nTeks tautan harus dapat dipahami secara mandiri (\u003cem\u003estandalone\u003c/em\u003e).\n- \u003cstrong\u003eBuruk:\u003c/strong\u003e Untuk melihat laporan keuangan, [klik di sini].\n- \u003cstrong\u003eBaik:\u003c/strong\u003e Silakan tinjau [laporan keuangan tahunan] kami.\u003cp\u003eJika desain visual bersikeras menggunakan tombol bertuliskan \u0026quot;Read More\u0026quot;, Anda dapat menyembunyikan teks konteks tambahan secara visual (menggunakan kelas \u003ccode\u003e.sr-only\u003c/code\u003e), tetapi tetap dapat dibaca oleh \u003cem\u003escreen reader\u003c/em\u003e.\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;a href=\u0026quot;/berita/123\u0026quot; class=\u0026quot;btn\u0026quot;\u0026gt;\n Baca selengkapnya \u0026lt;span class=\u0026quot;sr-only\u0026quot;\u0026gt;tentang rilis fitur aksesibilitas baru\u0026lt;/span\u0026gt;\n\u0026lt;/a\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\u003chr\u003e\n\u003ch2 id=\"5-kesimpulan-aksesibilitas-adalah-akuntabilitas\"\u003e5. Kesimpulan: Aksesibilitas adalah Akuntabilitas\u003c/h2\u003e\u003cp\u003eMenulis kode yang aksesibel pada dasarnya adalah menulis kode HTML yang baik, bersih, dan sesuai standar. Saat Anda mengabaikan semantik HTML, Anda tidak hanya menyulitkan mesin pencari (SEO), tetapi Anda secara harfiah telah menutup pintu situs Anda bagi jutaan pengguna yang mengandalkan perangkat teknologi asistif.\u003c/p\u003e\n\u003cp\u003eMulailah dengan mencoba mencabut kabel \u003cem\u003emouse\u003c/em\u003e Anda, nyalakan \u003cem\u003eScreen Reader\u003c/em\u003e bawaan komputer Anda (Narrator di Windows atau VoiceOver di Mac), dan cobalah melakukan pembelian atau mengisi formulir di situs web yang sedang Anda bangun.\u003c/p\u003e\n\u003chr\u003e\n\u003ch3 id=\"referensi\"\u003eReferensi\u003c/h3\u003e\nArtikel ini disusun dengan merujuk pada prinsip-prinsip desain instruksional, navigasi disabilitas, dan semantik HTML tingkat lanjut sebagaimana dikupas tuntas dalam \u003cstrong\u003ePractical Web Accessibility\u003c/strong\u003e oleh Ashley Firth. Pemahaman teknis mendalam tentang \u003cem\u003eScreen Reader\u003c/em\u003e dan navigasi \u003cem\u003ekeyboard\u003c/em\u003e diadaptasi langsung dari filosofi desain inklusif yang diajarkan dalam literatur ter"])</script><script>self.__next_f.push([1,"sebut.8:[\"$\",\"main\",null,{\"className\":\"min-h-screen bg-slate-50 pt-24 pb-20 selection:bg-blue-200\",\"children\":[[\"$\",\"$L17\",null,{}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"Article\\\",\\\"headline\\\":\\\"Tunanetra Meraba Website: Navigasi dan Screen Reader\\\",\\\"description\\\":\\\"Memahami secara teknis bagaimana pengguna tunanetra berinteraksi dengan website menggunakan pembaca layar dan struktur semantik HTML.\\\",\\\"author\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Redaksi Disabilitas.com\\\"},\\\"publisher\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Disabilitas.com\\\"},\\\"datePublished\\\":\\\"2026-07-07T05:06:59.04024+00:00\\\",\\\"dateModified\\\":\\\"2026-07-11T16:38:24.442231+00:00\\\",\\\"url\\\":\\\"https://disabilitas.com/id/artikel/tunanetra-meraba-website-navigasi-dan-screen-reader\\\"}\"}}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"BreadcrumbList\\\",\\\"itemListElement\\\":[{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":1,\\\"name\\\":\\\"Home\\\",\\\"item\\\":\\\"https://disabilitas.com/id\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":2,\\\"name\\\":\\\"Artikel\\\",\\\"item\\\":\\\"https://disabilitas.com/id/artikel\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":3,\\\"name\\\":\\\"Dasar Aksesibilitas\\\",\\\"item\\\":\\\"https://disabilitas.com/id/kategori/3b8db1f9-9dee-488d-87ec-156d97a326ea\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":4,\\\"name\\\":\\\"Tunanetra Meraba Website: Navigasi dan Screen Reader\\\",\\\"item\\\":\\\"https://disabilitas.com/id/artikel/tunanetra-meraba-website-navigasi-dan-screen-reader\\\"}]}\"}}],[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\",\"children\":[[\"$\",\"nav\",null,{\"aria-label\":\"Breadcrumb\",\"className\":\"mb-8\",\"children\":[\"$\",\"ol\",null,{\"className\":\"flex flex-wrap items-center gap-2 text-sm font-bold uppercase tracking-widest text-slate-500\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L18\",null,{\"href\":\"/id\",\"className\":\"hover:text-blue-700 transition-colors\",\"children\":\"Home\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L19\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"m9 18 6-6-6-6\",\"key\":\"mthhwq\"}]],\"className\":\"lucide-chevron-right size-4\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L18\",null,{\"href\":\"/id/artikel\",\"className\":\"hover:text-blue-700 transition-colors\",\"children\":\"Artikel\"}]}],[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L19\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$8:props:children:3:props:children:0:props:children:props:children:1:props:children:props:iconNode\",\"className\":\"lucide-chevron-right size-4\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L18\",null,{\"href\":\"/id/kategori/3b8db1f9-9dee-488d-87ec-156d97a326ea\",\"className\":\"hover:text-blue-700 transition-colors\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-slate-900 bg-emerald-400 px-2 py-0.5 border-2 border-slate-900 shadow-[2px_2px_0px_0px_rgba(15,23,42,1)]\",\"children\":\"Dasar Aksesibilitas\"}]}]}]],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L19\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$8:props:children:3:props:children:0:props:children:props:children:1:props:children:props:iconNode\",\"className\":\"lucide-chevron-right size-4\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"span\",null,{\"className\":\"text-slate-400 truncate max-w-[200px] sm:max-w-[400px] inline-block align-bottom\",\"aria-current\":\"page\",\"children\":\"Tunanetra Meraba Website: Navigasi dan Screen Reader\"}]}]]}]}],[\"$\",\"article\",null,{\"className\":\"mx-auto w-full max-w-4xl bg-white p-8 sm:p-12 rounded-[2.5rem] shadow-xl shadow-slate-200/50 border-4 border-slate-900\",\"children\":[[\"$\",\"header\",null,{\"className\":\"mb-12 border-b-8 border-slate-900 pb-8 text-left\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-6 flex flex-wrap items-center gap-4 text-[10px] font-black uppercase tracking-widest text-slate-500\",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-block border-2 border-slate-900 bg-emerald-400 px-3 py-1 text-slate-900 shadow-[2px_2px_0px_0px_rgba(15,23,42,1)]\",\"children\":\"Dasar Aksesibilitas\"}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"$L19\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"ci"])</script><script>self.__next_f.push([1,"rcle\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\",\"key\":\"1mglay\"}],[\"path\",{\"d\":\"M12 6v6l4 2\",\"key\":\"mmk7yg\"}]],\"className\":\"lucide-clock size-4 text-slate-400\"}],\"07 Juli 2026\"]}]]}],[\"$\",\"h1\",null,{\"className\":\"mb-8 text-4xl font-black uppercase italic leading-tight tracking-tighter text-slate-900 md:text-5xl lg:text-6xl\",\"children\":\"Tunanetra Meraba Website: Navigasi dan Screen Reader\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center gap-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-3\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex size-10 items-center justify-center border-2 border-slate-900 bg-blue-600 text-white shadow-[2px_2px_0px_0px_rgba(15,23,42,1)]\",\"children\":[\"$\",\"$L19\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\",\"key\":\"975kel\"}],[\"circle\",{\"cx\":\"12\",\"cy\":\"7\",\"r\":\"4\",\"key\":\"17ys0d\"}]],\"className\":\"lucide-user size-5\"}]}],[\"$\",\"div\",null,{\"className\":\"text-left\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-[10px] font-bold uppercase tracking-widest text-slate-500\",\"children\":\"Penulis\"}],[\"$\",\"p\",null,{\"className\":\"text-sm font-black uppercase text-slate-900\",\"children\":\"Redaksi Disabilitas.com\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"h-10 w-0.5 bg-slate-200 hidden sm:block\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-4 text-[10px] font-bold uppercase tracking-widest text-slate-500\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 border-2 border-slate-200 px-3 py-1.5\",\"children\":[[\"$\",\"$L19\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$8:props:children:3:props:children:1:props:children:0:props:children:0:props:children:1:props:children:0:props:iconNode\",\"className\":\"lucide-clock size-3.5\"}],4,\" \",\"Menit Baca\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 border-2 border-slate-200 px-3 py-1.5\",\"children\":[[\"$\",\"$L19\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M12 7v14\",\"key\":\"1akyts\"}],[\"path\",{\"d\":\"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z\",\"key\":\"ruj8y\"}]],\"className\":\"lucide-book-open size-3.5\"}],[\"$\",\"$L1a\",null,{\"postId\":\"48e14f38-4628-4267-8641-e42c13930385\",\"initialCount\":1,\"isEn\":false}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"mt-8 pt-8 border-t-2 border-slate-100 flex items-center justify-between\",\"children\":[\"$\",\"$L1b\",null,{\"url\":\"https://disabilitas.com/id/artikel/tunanetra-meraba-website-navigasi-dan-screen-reader\",\"title\":\"Tunanetra Meraba Website: Navigasi dan Screen Reader\",\"articleData\":{\"title\":\"Tunanetra Meraba Website: Navigasi dan Screen Reader\",\"content\":\"$1c\",\"category\":\"Dasar Aksesibilitas\",\"date\":\"07 Juli 2026\"}}]}]]}],null,[\"$\",\"aside\",null,{\"className\":\"w-full mb-12\",\"children\":[\"$\",\"div\",null,{\"children\":[\"$\",\"nav\",null,{\"aria-label\":\"Daftar Isi\",\"className\":\"rounded-[2.5rem] border-4 border-slate-900 bg-emerald-400 p-8 shadow-[8px_8px_0px_0px_rgba(15,23,42,1)]\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"mb-6 text-xl font-black uppercase italic tracking-tight text-slate-900\",\"children\":\"Daftar Isi\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-4\",\"children\":[[\"$\",\"li\",\"0\",{\"className\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#tunanetra-meraba-website-menyelami-navigasi-screen-reader\",\"className\":\"block text-sm font-bold text-slate-800 hover:text-white hover:underline transition-colors leading-relaxed\",\"children\":\"Tunanetra Meraba Website: Menyelami Navigasi Screen Reader\"}]}],[\"$\",\"li\",\"1\",{\"className\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#1-bagaimana-screen-reader-bekerja\",\"className\":\"block text-sm font-bold text-slate-800 hover:text-white hover:underline transition-colors leading-relaxed\",\"children\":\"1. Bagaimana Screen Reader Bekerja?\"}]}],[\"$\",\"li\",\"2\",{\"className\":\"ml-4\",\"children\":[\"$\",\"a\",null,{\"href\":\"#konsep-virtual-buffer\",\"className\":\"block text-sm font-bold text-slate-800 hover:text-white hover:underline transition-colors leading-relaxed\",\"children\":\"Konsep \\\"Virtual Buffer\\\"\"}]}],[\"$\",\"li\",\"3\",{\"className\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#2-navigasi-melalui-landmark-html5\",\"classNa"])</script><script>self.__next_f.push([1,"me\":\"block text-sm font-bold text-slate-800 hover:text-white hover:underline transition-colors leading-relaxed\",\"children\":\"2. Navigasi Melalui Landmark HTML5\"}]}],[\"$\",\"li\",\"4\",{\"className\":\"ml-4\",\"children\":[\"$\",\"a\",null,{\"href\":\"#contoh-implementasi-semantik\",\"className\":\"block text-sm font-bold text-slate-800 hover:text-white hover:underline transition-colors leading-relaxed\",\"children\":\"Contoh Implementasi Semantik\"}]}],[\"$\",\"li\",\"5\",{\"className\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#3-hierarki-heading-judul-sebagai-kerangka-halaman\",\"className\":\"block text-sm font-bold text-slate-800 hover:text-white hover:underline transition-colors leading-relaxed\",\"children\":\"3. Hierarki Heading (Judul) Sebagai Kerangka Halaman\"}]}],[\"$\",\"li\",\"6\",{\"className\":\"ml-4\",\"children\":[\"$\",\"a\",null,{\"href\":\"#aturan-emas-heading\",\"className\":\"block text-sm font-bold text-slate-800 hover:text-white hover:underline transition-colors leading-relaxed\",\"children\":\"Aturan Emas Heading:\"}]}],[\"$\",\"li\",\"7\",{\"className\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#4-teks-tautan-yang-tidak-ambigu\",\"className\":\"block text-sm font-bold text-slate-800 hover:text-white hover:underline transition-colors leading-relaxed\",\"children\":\"4. Teks Tautan yang Tidak Ambigu\"}]}],[\"$\",\"li\",\"8\",{\"className\":\"ml-4\",\"children\":[\"$\",\"a\",null,{\"href\":\"#solusi-tautan-deskriptif\",\"className\":\"block text-sm font-bold text-slate-800 hover:text-white hover:underline transition-colors leading-relaxed\",\"children\":\"Solusi Tautan Deskriptif\"}]}],[\"$\",\"li\",\"9\",{\"className\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#5-kesimpulan-aksesibilitas-adalah-akuntabilitas\",\"className\":\"block text-sm font-bold text-slate-800 hover:text-white hover:underline transition-colors leading-relaxed\",\"children\":\"5. Kesimpulan: Aksesibilitas adalah Akuntabilitas\"}]}],[\"$\",\"li\",\"10\",{\"className\":\"ml-4\",\"children\":[\"$\",\"a\",null,{\"href\":\"#referensi\",\"className\":\"block text-sm font-bold text-slate-800 hover:text-white hover:underline transition-colors leading-relaxed\",\"children\":\"Referensi\"}]}]]}]]}]}]}],[\"$\",\"div\",null,{\"className\":\"prose prose-lg prose-slate mx-auto max-w-none prose-headings:font-black prose-headings:text-slate-900 prose-headings:scroll-mt-32 prose-p:leading-relaxed prose-p:text-slate-700 prose-a:font-bold prose-a:text-blue-600 hover:prose-a:text-blue-800 prose-img:rounded-2xl prose-img:shadow-lg prose-p:first-of-type:first-letter:text-7xl prose-p:first-of-type:first-letter:font-black prose-p:first-of-type:first-letter:text-slate-900 prose-p:first-of-type:first-letter:float-left prose-p:first-of-type:first-letter:mr-3 prose-p:first-of-type:first-letter:leading-[0.8] prose-p:first-of-type:first-letter:mt-1 prose-blockquote:border-blue-500 prose-blockquote:bg-blue-50 prose-blockquote:py-1 prose-blockquote:rounded-r-xl\",\"dangerouslySetInnerHTML\":{\"__html\":\"$1d\"}}],[\"$\",\"$L1e\",null,{\"postId\":\"48e14f38-4628-4267-8641-e42c13930385\",\"isEn\":false,\"initialCounts\":{\"applause\":0,\"critical\":0,\"inclusive\":0,\"insightful\":0}}]]}],[\"$\",\"div\",null,{\"className\":\"mt-20 border-t-8 border-slate-900 pt-16\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"mb-8 text-2xl font-black uppercase italic tracking-tighter text-slate-900\",\"children\":\"Artikel Terkait Lainnya\"}],[\"$\",\"div\",null,{\"className\":\"grid gap-6 md:grid-cols-3\",\"children\":[[\"$\",\"$L18\",\"96cc58ec-892e-4ded-9c7a-f34f1b9d2892\",{\"href\":\"/id/artikel/memahami-aspek-hukum-dan-regulasi-aksesibilitas-digital-ada-eaa-dll\",\"className\":\"group flex flex-col border-4 border-slate-900 bg-white p-6 shadow-[8px_8px_0px_0px_rgba(15,23,42,1)] transition-transform hover:-translate-y-2\",\"children\":[[\"$\",\"h4\",null,{\"className\":\"mb-3 text-lg font-black uppercase italic text-slate-900 group-hover:text-blue-600 line-clamp-2\",\"children\":\"Memahami Aspek Hukum dan Regulasi Aksesibilitas Digital (ADA, EAA, dll)\"}],[\"$\",\"p\",null,{\"className\":\"flex-1 text-sm font-medium leading-relaxed text-slate-600\",\"children\":\"Lanskap legal aksesibilitas web global: Dari Americans with Disabilities Act hingga European Accessibility Act.\"}],[\"$\",\"div\",null,{\"className\":\"mt-6 flex items-center font-bold text-b"])</script><script>self.__next_f.push([1,"lue-700 group-hover:text-blue-800\",\"children\":[\"Baca Selengkapnya\",[\"$\",\"$L19\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M5 12h14\",\"key\":\"1ays0h\"}],[\"path\",{\"d\":\"m12 5 7 7-7 7\",\"key\":\"xquz4c\"}]],\"className\":\"lucide-arrow-right ml-2 size-4 transition-transform group-hover:translate-x-1\"}]]}]]}],[\"$\",\"$L18\",\"cdec1450-7795-4e19-a76d-555636177fd8\",{\"href\":\"/id/artikel/bahaya-simulasi-disabilitas-dan-membangun-empati-inklusif-di-perusahaan\",\"className\":\"group flex flex-col border-4 border-slate-900 bg-white p-6 shadow-[8px_8px_0px_0px_rgba(15,23,42,1)] transition-transform hover:-translate-y-2\",\"children\":[[\"$\",\"h4\",null,{\"className\":\"mb-3 text-lg font-black uppercase italic text-slate-900 group-hover:text-blue-600 line-clamp-2\",\"children\":\"Bahaya Simulasi Disabilitas dan Membangun Empati Inklusif di Perusahaan\"}],[\"$\",\"p\",null,{\"className\":\"flex-1 text-sm font-medium leading-relaxed text-slate-600\",\"children\":\"Mengapa memakai penutup mata untuk berpura-pura tunanetra itu berbahaya? Pelajari cara membangun budaya desain inklusif yang sejati.\"}],[\"$\",\"div\",null,{\"className\":\"mt-6 flex items-center font-bold text-blue-700 group-hover:text-blue-800\",\"children\":[\"Baca Selengkapnya\",[\"$\",\"$L19\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$8:props:children:3:props:children:2:props:children:1:props:children:0:props:children:2:props:children:1:props:iconNode\",\"className\":\"lucide-arrow-right ml-2 size-4 transition-transform group-hover:translate-x-1\"}]]}]]}],[\"$\",\"$L18\",\"e61dd42f-b8b0-41f0-b919-9b1591439cb6\",{\"href\":\"/id/artikel/enam-kunci-pengembangan-kursus-online-yang-aksesibel\",\"className\":\"group flex flex-col border-4 border-slate-900 bg-white p-6 shadow-[8px_8px_0px_0px_rgba(15,23,42,1)] transition-transform hover:-translate-y-2\",\"children\":[[\"$\",\"h4\",null,{\"className\":\"mb-3 text-lg font-black uppercase italic text-slate-900 group-hover:text-blue-600 line-clamp-2\",\"children\":\"Enam Kunci Pengembangan Kursus Online yang Aksesibel\"}],[\"$\",\"p\",null,{\"className\":\"flex-1 text-sm font-medium leading-relaxed text-slate-600\",\"children\":\"Panduan strategis bagi dosen dan desainer instruksional untuk memastikan materi e-learning bebas dari hambatan.\"}],[\"$\",\"div\",null,{\"className\":\"mt-6 flex items-center font-bold text-blue-700 group-hover:text-blue-800\",\"children\":[\"Baca Selengkapnya\",[\"$\",\"$L19\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$8:props:children:3:props:children:2:props:children:1:props:children:0:props:children:2:props:children:1:props:iconNode\",\"className\":\"lucide-arrow-right ml-2 size-4 transition-transform group-hover:translate-x-1\"}]]}]]}]]}]]}]]}]]}]\n"])</script></body></html>
