14-accessibility.html

<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">
&lt;a class="skip-link" href="#maincontent"&gt;Skip to content&lt;/a&gt;
&lt;header role="banner"&gt;...&lt;/header&gt;
&lt;nav role="navigation" aria-label="Main navigation"&gt;...&lt;/nav&gt;
&lt;main id="maincontent" role="main"&gt;...&lt;/main&gt;
</code></pre>