<div class="breadcrumb">
<span class="breadcrumb-link" onclick="loadLesson('intro')">หน้าแรก</span> / <span>Accessibility</span>
</div>
<h2>Intro to Accessibility — Practical checklist</h2>
<p>บทเรียนนี้ให้ checklist ที่ปฏิบัติได้จริงและตัวอย่างโค้ดเพื่อปรับปรุงการเข้าถึง (a11y)</p>
<h3>Checklist (ปฏิบัติได้)</h3>
<ul>
<li>ใช้ semantic HTML (header, main, nav, footer, article, section)</li>
<li>ตรวจสอบลำดับหัวเรื่อง (h1 → h2 → h3)</li>
<li>ให้ text alternatives สำหรับรูปภาพ (<code>alt</code>)</li>
<li>keyboard navigation: ตรวจสอบ tab order, focus styles</li>
<li>ใช้ ARIA roles เมื่อจำเป็น (role="navigation", aria-labels)</li>
</ul>
<h3>ตัวอย่าง (skip-link / landmarks)</h3>
<pre><code class="language-html">
<a class="skip-link" href="#maincontent">Skip to content</a>
<header role="banner">...</header>
<nav role="navigation" aria-label="Main navigation">...</nav>
<main id="maincontent" role="main">...</main>
</code></pre>