WCAG 2.2 สำหรับเว็บธุรกิจ: มีทางลัด “ข้ามไปเนื้อหา”, ใช้คีย์บอร์ดได้เต็มรูปแบบพร้อมโฟกัสชัด, ใส่ alt text รูป, คอนทราสต์อย่างน้อย 4.5:1 (ปกติ)/3:1 (ตัวใหญ่), ฟอร์มมี label+ข้อความผิดพลาด, เป้าคลิกขั้นต่ำ ~24×24px และทดสอบด้วย Lighthouse/axe.

Web Accessibility (WCAG 2.2) Checklist: รายการตรวจที่ทำแล้ว “เวิร์กจริง”

สำหรับทีมดีไซน์/Dev/คอนเทนต์ โฟกัสรายการที่กระทบการใช้งานจริงและการค้นหา (UX/SEO) พร้อมอ้างอิงมาตรฐานทางการจาก W3C และแนวปฏิบัติ web.dev

เช็กลิสต์ WCAG 2.2 (ระดับ A/AA) แบบลงมือทำ

โค้ดตัวอย่างที่ใช้ได้จริง

<!-- Skip to content -->
<a href="#main" class="sr-only sr-only-focusable">ข้ามไปยังเนื้อหา</a>

<header>...</header>
<main id="main">
  <h1>หัวเรื่องหน้า</h1>
  <!-- ฟอร์มเข้าถึงได้ -->
  <label for="email">อีเมล</label>
  <input id="email" name="email" type="email" aria-describedby="emailHelp emailError">
  <small id="emailHelp">เราจะไม่เปิดเผยอีเมลของคุณ</small>
  <p id="emailError" role="alert" class="sr-only">กรุณากรอกอีเมลให้ถูกต้อง</p>

  <!-- ปุ่มเป็นปุ่ม (ไม่ใช้ div) -->
  <button type="submit">ส่งข้อความ</button>
</main>
<footer>...</footer>

เวิร์กโฟลว์ทดสอบ (แนะนำ)

• กึ่งอัตโนมัติ: Chrome Lighthouse (แท็บ Accessibility), axe DevTools
• แมนนวล: ทดสอบคีย์บอร์ด, screen reader (NVDA/VoiceOver), ซูม 200%+, คอนทราสต์
• รีเกรสชัน: ตั้ง QA checklist ในสปรินต์ รวม a11y lint/rules

บริการที่เกี่ยวข้อง (Internal Links)

• ปรับเว็บให้เร็ว/ผ่าน Core Web Vitals + A11y
• บริการ UX/UI Design
• ออกแบบ/พัฒนา Webflow
• Corporate Website สำหรับองค์กร
• บริการทั้งหมด

อ้างอิงภายนอก (มาตรฐาน/แนวทาง)

• W3C/WAI — WCAG 2.2: ข้อกำหนดและ Success Criteria
• W3C/WAI — Quick Reference: How to Meet WCAG 2.2
• W3C/WAI — ARIA Authoring Practices: APG 1.2
• web.dev — Accessibility Learning Path: web.dev
• Chrome — Lighthouse Accessibility: developer.chrome.com
• Deque — axe DevTools: deque.com

FAQ (People Also Ask)

ควรตั้งเป้าระดับไหน?
แนะนำให้ผ่านระดับ AA เป็นอย่างน้อยสำหรับเว็บไซต์ธุรกิจทั่วไป เพื่อครอบคลุมผู้ใช้ส่วนใหญ่และข้อกำหนดที่พบบ่อย

คอนทราสต์ตัวอักษรควรเท่าไร?
อย่างน้อย 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับตัวอักษรขนาดใหญ่/หนา

จำเป็นต้องใช้ ARIA ไหม?
ใช้ HTML semantics ให้สุดก่อน แล้วค่อยใช้ ARIA เมื่อ element เดิมอธิบายไม่พอ และยึดตาม APG

เครื่องมืออัตโนมัติพอไหม?
ไม่พอ ต้องเสริมด้วยการทดสอบคีย์บอร์ด/หน้าจออ่าน และรีวิวด้วยมนุษย์

เกี่ยวกับผู้เขียน

Vision X Brain — ทีม Website/SEO/CRO & Webflow สำหรับธุรกิจไทย เราวางโครงข้อมูล ออกแบบ UI เข้าถึงได้ ทำสคีมา และเร่งความเร็วให้ผ่าน CWV พร้อมชุดทดสอบ a11y ที่วัดผลได้จริง สนใจเริ่มโครงการ ดูบริการ

อัปเดตล่าสุด: 12 Aug 2025