Intro to Accessibility — Practical checklist

บทเรียนนี้ให้ checklist ที่ปฏิบัติได้จริงและตัวอย่างโค้ดเพื่อปรับปรุงการเข้าถึง (a11y)

Checklist (ปฏิบัติได้)

• ใช้ semantic HTML (header, main, nav, footer, article, section)
• ตรวจสอบลำดับหัวเรื่อง (h1 → h2 → h3)
• ให้ text alternatives สำหรับรูปภาพ (alt)
• keyboard navigation: ตรวจสอบ tab order, focus styles
• ใช้ ARIA roles เมื่อจำเป็น (role="navigation", aria-labels)

ตัวอย่าง (skip-link / landmarks)

<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>