เครื่องมือฟรี: การเข้าถึง

ตรวจสอบการเข้าถึงเว็บไซต์

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

ฟรี ทดสอบหน้าสำคัญได้สูงสุด 5 หน้าในเวลาประมาณ 1 นาที

สิ่งที่เครื่องมือนี้ตรวจ

  • 5 หน้าที่เป็นตัวแทนของเว็บไซต์

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

  • กฎ WCAG บนหน้าที่เรนเดอร์แล้ว

    แต่ละหน้าจะโหลดใน Chromium ที่ขนาด 1366 × 900 จากนั้น axe-core ซึ่งเป็นเอนจินกฎแบบโอเพนซอร์สของ Deque จะรันกฎของ WCAG 2.0, 2.1 และ 2.2 ระดับ A และ AA หลังจากสคริปต์ของหน้าทำงานแล้ว จึงตรวจพบปัญหาที่ธีมหรือแอปสร้างขึ้นเฉพาะตอนที่หน้าถูกประกอบในเบราว์เซอร์ได้ด้วย

  • ระดับผลกระทบและเกณฑ์ความสำเร็จ

    กฎที่ไม่ผ่านแต่ละข้อจะแสดงระดับผลกระทบ ได้แก่ ร้ายแรงมาก ร้ายแรง ปานกลาง หรือเล็กน้อย พร้อมเกณฑ์ความสำเร็จของ WCAG ที่กฎนั้นเกี่ยวข้อง และจำนวนองค์ประกอบและหน้าที่ได้รับผลกระทบ

  • องค์ประกอบที่ไม่ผ่าน พร้อมกรอบไฮไลต์

    HTML ขององค์ประกอบตัวอย่าง และภาพหน้าจอของหน้าที่มีกรอบล้อมองค์ประกอบนั้น เพื่อให้คุณหรือนักพัฒนาหาองค์ประกอบนั้นในเทมเพลตได้โดยไม่ต้องเดา

  • รายการที่คนต้องเป็นผู้ตัดสิน

    เมื่อ axe-core พบสิ่งที่ตัดสินเองไม่ได้ เช่น ข้อความบนภาพพื้นหลังที่วัดคอนทราสต์ไม่ได้ รายการนั้นจะแสดงเป็น “ต้องตรวจสอบ” และจะไม่ถูกนับเป็นข้อผิดพลาดเลย

  • การทดสอบด้วยคีย์บอร์ด

    ในหน้าแรกที่ทดสอบ เรากดปุ่ม Tab 40 ครั้งและบันทึกว่าโฟกัสไปที่ใด ได้แก่ โฟกัสเคลื่อนที่หรือไม่ ติดวนอยู่ในลูปหรือไม่ (มักเกิดในแบนเนอร์คุกกี้) จุดแรกที่ Tab หยุดเป็นลิงก์ข้ามไปยังเนื้อหา (skip link) หรือไม่ และองค์ประกอบใดที่ได้รับโฟกัสแต่ไม่แสดงตัวบ่งชี้โฟกัสที่มองเห็นได้ การตรวจข้อสุดท้ายนี้เป็นการประเมินแบบฮิวริสติก จึงแสดงเป็น “ต้องตรวจสอบ”

สิ่งที่ตรวจไม่ได้

  • ฟังว่าโปรแกรมอ่านหน้าจออ่านออกเสียงอะไร ซอฟต์แวร์ยืนยันได้ว่าปุ่มมีชื่อ แต่ยืนยันไม่ได้ว่าชื่อนั้นเข้าใจได้เมื่อถูกอ่านออกเสียง
  • ประเมินคำบรรยาย (caption) บทถอดความ หรือเสียงบรรยายภาพสำหรับวิดีโอและเสียง
  • ประเมินเกณฑ์ด้านความเข้าใจและเนื้อหา เช่น คำแนะนำชัดเจนหรือไม่ หรือข้อความแจ้งข้อผิดพลาดช่วยให้ผู้ใช้แก้ไขได้หรือไม่
  • ทดสอบหน้าที่ต้องเข้าสู่ระบบ ต้องใช้รหัสผ่าน หรืออยู่หลังระบบป้องกันบอท หรือทดลองผ่านขั้นตอนชำระเงิน
  • บอกว่าเว็บไซต์ของคุณเป็นไปตาม WCAG หรือสอดคล้องกับกฎหมายใดหรือไม่ กฎอัตโนมัติพบปัญหาได้เพียงบางส่วน ส่วนที่เหลือต้องอาศัยคนตรวจ

