HTML Academy · บทเรียน

การทดสอบด้วยโปรแกรมอ่านหน้าจอ

ใช้ VoiceOver และ NVDA เพื่อตรวจสอบการใช้งาน ARIA

บทเรียน 4 จาก 413 ขั้นตอน

การทดสอบด้วยโปรแกรมอ่านหน้าจอ เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงต้องทดสอบด้วยโปรแกรมอ่านหน้าจอ

เครื่องมืออัตโนมัติตรวจพบปัญหาด้านการเข้าถึงได้เพียง 30–40% เท่านั้น การทดสอบด้วยโปรแกรมอ่านหน้าจอจริงจะเผยปัญหาที่การตรวจสอบอัตโนมัติมองไม่เห็น:

ลำดับการอ่านที่สับสน
การประกาศ ARIA ที่ไม่เป็นประโยชน์
ขาดการจัดการโฟกัส
รูปแบบการโต้ตอบที่สับสน

VoiceOver บน Mac

VoiceOver ติดตั้งมาใน macOS อยู่แล้ว จึงไม่จำเป็นต้องติดตั้งเพิ่มเติม:

<!-- Activate: Cmd+F5 (or System Settings → Accessibility → VoiceOver) -->

<!-- Key commands:
  VO = Control+Option
  VO+Right Arrow = Next element
  VO+Left Arrow = Previous element
  VO+Space = Activate element
  VO+U = Open rotor (landmark navigation)
  VO+H = Next heading
  Tab = Next focusable element
  Shift+Tab = Previous focusable
-->

VoiceOver บน iOS

ทดสอบประสบการณ์โปรแกรมอ่านหน้าจอบนอุปกรณ์เคลื่อนที่ด้วย VoiceOver บน iPhone/iPad:

<!-- Activate: Settings → Accessibility → VoiceOver
     Or: triple-click side button if set up -->

<!-- Gestures:
  Swipe right = next element
  Swipe left = previous element
  Double-tap = activate element
  Two-finger scrub = back
  Three-finger swipe up/down = scroll
-->

NVDA บน Windows

NVDA เป็นโปรแกรมอ่านหน้าจอแบบฟรีและโอเพนซอร์สสำหรับ Windows:

<!-- Download: nvaccess.org -->

<!-- Key commands:
  NVDA key = Insert (or Caps Lock)
  NVDA+N = NVDA menu
  H = next heading
  K = next link
  B = next button
  F = next form field
  D = next landmark
  Insert+F7 = element list (links, headings, landmarks)
-->

รายการตรวจสอบการทดสอบโปรแกรมอ่านหน้าจอ

สิ่งที่ควรตรวจสอบด้วยโปรแกรมอ่านหน้าจอ:

มีการประกาศชื่อหน้าเมื่อโหลด
หัวข้อต่าง ๆ สร้างโครงสร้างการนำทางที่เป็นเหตุเป็นผล
รูปภาพทั้งหมดมีข้อความ alt ที่สื่อความหมายหรือเป็นข้อความว่าง
ช่องกรอกข้อมูลทั้งหมดของแบบฟอร์มมีป้ายกำกับ
ปุ่มและลิงก์มีชื่อที่อธิบายความหมาย
กับดักโฟกัสของหน้าต่างโมดัลทำงานอย่างถูกต้อง
มีการประกาศการอัปเดตของเนื้อหาแบบไดนามิก

ข้อบกพร่องทั่วไปของโปรแกรมอ่านหน้าจอ

ปัญหาที่การทดสอบอัตโนมัติมองไม่เห็น:

<!-- 1. Reading order differs from visual order -->
<!-- CSS flex/grid order ≠ DOM order for screen readers -->

<!-- 2. aria-label doesn't match visible text -->
<!-- Voice control users say visible text to click -->

<!-- 3. Focus disappears after dialog closes -->
<!-- Programmatically return focus to trigger -->

<!-- 4. Dynamic content not in a live region -->
<!-- New items added silently, no announcement -->

การทดสอบโดยใช้แป้นพิมพ์เป็นหลัก

ก่อนใช้โปรแกรมอ่านหน้าจอ ให้ทดสอบโดยใช้แป้นพิมพ์เพียงอย่างเดียวก่อน:

ถอดเมาส์หรือแทร็กแพดออก
นำทางผ่านทั้งหน้าด้วย Tab เท่านั้น
ตรวจสอบว่าเข้าถึงองค์ประกอบแบบโต้ตอบได้ทุกองค์ประกอบ
ตรวจสอบว่าสามารถดำเนินการทุกอย่างด้วยแป้นพิมพ์ได้

