Blind Users Navigating Websites: Diving into Screen Readers
For sighted users, a web page is a two-dimensional visual experience full of colors, grid layouts, images, and typography. However, for blind users, the web is a one-dimensional linear experience read aloud line-by-line by Screen Reader software.
Understanding how Screen Readers work—and the real-world challenges faced by their users—is the first fundamental step in creating truly inclusive digital products. This article will technically dissect how interface designs are converted into audio and why writing semantic HTML code is the key.
1. How Do Screen Readers Work?
Screen readers like JAWS, NVDA (Windows), and VoiceOver (macOS/iOS) do not visually "see" the screen. Instead, they interact directly with the Accessibility Tree—a data representation built by the browser based on the Document Object Model (DOM).
The "Virtual Buffer" Concept
When a page loads, the screen reader creates a virtual copy of the page content called the
Virtual Buffer. Users navigate this buffer using the keyboard (usually the up/down arrow keys), not by moving a mouse cursor.
This is why the order of elements in your HTML code (DOM order) is so crucial. If an element is visually positioned on the left, but written at the very bottom of the HTML, a screen reader user will hear it last.
[!CAUTION]
The Danger of CSS Manipulation: Do not use CSS properties like float, flex-direction: row-reverse, or order to radically change the visual position of elements if it breaks the logical DOM order. Screen readers read the DOM order, not the visual order.
2. Navigating Through HTML5 Landmarks
Blind users rarely read a page sequentially from top to bottom. They use screen reader shortcuts to jump directly to the section they need.
Landmarks are the primary way users "map" a page. With the press of a key, they can see a list of the page's main areas.
Semantic Implementation Example
Avoid using generic `
` elements for major structures. Use HTML5 tags that carry inherent meaning:
<!-- BAD: Has no semantic meaning -->
<div class="header">...</div>
<div class="sidebar">...</div>
<div class="content">...</div>
<div class="footer">...</div>
<!-- GOOD: Recognized as Landmarks by Screen Readers -->
<header>...</header>
<aside>...</aside>
<main>...</main>
<footer>...</footer>
If you are forced to use <div> (e.g., due to legacy framework constraints), you must use the role attribute from the ARIA specification: <div role="main">. However, the first rule of ARIA is: Use native HTML whenever possible.
3. Heading Hierarchy as the Page Framework
Besides landmarks, the second most popular navigation method for blind users is jumping between Headings (<h1> through <h6>). Screen readers allow users to press the "H" key to jump to the next heading, providing a quick overview of the topics covered on the page.
The Golden Rules of Headings:
1.
Use only one ``:
The `
` should describe the main purpose of the page (usually matching the `` element).
2. <strong>Do not skip levels:</strong> Do not use an `<h3>` right after an `<h1>` just because you visually prefer its font size. The order must be logical (`<h1>` -> `<h2>` -> `<h3>`).
3. <strong>Separate visual style from structure:</strong> If an `<h2>` feels too large, use CSS to reduce its size, do not change its HTML tag to `<h4>`.<hr>
<h2 id="4-unambiguous-link-text">4. Unambiguous Link Text</h2><p>Imagine turning on a screen reader feature that summarizes all the links on a page into a <em>List of Links</em>.</p>
<p>If you use text like:</p>
<ul>
<li>"Click here"</li>
<li>"Read more"</li>
<li>"Learn more"</li>
</ul>
<p>The list of links a blind user will hear is: <em>"Click here, Click here, Read more"</em>. This provides absolutely no context about where the link will take them.</p>
<h3 id="descriptive-link-solution">Descriptive Link Solution</h3>
Link text must be understandable on its own (standalone).
- <strong>Bad:</strong> To view the financial report, [click here].
- <strong>Good:</strong> Please review our [annual financial report].<p>If the visual design insists on using a button that says "Read More", you can visually hide additional context text (using an <code>.sr-only</code> class) that remains readable by screen readers.</p>
<pre><code class="language-html"><a href="/news/123" class="btn">
Read more <span class="sr-only">about the new accessibility feature release</span>
</a>
</code></pre>
<hr>
<h2 id="5-conclusion-accessibility-is-accountability">5. Conclusion: Accessibility is Accountability</h2><p>Writing accessible code is essentially writing good, clean, standard-compliant HTML code. When you ignore HTML semantics, you not only make it harder for search engines (SEO), but you literally close the door to your site for millions of users who rely on assistive technologies.</p>
<p>Start by unplugging your mouse, turning on your computer's built-in Screen Reader (Narrator on Windows or VoiceOver on Mac), and trying to make a purchase or fill out a form on the website you are currently building.</p>
<hr>
<h3 id="references">References</h3>
This article is compiled by referencing the principles of instructional design, disability navigation, and advanced HTML semantics as thoroughly discussed in <strong>Practical Web Accessibility</strong> by Ashley Firth. The deep technical understanding of Screen Readers and keyboard navigation is adapted directly from the inclusive design philosophy taught in the literature.</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">What do you think?</h3><p class="text-xs font-bold text-slate-500">Give your reaction to this article</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="Give reaction Insightful. Total 0 reactions." 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">Insightful</span></button><button aria-label="Give reaction Best Practice. Total 0 reactions." 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">Best Practice</span></button><button aria-label="Give reaction Applause. Total 0 reactions." 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">Applause</span></button><button aria-label="Give reaction Needs Correction. Total 0 reactions." 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">Needs Correction</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">Explore Related Insights</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="/en/artikel/understanding-the-legal-landscape-and-digital-accessibility-regulations-ada-eaa-etc"><h4 class="mb-3 text-lg font-black uppercase italic text-slate-900 group-hover:text-blue-600 line-clamp-2">Understanding the Legal Landscape and Digital Accessibility Regulations (ADA, EAA, etc.)</h4><p class="flex-1 text-sm font-medium leading-relaxed text-slate-600">The global legal landscape of web accessibility: From the Americans with Disabilities Act to the European Accessibility Act.</p><div class="mt-6 flex items-center font-bold text-blue-700 group-hover:text-blue-800">Read More<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="/en/artikel/the-dangers-of-disability-simulations-and-building-inclusive-empathy-in-companies"><h4 class="mb-3 text-lg font-black uppercase italic text-slate-900 group-hover:text-blue-600 line-clamp-2">The Dangers of Disability Simulations and Building Inclusive Empathy in Companies</h4><p class="flex-1 text-sm font-medium leading-relaxed text-slate-600">Why wearing a blindfold to simulate blindness is harmful. Learn how to build a true inclusive design culture.</p><div class="mt-6 flex items-center font-bold text-blue-700 group-hover:text-blue-800">Read More<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="/en/artikel/six-keys-for-accessible-online-course-development"><h4 class="mb-3 text-lg font-black uppercase italic text-slate-900 group-hover:text-blue-600 line-clamp-2">Six Keys for Accessible Online Course Development</h4><p class="flex-1 text-sm font-medium leading-relaxed text-slate-600">A strategic guide for instructors and instructional designers to ensure e-learning materials are barrier-free.</p><div class="mt-6 flex items-center font-bold text-blue-700 group-hover:text-blue-800">Read More<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="/en/talent">Portal Talenta</a></li><li><a class="transition-all hover:pl-1 hover:text-blue-600" href="/en/perusahaan">Portal Pemberi Kerja</a></li><li><a class="transition-all hover:pl-1 hover:text-blue-600" href="/en/kampus">Portal Perguruan Tinggi</a></li><li><a class="transition-all hover:pl-1 hover:text-blue-600" href="/en/government">Portal Pemerintah</a></li><li><a class="transition-all hover:pl-1 hover:text-blue-600" href="/en/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="/en/bisnis/audit">Accessibility Audit</a></li><li><a class="text-blue-600 transition-all hover:pl-1 hover:text-blue-800 dark:text-blue-400" href="/en/tools">Free Accessibility Tools</a></li><li><a class="transition-all hover:pl-1 hover:text-blue-600" href="/en/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="/en/cek-akses">Access Check</a></li><li><a class="transition-all hover:pl-1 hover:text-blue-600" href="/en/privasi">Kebijakan Privasi</a></li><li><a class="transition-all hover:pl-1 hover:text-blue-600" href="/en/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\":[\"\",\"en\",\"artikel\",\"blind-users-navigating-websites-screen-readers-semantics\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"(public)\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"artikel\",{\"children\":[[\"slug\",\"blind-users-navigating-websites-screen-readers-semantics\",\"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 (pr"])</script><script>self.__next_f.push([1,"efers-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\":{\"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\",\"en\",\"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\",\"blind-users-navigating-websites-screen-readers-semantics\",\"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\",\"knqY_6DZ7mNgKdMyA1Yfs\",{\"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\":\"en\",\"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"])</script><script>self.__next_f.push([1,"-none transition-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\":\"Skip to Main Content\"}],[\"$\",\"$L11\",null,{\"lang\":\"en\"}],[\"$\",\"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\":\"en\"}],[\"$\",\"$L15\",null,{\"lang\":\"en\"}],[\"$\",\"$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\":\"Blind Users Navigating Websites: Screen Readers \u0026 Semantics | Disabilitas.com | Disabilitas.com\"}],[\"$\",\"meta\",\"2\",{\"name\":\"description\",\"content\":\"Understanding how blind users interact with websites using screen readers and semantic HTML structures.\"}],[\"$\",\"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/en/artikel/blind-users-navigating-websites-screen-readers-semantics\"}],[\"$\",\"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\":\"Blind Users Navigating Websites: Screen Readers \u0026 Semantics | Disabilitas.com\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:description\",\"content\":\"Understanding how blind users interact with websites using screen readers and semantic HTML structures.\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:url\",\"content\":\"https://disabilitas.com/en/artikel/blind-users-navigating-websites-screen-readers-semantics\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:title\",\"content\":\"Blind Users Navigating Websites: Screen Readers \u0026 Semantics | Disabilitas.com\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:description\",\"content\":\"Understanding how blind users interact with websites using screen readers and semantic HTML structures.\"}],[\"$\",\"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[91975,[\"4839\",\"static/chunks/4839-a92f908409f9"])</script><script>self.__next_f.push([1,"7802.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:T1812,\u003ch2\u003eBlind Users Navigating Websites: Diving into Screen Readers\u003c/h2\u003e\u003cp\u003eFor sighted users, a web page is a two-dimensional visual experience full of colors, grid layouts, images, and typography. However, for blind users, the web is a \u003cstrong\u003eone-dimensional linear experience\u003c/strong\u003e read aloud line-by-line by Screen Reader software.\u003c/p\u003e\n\u003cp\u003eUnderstanding how Screen Readers work—and the real-world challenges faced by their users—is the first fundamental step in creating truly inclusive digital products. This article will technically dissect how interface designs are converted into audio and why writing semantic HTML code is the key.\u003c/p\u003e\n\u003chr\u003e\n\u003ch2\u003e1. How Do Screen Readers Work?\u003c/h2\u003e\u003cp\u003eScreen readers like \u003cstrong\u003eJAWS\u003c/strong\u003e, \u003cstrong\u003eNVDA\u003c/strong\u003e (Windows), and \u003cstrong\u003eVoiceOver\u003c/strong\u003e (macOS/iOS) do not visually \u0026quot;see\u0026quot; the screen. Instead, they interact directly with the \u003cem\u003eAccessibility Tree\u003c/em\u003e—a data representation built by the browser based on the Document Object Model (DOM).\u003c/p\u003e\n\u003ch3\u003eThe \"Virtual Buffer\" Concept\u003c/h3\u003e\nWhen a page loads, the screen reader creates a virtual copy of the page content called the \u003cem\u003eVirtual Buffer\u003c/em\u003e. Users navigate this buffer using the keyboard (usually the up/down arrow keys), not by moving a mouse cursor.\u003cp\u003eThis is why the order of elements in your HTML code (DOM order) is so crucial. If an element is visually positioned on the left, but written at the very bottom of the HTML, a screen reader user will hear it last.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e[!CAUTION]\n\u003cstrong\u003eThe Danger of CSS Manipulation:\u003c/strong\u003e Do not use CSS properties like \u003ccode\u003efloat\u003c/code\u003e, \u003ccode\u003eflex-direction: row-reverse\u003c/code\u003e, or \u003ccode\u003eorder\u003c/code\u003e to radically change the visual position of elements if it breaks the logical DOM order. Screen readers read the DOM order, not the visual order.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003chr\u003e\n\u003ch2\u003e2. Navigating Through HTML5 Landmarks\u003c/h2\u003e\u003cp\u003eBlind users rarely read a page sequentially from top to bottom. They use screen reader shortcuts to jump directly to the section they need.\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eLandmarks\u003c/em\u003e are the primary way users \u0026quot;map\u0026quot; a page. With the press of a key, they can see a list of the page\u0026#39;s main areas.\u003c/p\u003e\n\u003ch3\u003eSemantic Implementation Example\u003c/h3\u003e\nAvoid using generic `\u003cdiv\u003e` elements for major structures. Use HTML5 tags that carry inherent meaning:\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;!-- BAD: Has no semantic meaning --\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;!-- GOOD: Recognized as Landmarks by Screen Readers --\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\u003eIf you are forced to use \u003ccode\u003e\u0026lt;div\u0026gt;\u003c/code\u003e (e.g., due to legacy framework constraints), you must use the \u003ccode\u003erole\u003c/code\u003e attribute from the ARIA specification: \u003ccode\u003e\u0026lt;div role=\u0026quot;main\u0026quot;\u0026gt;\u003c/code\u003e. However, the first rule of ARIA is: \u003cstrong\u003eUse native HTML whenever possible.\u003c/strong\u003e\u003c/p\u003e\n\u003chr\u003e\n\u003ch2\u003e3. Heading Hierarchy as the Page Framework\u003c/h2\u003e\u003cp\u003eBesides landmarks, the second most popular navigation method for blind users is jumping between Headings (\u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e through \u003ccode\u003e\u0026lt;h6\u0026gt;\u003c/code\u003e). Screen readers allow users to press the \u0026quot;H\u0026quot; key to jump to the next heading, providing a quick overview of the topics covered on the page.\u003c/p\u003e\n\u003ch3\u003eThe Golden Rules of Headings:\u003c/h3\u003e\n1. \u003cstrong\u003eUse only one `\u003ch1\u003e`:\u003c/strong\u003e The `\u003cH1\u003e` should describe the main purpose of the page (usually matching the `\u003ctitle\u003e` element).\n2. \u003cstrong\u003eDo not skip levels:\u003c/strong\u003e Do not use an `\u003ch3\u003e` right after an `\u003ch1\u003e` just bec"])</script><script>self.__next_f.push([1,"ause you visually prefer its font size. The order must be logical (`\u003ch1\u003e` -\u003e `\u003ch2\u003e` -\u003e `\u003ch3\u003e`).\n3. \u003cstrong\u003eSeparate visual style from structure:\u003c/strong\u003e If an `\u003ch2\u003e` feels too large, use CSS to reduce its size, do not change its HTML tag to `\u003ch4\u003e`.\u003chr\u003e\n\u003ch2\u003e4. Unambiguous Link Text\u003c/h2\u003e\u003cp\u003eImagine turning on a screen reader feature that summarizes all the links on a page into a \u003cem\u003eList of Links\u003c/em\u003e.\u003c/p\u003e\n\u003cp\u003eIf you use text like:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u0026quot;Click here\u0026quot;\u003c/li\u003e\n\u003cli\u003e\u0026quot;Read more\u0026quot;\u003c/li\u003e\n\u003cli\u003e\u0026quot;Learn more\u0026quot;\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eThe list of links a blind user will hear is: \u003cem\u003e\u0026quot;Click here, Click here, Read more\u0026quot;\u003c/em\u003e. This provides absolutely no context about where the link will take them.\u003c/p\u003e\n\u003ch3\u003eDescriptive Link Solution\u003c/h3\u003e\nLink text must be understandable on its own (standalone).\n- \u003cstrong\u003eBad:\u003c/strong\u003e To view the financial report, [click here].\n- \u003cstrong\u003eGood:\u003c/strong\u003e Please review our [annual financial report].\u003cp\u003eIf the visual design insists on using a button that says \u0026quot;Read More\u0026quot;, you can visually hide additional context text (using an \u003ccode\u003e.sr-only\u003c/code\u003e class) that remains readable by screen readers.\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;a href=\u0026quot;/news/123\u0026quot; class=\u0026quot;btn\u0026quot;\u0026gt;\n Read more \u0026lt;span class=\u0026quot;sr-only\u0026quot;\u0026gt;about the new accessibility feature release\u0026lt;/span\u0026gt;\n\u0026lt;/a\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\u003chr\u003e\n\u003ch2\u003e5. Conclusion: Accessibility is Accountability\u003c/h2\u003e\u003cp\u003eWriting accessible code is essentially writing good, clean, standard-compliant HTML code. When you ignore HTML semantics, you not only make it harder for search engines (SEO), but you literally close the door to your site for millions of users who rely on assistive technologies.\u003c/p\u003e\n\u003cp\u003eStart by unplugging your mouse, turning on your computer\u0026#39;s built-in Screen Reader (Narrator on Windows or VoiceOver on Mac), and trying to make a purchase or fill out a form on the website you are currently building.\u003c/p\u003e\n\u003chr\u003e\n\u003ch3\u003eReferences\u003c/h3\u003e\nThis article is compiled by referencing the principles of instructional design, disability navigation, and advanced HTML semantics as thoroughly discussed in \u003cstrong\u003ePractical Web Accessibility\u003c/strong\u003e by Ashley Firth. The deep technical understanding of Screen Readers and keyboard navigation is adapted directly from the inclusive design philosophy taught in the literature.1d:T2028,\u003ch2 id=\"blind-users-navigating-websites-diving-into-screen-readers\"\u003eBlind Users Navigating Websites: Diving into Screen Readers\u003c/h2\u003e\u003cp\u003eFor sighted users, a web page is a two-dimensional visual experience full of colors, grid layouts, images, and typography. However, for blind users, the web is a \u003cstrong\u003eone-dimensional linear experience\u003c/strong\u003e read aloud line-by-line by Screen Reader software.\u003c/p\u003e\n\u003cp\u003eUnderstanding how Screen Readers work—and the real-world challenges faced by their users—is the first fundamental step in creating truly inclusive digital products. This article will technically dissect how interface designs are converted into audio and why writing semantic HTML code is the key.\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\"\u003eRelated Insight\u003c/h3\u003e\n \u003ca href=\"/en/artikel/web-accessibility-and-mental-health-designing-for-cognitive-peace\" class=\"text-xl font-black italic uppercase text-slate-900 transition-colors hover:text-blue-700\"\u003e\n Web Accessibility and Mental Health: Designing for Cognitive Peace\n \u003c/a\u003e\n \u003c/div\u003e\n \n\u003chr\u003e\n\u003ch2 id=\"1-how-do-screen-readers-work\"\u003e1. How Do Screen Readers Work?\u003c/h2\u003e\u003cp\u003eScreen readers like \u003cstrong\u003eJAWS\u003c/strong\u003e, \u003cstrong\u003eNVDA\u003c/strong\u003e (Windows), and \u003cstrong\u003eVoiceOver\u003c/strong\u003e (macOS/iOS) do not visually \u0026quot;see\u0026quot; the screen. Instead, they interact directly with the \u003cem\u003eAccessibility Tree\u003c/em\u003e—a data representation built by the browser based on the Document Object Model (DOM).\u003c/p\u003e\n\u003ch3 id=\"the-virtual-buffer-concept\"\u003eThe \"Virtual Buffer\" "])</script><script>self.__next_f.push([1,"Concept\u003c/h3\u003e\nWhen a page loads, the screen reader creates a virtual copy of the page content called the \u003cem\u003eVirtual Buffer\u003c/em\u003e. Users navigate this buffer using the keyboard (usually the up/down arrow keys), not by moving a mouse cursor.\u003cp\u003eThis is why the order of elements in your HTML code (DOM order) is so crucial. If an element is visually positioned on the left, but written at the very bottom of the HTML, a screen reader user will hear it last.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e[!CAUTION]\n\u003cstrong\u003eThe Danger of CSS Manipulation:\u003c/strong\u003e Do not use CSS properties like \u003ccode\u003efloat\u003c/code\u003e, \u003ccode\u003eflex-direction: row-reverse\u003c/code\u003e, or \u003ccode\u003eorder\u003c/code\u003e to radically change the visual position of elements if it breaks the logical DOM order. Screen readers read the DOM order, not the visual order.\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\"\u003eRelated Insight\u003c/h3\u003e\n \u003ca href=\"/en/artikel/accessible-online-learning-and-lms-design-for-students-with-disabilities\" class=\"text-xl font-black italic uppercase text-slate-900 transition-colors hover:text-blue-700\"\u003e\n Accessible Online Learning and LMS Design for Students with Disabilities\n \u003c/a\u003e\n \u003c/div\u003e\n \n\u003c/blockquote\u003e\n\u003chr\u003e\n\u003ch2 id=\"2-navigating-through-html5-landmarks\"\u003e2. Navigating Through HTML5 Landmarks\u003c/h2\u003e\u003cp\u003eBlind users rarely read a page sequentially from top to bottom. They use screen reader shortcuts to jump directly to the section they need.\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eLandmarks\u003c/em\u003e are the primary way users \u0026quot;map\u0026quot; a page. With the press of a key, they can see a list of the page\u0026#39;s main areas.\u003c/p\u003e\n\u003ch3 id=\"semantic-implementation-example\"\u003eSemantic Implementation Example\u003c/h3\u003e\nAvoid using generic `\u003cdiv\u003e` elements for major structures. Use HTML5 tags that carry inherent meaning:\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;!-- BAD: Has no semantic meaning --\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;!-- GOOD: Recognized as Landmarks by Screen Readers --\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\u003eIf you are forced to use \u003ccode\u003e\u0026lt;div\u0026gt;\u003c/code\u003e (e.g., due to legacy framework constraints), you must use the \u003ccode\u003erole\u003c/code\u003e attribute from the ARIA specification: \u003ccode\u003e\u0026lt;div role=\u0026quot;main\u0026quot;\u0026gt;\u003c/code\u003e. However, the first rule of ARIA is: \u003cstrong\u003eUse native HTML whenever possible.\u003c/strong\u003e\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\"\u003eRelated Insight\u003c/h3\u003e\n \u003ca href=\"/en/artikel/accessible-authentication-secure-login-without-cognitive-overload\" class=\"text-xl font-black italic uppercase text-slate-900 transition-colors hover:text-blue-700\"\u003e\n Accessible Authentication: Secure Login Without Cognitive Overload\n \u003c/a\u003e\n \u003c/div\u003e\n \n\u003chr\u003e\n\u003ch2 id=\"3-heading-hierarchy-as-the-page-framework\"\u003e3. Heading Hierarchy as the Page Framework\u003c/h2\u003e\u003cp\u003eBesides landmarks, the second most popular navigation method for blind users is jumping between Headings (\u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e through \u003ccode\u003e\u0026lt;h6\u0026gt;\u003c/code\u003e). Screen readers allow users to press the \u0026quot;H\u0026quot; key to jump to the next heading, providing a quick overview of the topics covered on the page.\u003c/p\u003e\n\u003ch3 id=\"the-golden-rules-of-headings\"\u003eThe Golden Rules of Headings:\u003c/h3\u003e\n1. \u003cstrong\u003eUse only one `\u003ch1\u003e`:\u003c/strong\u003e The `\u003cH1\u003e` should describe the main purpose of the page (usually matching the `\u003ctitle\u003e` element).\n2. \u003cstrong\u003eDo not skip levels:\u003c/strong\u003e Do not use an `\u003ch3\u003e` right after an `\u003ch1\u003e` just because you visually prefer its font size. The order must be logical (`\u003ch1\u003e` -\u003e "])</script><script>self.__next_f.push([1,"`\u003ch2\u003e` -\u003e `\u003ch3\u003e`).\n3. \u003cstrong\u003eSeparate visual style from structure:\u003c/strong\u003e If an `\u003ch2\u003e` feels too large, use CSS to reduce its size, do not change its HTML tag to `\u003ch4\u003e`.\u003chr\u003e\n\u003ch2 id=\"4-unambiguous-link-text\"\u003e4. Unambiguous Link Text\u003c/h2\u003e\u003cp\u003eImagine turning on a screen reader feature that summarizes all the links on a page into a \u003cem\u003eList of Links\u003c/em\u003e.\u003c/p\u003e\n\u003cp\u003eIf you use text like:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u0026quot;Click here\u0026quot;\u003c/li\u003e\n\u003cli\u003e\u0026quot;Read more\u0026quot;\u003c/li\u003e\n\u003cli\u003e\u0026quot;Learn more\u0026quot;\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eThe list of links a blind user will hear is: \u003cem\u003e\u0026quot;Click here, Click here, Read more\u0026quot;\u003c/em\u003e. This provides absolutely no context about where the link will take them.\u003c/p\u003e\n\u003ch3 id=\"descriptive-link-solution\"\u003eDescriptive Link Solution\u003c/h3\u003e\nLink text must be understandable on its own (standalone).\n- \u003cstrong\u003eBad:\u003c/strong\u003e To view the financial report, [click here].\n- \u003cstrong\u003eGood:\u003c/strong\u003e Please review our [annual financial report].\u003cp\u003eIf the visual design insists on using a button that says \u0026quot;Read More\u0026quot;, you can visually hide additional context text (using an \u003ccode\u003e.sr-only\u003c/code\u003e class) that remains readable by screen readers.\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;a href=\u0026quot;/news/123\u0026quot; class=\u0026quot;btn\u0026quot;\u0026gt;\n Read more \u0026lt;span class=\u0026quot;sr-only\u0026quot;\u0026gt;about the new accessibility feature release\u0026lt;/span\u0026gt;\n\u0026lt;/a\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\u003chr\u003e\n\u003ch2 id=\"5-conclusion-accessibility-is-accountability\"\u003e5. Conclusion: Accessibility is Accountability\u003c/h2\u003e\u003cp\u003eWriting accessible code is essentially writing good, clean, standard-compliant HTML code. When you ignore HTML semantics, you not only make it harder for search engines (SEO), but you literally close the door to your site for millions of users who rely on assistive technologies.\u003c/p\u003e\n\u003cp\u003eStart by unplugging your mouse, turning on your computer\u0026#39;s built-in Screen Reader (Narrator on Windows or VoiceOver on Mac), and trying to make a purchase or fill out a form on the website you are currently building.\u003c/p\u003e\n\u003chr\u003e\n\u003ch3 id=\"references\"\u003eReferences\u003c/h3\u003e\nThis article is compiled by referencing the principles of instructional design, disability navigation, and advanced HTML semantics as thoroughly discussed in \u003cstrong\u003ePractical Web Accessibility\u003c/strong\u003e by Ashley Firth. The deep technical understanding of Screen Readers and keyboard navigation is adapted directly from the inclusive design philosophy taught in the literature.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\\\":\\\"Blind Users Navigating Websites: Screen Readers \u0026 Semantics\\\",\\\"description\\\":\\\"Understanding how blind users interact with websites using screen readers and semantic HTML structures.\\\",\\\"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/en/artikel/blind-users-navigating-websites-screen-readers-semantics\\\"}\"}}],[\"$\",\"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/en\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":2,\\\"name\\\":\\\"Articles\\\",\\\"item\\\":\\\"https://disabilitas.com/en/artikel\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":3,\\\"name\\\":\\\"Accessibility Basics\\\",\\\"item\\\":\\\"https://disabilitas.com/en/kategori/3b8db1f9-9dee-488d-87ec-156d97a326ea\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":4,\\\"name\\\":\\\"Blind Users Navigating Websites: Screen Readers \u0026 Semantics\\\",\\\"item\\\":\\\"https://disabilitas.com/en/artikel/blind-users-navigating-websites-screen-readers-semantics\\\"}]}\"}}],[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\",\"child"])</script><script>self.__next_f.push([1,"ren\":[[\"$\",\"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\":\"/en\",\"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\":\"/en/artikel\",\"className\":\"hover:text-blue-700 transition-colors\",\"children\":\"Articles\"}]}],[[\"$\",\"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\":\"/en/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\":\"Accessibility Basics\"}]}]}]],[\"$\",\"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\":\"Blind Users Navigating Websites: Screen Readers \u0026 Semantics\"}]}]]}]}],[\"$\",\"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\":\"Accessibility Basics\"}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"$L19\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"circle\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\",\"key\":\"1mglay\"}],[\"path\",{\"d\":\"M12 6v6l4 2\",\"key\":\"mmk7yg\"}]],\"className\":\"lucide-clock size-4 text-slate-400\"}],\"07 July 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\":\"Blind Users Navigating Websites: Screen Readers \u0026 Semantics\"}],[\"$\",\"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\":\"Author\"}],[\"$\",\"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:ic"])</script><script>self.__next_f.push([1,"onNode\",\"className\":\"lucide-clock size-3.5\"}],4,\" \",\"Min Read\"]}],[\"$\",\"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\":true}]]}]]}]]}],[\"$\",\"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/en/artikel/blind-users-navigating-websites-screen-readers-semantics\",\"title\":\"Blind Users Navigating Websites: Screen Readers \u0026 Semantics\",\"articleData\":{\"title\":\"Blind Users Navigating Websites: Screen Readers \u0026 Semantics\",\"content\":\"$1c\",\"category\":\"Accessibility Basics\",\"date\":\"07 July 2026\"}}]}]]}],null,[\"$\",\"aside\",null,{\"className\":\"w-full mb-12\",\"children\":[\"$\",\"div\",null,{\"children\":[\"$\",\"nav\",null,{\"aria-label\":\"Table of Contents\",\"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\":\"Table of Contents\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-4\",\"children\":[[\"$\",\"li\",\"0\",{\"className\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#blind-users-navigating-websites-diving-into-screen-readers\",\"className\":\"block text-sm font-bold text-slate-800 hover:text-white hover:underline transition-colors leading-relaxed\",\"children\":\"Blind Users Navigating Websites: Diving into Screen Readers\"}]}],[\"$\",\"li\",\"1\",{\"className\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#1-how-do-screen-readers-work\",\"className\":\"block text-sm font-bold text-slate-800 hover:text-white hover:underline transition-colors leading-relaxed\",\"children\":\"1. How Do Screen Readers Work?\"}]}],[\"$\",\"li\",\"2\",{\"className\":\"ml-4\",\"children\":[\"$\",\"a\",null,{\"href\":\"#the-virtual-buffer-concept\",\"className\":\"block text-sm font-bold text-slate-800 hover:text-white hover:underline transition-colors leading-relaxed\",\"children\":\"The \\\"Virtual Buffer\\\" Concept\"}]}],[\"$\",\"li\",\"3\",{\"className\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#2-navigating-through-html5-landmarks\",\"className\":\"block text-sm font-bold text-slate-800 hover:text-white hover:underline transition-colors leading-relaxed\",\"children\":\"2. Navigating Through HTML5 Landmarks\"}]}],[\"$\",\"li\",\"4\",{\"className\":\"ml-4\",\"children\":[\"$\",\"a\",null,{\"href\":\"#semantic-implementation-example\",\"className\":\"block text-sm font-bold text-slate-800 hover:text-white hover:underline transition-colors leading-relaxed\",\"children\":\"Semantic Implementation Example\"}]}],[\"$\",\"li\",\"5\",{\"className\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#3-heading-hierarchy-as-the-page-framework\",\"className\":\"block text-sm font-bold text-slate-800 hover:text-white hover:underline transition-colors leading-relaxed\",\"children\":\"3. Heading Hierarchy as the Page Framework\"}]}],[\"$\",\"li\",\"6\",{\"className\":\"ml-4\",\"children\":[\"$\",\"a\",null,{\"href\":\"#the-golden-rules-of-headings\",\"className\":\"block text-sm font-bold text-slate-800 hover:text-white hover:underline transition-colors leading-relaxed\",\"children\":\"The Golden Rules of Headings:\"}]}],[\"$\",\"li\",\"7\",{\"className\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#4-unambiguous-link-text\",\"className\":\"block text-sm font-bold text-slate-800 hover:text-white hover:underline transition-colors leading-relaxed\",\"children\":\"4. Unambiguous Link Text\"}]}],[\"$\",\"li\",\"8\",{\"className\":\"ml-4\",\"children\":[\"$\",\"a\",null,{\"href\":\"#descriptive-link-solution\",\"className\":\"block text-sm font-bold text-slate-800 hover:text-white hover:underline transition-colors leading-relaxed\",\"children\":\"Descriptive Link Solution\"}]}],[\"$\",\"li\",\"9\",{\"className\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#5-conclusion-accessibility-is-accountability\",\"className\":\"block text"])</script><script>self.__next_f.push([1,"-sm font-bold text-slate-800 hover:text-white hover:underline transition-colors leading-relaxed\",\"children\":\"5. Conclusion: Accessibility is Accountability\"}]}],[\"$\",\"li\",\"10\",{\"className\":\"ml-4\",\"children\":[\"$\",\"a\",null,{\"href\":\"#references\",\"className\":\"block text-sm font-bold text-slate-800 hover:text-white hover:underline transition-colors leading-relaxed\",\"children\":\"References\"}]}]]}]]}]}]}],[\"$\",\"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\":true,\"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\":\"Explore Related Insights\"}],[\"$\",\"div\",null,{\"className\":\"grid gap-6 md:grid-cols-3\",\"children\":[[\"$\",\"$L18\",\"96cc58ec-892e-4ded-9c7a-f34f1b9d2892\",{\"href\":\"/en/artikel/understanding-the-legal-landscape-and-digital-accessibility-regulations-ada-eaa-etc\",\"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\":\"Understanding the Legal Landscape and Digital Accessibility Regulations (ADA, EAA, etc.)\"}],[\"$\",\"p\",null,{\"className\":\"flex-1 text-sm font-medium leading-relaxed text-slate-600\",\"children\":\"The global legal landscape of web accessibility: From the Americans with Disabilities Act to the European Accessibility Act.\"}],[\"$\",\"div\",null,{\"className\":\"mt-6 flex items-center font-bold text-blue-700 group-hover:text-blue-800\",\"children\":[\"Read More\",[\"$\",\"$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\":\"/en/artikel/the-dangers-of-disability-simulations-and-building-inclusive-empathy-in-companies\",\"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\":\"The Dangers of Disability Simulations and Building Inclusive Empathy in Companies\"}],[\"$\",\"p\",null,{\"className\":\"flex-1 text-sm font-medium leading-relaxed text-slate-600\",\"children\":\"Why wearing a blindfold to simulate blindness is harmful. Learn how to build a true inclusive design culture.\"}],[\"$\",\"div\",null,{\"className\":\"mt-6 flex items-center font-bold text-blue-700 group-hover:text-blue-800\",\"children\":[\"Read More\",[\"$\",\"$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\":\"/en/artikel/six-keys-for-accessible-online-course-development\",\"className\":\"group flex f"])</script><script>self.__next_f.push([1,"lex-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\":\"Six Keys for Accessible Online Course Development\"}],[\"$\",\"p\",null,{\"className\":\"flex-1 text-sm font-medium leading-relaxed text-slate-600\",\"children\":\"A strategic guide for instructors and instructional designers to ensure e-learning materials are barrier-free.\"}],[\"$\",\"div\",null,{\"className\":\"mt-6 flex items-center font-bold text-blue-700 group-hover:text-blue-800\",\"children\":[\"Read More\",[\"$\",\"$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>