ทำไมจึงสำคัญ

อุปสรรคด้านการเข้าถึงมักเป็นข้อผิดพลาดเล็กน้อยในเทมเพลตที่ส่งผลใหญ่ ปุ่มตะกร้าสินค้าที่มีแต่ไอคอนและไม่มีชื่อที่เข้าถึงได้ (accessible name) จะถูกอ่านออกเสียงเพียงว่า “ปุ่ม” ผู้ใช้โปรแกรมอ่านหน้าจอจึงไม่รู้ว่าปุ่มนั้นทำอะไร ข้อความสีเทาบนพื้นขาวที่มีอัตราส่วนคอนทราสต์ไม่ถึง 4.5:1 อ่านยากสำหรับผู้มีสายตาเลือนรางจำนวนมาก และสำหรับทุกคนที่ใช้โทรศัพท์กลางแดดจ้า

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

ในหลายประเทศ การเข้าถึงยังมีแง่มุมทางกฎหมายด้วย การสแกนบอกไม่ได้ว่ากฎหมายใดใช้กับคุณ หรือคุณปฏิบัติตามแล้วหรือไม่ สิ่งที่ได้คือรายการอุปสรรคจริงบนหน้าเว็บของคุณเองพร้อมวันที่ ซึ่งเป็นจุดเริ่มต้นที่ใช้ได้จริงไม่ว่ากรณีใด

วิธีอ่านผลลัพธ์

ร้ายแรงมาก
อุปสรรคนี้อาจทำให้บางคนใช้องค์ประกอบนั้นไม่ได้เลย เช่น ช่องกรอกข้อมูลที่ไม่มีป้ายกำกับ หรือปุ่มที่ไม่มีชื่อ ควรแก้ไขกลุ่มนี้ก่อน
ร้ายแรง
อุปสรรคนี้ทำให้บางคนทำงานบางอย่างได้ยากขึ้นมาก เช่น ข้อความเนื้อหาที่อัตราส่วนคอนทราสต์ไม่ผ่าน
ปานกลาง
อุปสรรคนี้ทำให้เกิดความยากลำบากหรือความสับสน แต่โดยทั่วไปผู้ใช้ยังหาทางเลี่ยงได้
เล็กน้อย
ปัญหาเล็กน้อยหรือความไม่สะดวก แต่ก็ยังควรแก้ไขเมื่อแก้เทมเพลตนั้นในครั้งถัดไป
เกณฑ์ความสำเร็จของ WCAG
ตัวเลขข้างกฎ เช่น 1.1.1 หรือ 1.4.3 คือเกณฑ์ที่กฎนั้นทดสอบ กฎที่ไม่มีเกณฑ์ระบุไว้เป็นแนวปฏิบัติที่ดี (best practice) ไม่ใช่ข้อกำหนดของ WCAG
องค์ประกอบและหน้า
จำนวนองค์ประกอบที่ไม่ผ่านกฎ และจำนวนหน้าที่พบปัญหาจากหน้าที่ทดสอบ กฎที่ไม่ผ่านในทุกหน้ามักอยู่ในส่วนที่ใช้ร่วมกัน เช่น ส่วนหัว เมนู หรือส่วนท้าย
ต้องตรวจสอบ
axe-core พบสิ่งที่ตัดสินเองไม่ได้ ให้ดูองค์ประกอบนั้นด้วยตัวเอง ซึ่งอาจผ่านหรือไม่ผ่านก็ได้ รายการเหล่านี้ไม่ถูกนับเป็นข้อผิดพลาด
โฟกัสติดวน
ปุ่ม Tab วนอยู่กับองค์ประกอบเดิมเพียงไม่กี่รายการ หากองค์ประกอบเหล่านั้นอยู่ในแบนเนอร์คุกกี้ ผู้ใช้คีย์บอร์ดอาจไปยังส่วนอื่นของหน้าไม่ได้
โฟกัสไม่เคลื่อนที่ (Focus doesn’t move)
กด Tab แล้วไม่มีองค์ประกอบใดได้รับโฟกัสเลย ลิงก์และปุ่มอาจสร้างจากองค์ประกอบ div หรือ span หรืออาจมีสคริปต์ที่ดักการกดปุ่มไว้
ลิงก์ข้ามไปยังเนื้อหา
ดูว่าจุดแรกที่ Tab หยุดเป็นลิงก์ “ข้ามไปยังเนื้อหา” หรือไม่ หากไม่มี ผู้ใช้คีย์บอร์ดต้องกด Tab ผ่านส่วนหัวทั้งหมดในทุกหน้า ทั้งนี้ landmark และหัวข้อก็ช่วยให้เป็นไปตาม WCAG 2.4.1 Bypass Blocks ได้เช่นกัน
ไม่มีตัวบ่งชี้โฟกัสที่มองเห็นได้
องค์ประกอบที่ได้รับโฟกัสแต่เราไม่เห็นเส้นขอบ (outline) เงา (box shadow) หรือขีดเส้นใต้ สไตล์แบบอื่น เช่น การเปลี่ยนสี อาจยังมองเห็นได้ ให้ลองกด Tab ผ่านองค์ประกอบเหล่านี้ด้วยตัวเองเพื่อยืนยัน

