Category: guide

Accessibility Testing Tools — ตรวจ a11y อย่างมีระบบ

รวม tools สำหรับ test web accessibility ตั้งแต่ automated scan ถึง manual testing ด้วย screen reader

เผยแพร่เมื่อ 15 มี.ค. 2569 · อ่านประมาณ 2 นาที

สารบัญ

Automated Scanning

axe DevTools (Chrome Extension)

เครื่องมือ audit a11y ที่แม่นยำที่สุด — ไม่มี false positive ติดตั้งเป็น browser extension แล้วเปิด DevTools → axe tab

# หรือใช้ axe-core ใน test suite
npm install --save-dev axe-core @axe-core/playwright

# playwright test
test('homepage has no a11y violations', async ({ page }) => {
  await page.goto('/');
  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations).toEqual([]);
});

Lighthouse (Built-in Chrome DevTools)

DevTools → Lighthouse → Accessibility → Generate report ตรวจ ~50+ issues เช่น contrast ratio, missing alt text, form labels, ARIA

WAVE (WebAIM)

เปิด https://wave.webaim.org/ แล้วใส่ URL — highlight errors บนหน้าจริงได้เลย

Manual Testing

ปิด mouse ใช้แค่ keyboard
Tab เลื่อน focus, Shift+Tab กลับ
Enter / Space activate element
Arrow keys เลือกใน menu, radio, select

ตรวจ: focus ring เห็นชัดไหม? focus order logical ไหม? trap ใน modal ไหม?

Cmd + F5    — เปิด/ปิด VoiceOver
Ctrl + Option + → — อ่าน element ถัดไป
Ctrl + Option + U — เปิด rotor (nav by heading, links, landmarks)

Color Contrast

Chrome DevTools: inspect element → Accessibility → Color contrast ratio
Contrast ratio ≥ 4.5:1 สำหรับ text ปกติ
≥ 3:1 สำหรับ large text (18pt+ หรือ 14pt bold)

Checklist พื้นฐาน

รูปทุกรูปมี alt (หรือ alt="" ถ้าเป็น decorative)
Form inputs มี <label> เชื่อมด้วย for/id หรือ aria-label
Heading hierarchy ถูกต้อง (h1 → h2 → h3 ไม่ข้าม)
Color contrast ผ่าน 4.5:1
ทุก interactive element ใช้ keyboard ได้
Focus visible บน all focusable elements
Landmark roles ครบ (header, main, nav, footer)
Language ระบุบน <html lang="...">

WCAG Compliance Level

A — ต้องผ่าน (ถ้าไม่ผ่านบางกลุ่มใช้ไม่ได้เลย)
AA — standard ที่รัฐบาลและบริษัทส่วนใหญ่ require
AAA — optimal ทำได้เท่าที่เป็นไปได้