เครื่องมือทดสอบการเข้าถึงอัตโนมัติ

ใช้การทดสอบด้วยตนเองร่วมกับเครื่องมืออัตโนมัติ:

axe DevTools — ส่วนขยาย Chrome ซึ่งเป็นเครื่องมือตรวจสอบอัตโนมัติที่แม่นยำที่สุด
WAVE — wavebooth.com ซึ่งเป็นโอเวอร์เลย์ภาพบนหน้าเว็บ
Lighthouse — DevTools ของ Chrome สำหรับตรวจสอบประสิทธิภาพและการเข้าถึง
pa11y — เครื่องมือ CLI ซึ่งเหมาะอย่างยิ่งสำหรับไปป์ไลน์ CI/CD

ข้อมูลอ้างอิงรูปแบบ ARIA

คู่มือแนวทางการเขียน ARIA (APG) ของ W3C มีตัวอย่างการนำไปใช้เพื่อใช้อ้างอิง:

แอคคอร์เดียน การแจ้งเตือน กล่องโต้ตอบการแจ้งเตือน
เส้นทางนำทาง ปุ่ม แถบภาพเลื่อน
ช่องทำเครื่องหมาย คอมโบบ็อกซ์ กล่องโต้ตอบ
การเปิดเผย Feed Grid
กล่องรายการ เมนู แถบเมนู
แท็บ คำแนะนำ เครื่องมือต้นไม้

URL: w3.org/WAI/ARIA/apg/

การผสานรวมการเข้าถึงอย่างต่อเนื่อง

ผนวกการทดสอบการเข้าถึงเข้ากับเวิร์กโฟลว์ของคุณ:

// Jest + axe-core for unit tests:
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

test('Button is accessible', async () => {
  const results = await axe('<button>Click me</button>');
  expect(results).toHaveNoViolations();
});

// pa11y in CI pipeline:
// pa11y https://example.com --standard WCAG2AA

สรุปการทดสอบ

กลยุทธ์การทดสอบการเข้าถึงอย่างสมบูรณ์:

การออกแบบ — ตรวจสอบความเปรียบต่างของสีและขนาดพื้นที่เป้าหมายสำหรับการแตะ
การพัฒนา — ทดสอบแป้นพิมพ์และสแกนด้วย axe อัตโนมัติ
การทบทวน — ทดสอบโปรแกรมอ่านหน้าจอ (VoiceOver + NVDA)
CI/CD — ใช้ pa11y หรือ axe ในไปป์ไลน์อัตโนมัติ
สภาพแวดล้อมจริง — ใช้ Lighthouse และตรวจสอบบางจุดด้วยตนเอง

ตรวจสอบความเข้าใจอย่างรวดเร็ว

เครื่องมืออัตโนมัติสามารถตรวจพบปัญหาด้านการเข้าถึงได้อย่างน่าเชื่อถือกี่เปอร์เซ็นต์

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป: การทดสอบโปรแกรมอ่านหน้าจอ

สาระสำคัญของการทดสอบ:

VoiceOver (Mac/iOS) และ NVDA (Windows) เป็นเครื่องมือฟรีและจำเป็น
ทดสอบโดยใช้แป้นพิมพ์เพียงอย่างเดียวก่อน แล้วจึงเพิ่มโปรแกรมอ่านหน้าจอ
เครื่องมืออัตโนมัติ: axe, WAVE, Lighthouse และ pa11y
การทดสอบอัตโนมัติตรวจพบปัญหาได้เพียงประมาณ 30–40% เท่านั้น
อ้างอิงรูปแบบ APG เพื่อการนำ ARIA ไปใช้อย่างถูกต้อง

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 40
บทเรียน: 159

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “การทดสอบด้วยโปรแกรมอ่านหน้าจอ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การทดสอบด้วยโปรแกรมอ่านหน้าจอ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การทดสอบด้วยโปรแกรมอ่านหน้าจอ”

ใช้ VoiceOver และ NVDA เพื่อตรวจสอบการใช้งาน ARIA คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การทดสอบด้วยโปรแกรมอ่านหน้าจอ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

aria-expanded และ aria-controls สำหรับตัวสลับ
aria-selected และรูปแบบแท็บ
ภูมิภาคแบบไลฟ์: aria-live aria-atomic aria-relevant
การทดสอบด้วยโปรแกรมอ่านหน้าจอ

← กลับไปที่ HTML Academy