วิธีแก้ปัญหาที่พบบ่อยที่สุด

  • ข้อความที่อัตราส่วนคอนทราสต์ไม่ผ่าน

    ข้อความปกติต้องมีอัตราส่วนอย่างน้อย 4.5:1 เทียบกับพื้นหลัง และข้อความขนาดใหญ่ (ประมาณ 24 px หรือประมาณ 18.7 px ตัวหนา) ต้องมี 3:1 ให้เปลี่ยนสีในการตั้งค่าธีมหรือ design token แทนการแก้ทีละองค์ประกอบ จากนั้นตรวจข้อความ placeholder สถานะ hover และข้อความบนภาพอีกครั้ง

  • รูปภาพที่ไม่มีข้อความ alt

    ใส่แอตทริบิวต์ alt ให้รูปภาพที่มีความหมายทุกรูป โดยบอกว่ารูปแสดงอะไรหรือใช้ทำอะไร เช่น ชื่อสินค้าและสี รูปตกแต่งให้ใส่ alt ว่าง (alt="") เพื่อให้โปรแกรมอ่านหน้าจอข้ามไป ใน Shopify ให้เพิ่มข้อความ alt จากรูปภาพในส่วนสื่อ (Media) ของสินค้า ส่วนใน WordPress ให้เพิ่มในช่องข้อความทดแทน (Alternative Text) ของคลังสื่อ (Media Library)

  • ช่องกรอกข้อมูลที่ไม่มีป้ายกำกับ

    ผูกป้ายกำกับเข้ากับช่องกรอกแต่ละช่องด้วย <label for> ที่ตรงกับ id ของช่อง หรือใช้ aria-label เมื่อไม่มีข้อความที่มองเห็นได้ อย่าใช้ข้อความ placeholder เป็นป้ายกำกับเพียงอย่างเดียว เพราะข้อความจะหายไปทันทีที่เริ่มพิมพ์ ช่องสมัครรับจดหมายข่าวและช่องค้นหาในส่วนหัวมักเป็นต้นเหตุ

  • ปุ่มและลิงก์ที่ไม่มีชื่อที่เข้าถึงได้

    ปุ่มไอคอนสำหรับตะกร้าสินค้า การค้นหา เมนู หรือโปรไฟล์โซเชียลมีเดียมักมีแค่ SVG ให้เพิ่มข้อความที่มองเห็นได้หรือ aria-label ที่บอกว่าปุ่มนั้นทำอะไร (“เปิดตะกร้าสินค้า” ไม่ใช่ “ไอคอน”) และใส่ aria-hidden="true" ให้ตัว SVG เอง

  • แบนเนอร์คุกกี้ที่ทำให้โฟกัสติดวน

    ตรวจให้แน่ใจว่าเข้าถึงทุกปุ่มในแบนเนอร์ได้ด้วย Tab และใช้งานได้ด้วย Enter หรือ Space เมื่อปิดแบนเนอร์แล้วโฟกัสกลับไปที่หน้าเว็บ และแบนเนอร์ที่ไม่ได้บังหน้าเว็บต้องไม่ยึดโฟกัสไว้เลย ตรวจการตั้งค่าของเครื่องมือขอความยินยอม และอัปเดตหากสคริปต์เป็นเวอร์ชันเก่า

  • เส้นขอบโฟกัสถูกลบออกใน CSS

    ค้นหา outline: none หรือ outline: 0 ที่ใช้กับลิงก์ ปุ่ม และ :focus ในสไตล์ชีต แล้วแทนที่ด้วยสไตล์ที่มองเห็นได้ เช่น :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

