Web Accessibility Checklist — สิ่งที่ต้องทำก่อน Deploy

ทำไม Accessibility ถึงสำคัญ

Accessibility ไม่ใช่แค่เรื่องของ “คนพิการ” — เป็นเรื่องของทุกคนในสถานการณ์ต่างๆ: ใช้ keyboard เพราะ mouse เสีย, อ่านจอในแสงแดดจ้า, ใช้มือเดียวขณะถือของ ยิ่งไปกว่านั้น accessibility ยังส่งผลต่อ SEO โดยตรง

Semantic HTML — พื้นฐานสำคัญที่สุด

<!-- ❌ ผิด: ใช้ div แทนทุกอย่าง -->
<div class="header">
  <div class="nav">
    <div onclick="go('/')">หน้าแรก</div>
  </div>
</div>

<!-- ✅ ถูก: ใช้ element ที่มีความหมาย -->
<header>
  <nav aria-label="Main navigation">
    <a href="/">หน้าแรก</a>
  </nav>
</header>

Semantic HTML ทำให้ screen reader และ browser เข้าใจโครงสร้างได้ถูกต้องโดยไม่ต้อง ARIA เพิ่ม

Checklist หลัก

Keyboard Navigation

• ทุก interactive element (link, button, input) focus ได้ด้วย Tab
• focus indicator มองเห็นชัดเจน (ไม่ใช้ outline: none โดยไม่มีทดแทน)
• Modal/dialog กัน focus ไว้ข้างใน (focus trap)
• Esc ปิด modal/dropdown
• Skip link “ข้ามไปเนื้อหาหลัก” เป็น element แรกในหน้า

/* แทนที่ outline: none ด้วย focus-visible */
:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

ARIA Labels

• รูปภาพทุกรูปมี alt (ถ้า decorative ใช้ alt="")
• Icon-only button มี aria-label
• Form input มี <label> หรือ aria-label
• Navigation มี aria-label แยกกัน (header nav vs footer nav)

<!-- icon button ต้องมี label -->
<button aria-label="เปิดเมนู">
  <svg aria-hidden="true">...</svg>
</button>

<!-- รูปภาพ decorative -->
<img src="/bg.svg" alt="" role="presentation" />

Color Contrast

WCAG 2.1 AA กำหนด:

• Normal text (< 18pt): contrast ratio ≥ 4.5:1
• Large text (≥ 18pt หรือ bold 14pt): contrast ratio ≥ 3:1
• UI components (button border, input border): ≥ 3:1

ตรวจสอบด้วย:

• Chrome DevTools → Inspect element → Accessibility tab
• WebAIM Contrast Checker

Headings

• มี <h1> เดียวต่อหน้า
• Heading ลำดับถูกต้อง (h1 → h2 → h3, ไม่ข้ามระดับ)
• Heading อธิบายเนื้อหาส่วนนั้นจริงๆ ไม่ใช่แค่ style

Forms

<label for="search-input">ค้นหา</label>
<input
  id="search-input"
  type="search"
  aria-describedby="search-hint"
  autocomplete="search"
/>
<p id="search-hint" class="hint">กด / เพื่อเปิดการค้นหา</p>

Live Regions

<!-- แจ้ง screen reader เมื่อเนื้อหาเปลี่ยน -->
<p aria-live="polite" id="filter-empty" hidden>
  ไม่พบเนื้อหาสำหรับ tag นี้
</p>

เครื่องมือตรวจสอบ

# axe-core CLI
npm install -g @axe-core/cli
axe https://panupongws.com

# Lighthouse (built-in Chrome DevTools)
# หรือ CLI:
npx lighthouse https://panupongws.com --only-categories=accessibility

ข้อผิดพลาดที่พบบ่อย