คำถามเกี่ยวกับเครื่องมือนี้

เครื่องมือตรวจสอบการเข้าถึงเว็บไซต์นี้ใช้ฟรีหรือไม่?

ใช้ฟรี ไม่ต้องสมัครสมาชิก เพียงยืนยันว่าคุณเป็นเจ้าของหรือผู้ดูแลเว็บไซต์ รายงานแก้ไขการเข้าถึงแบบชำระเงินจะเพิ่มหน้าจาก sitemap ของคุณอีกสูงสุด 20 หน้า การทดสอบเส้นทางการใช้งานด้วยคีย์บอร์ดเพียงอย่างเดียว การตรวจ reflow ที่ 320 px โค้ดก่อนและหลังแก้ไขที่สร้างจาก markup ที่ไม่ผ่านของคุณ พรอมต์ AI ไฟล์ PDF และการทดสอบซ้ำ 5 ครั้ง

เครื่องมือตรวจอัตโนมัติทดสอบ WCAG ได้มากแค่ไหน?

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

หากสแกนแล้วไม่พบปัญหา แปลว่าเว็บไซต์เป็นไปตาม ADA หรือ WCAG แล้วใช่หรือไม่?

ไม่ใช่ ไม่มีการทดสอบอัตโนมัติใดแสดงได้ว่าเว็บไซต์เป็นไปตาม WCAG หรือสอดคล้องกับ ADA, European Accessibility Act หรือกฎหมายอื่นใด ผลลัพธ์ที่ไม่พบปัญหาหมายความเพียงว่ากฎอัตโนมัติไม่พบข้อผิดพลาดในหน้าที่ทดสอบ

ตรวจเว็บไซต์ staging หรือหน้าที่ต้องเข้าสู่ระบบได้หรือไม่?

หน้าที่ต้องเข้าสู่ระบบ ต้องใช้รหัสผ่าน หรืออยู่หลังระบบป้องกันบอทจะทดสอบไม่ได้ หากระบบป้องกันบอทบล็อกการสแกน ให้อนุญาต user agent FixReportsScanner หรือทดสอบสำเนา staging ที่เปิดเป็นสาธารณะ

แก้ปัญหาแล้ว ทำไมผลลัพธ์ยังเหมือนเดิม?

ผลลัพธ์ของที่อยู่เดียวกันอาจนำมาจากการสแกนภายในชั่วโมงที่ผ่านมา ให้รอจนครบชั่วโมงนั้น และล้างแคชของหน้าเว็บหรือแคชของ CDN ก่อนทดสอบอีกครั้ง

แหล่งอ้างอิง

เครื่องมือที่เกี่ยวข้อง

รายงานแก้ไขการเข้าถึง ($174 ชำระครั้งเดียว) เริ่มจากการสแกนฟรีแบบเต็ม แล้วเพิ่มจำนวนหน้า สิ่งที่ต้องเปลี่ยนสำหรับทุกปัญหาที่พบ ไฟล์ PDF และการทดสอบซ้ำเพื่อยืนยันการแก้ไข

เกี่ยวกับรายงานแก้ไขการเข้าถึง