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

ตรวจสอบเว็บไซต์ตาม WCAG 2.2

ดูสถานะของเว็บไซต์คุณในเกณฑ์ความสำเร็จ WCAG 2.2 ระดับ A และ AA ทั้ง 55 ข้อ เกณฑ์แต่ละข้อจะได้รับหนึ่งใน 4 สถานะ คุณจึงแยกได้ว่าการทดสอบอัตโนมัติครอบคลุมอะไร และอะไรที่ยังต้องให้คนตรวจ

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

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

  • เกณฑ์ระดับ A และ AA ทุกข้อ

    เกณฑ์ทั้งหมด 55 ข้อ แบ่งเป็นระดับ A 31 ข้อและระดับ AA 24 ข้อ เรียงตามลำดับของ WCAG พร้อมหมายเลขและชื่อ ไม่รวม 4.1.1 Parsing เพราะ WCAG 2.2 ระบุว่าเกณฑ์นี้ล้าสมัยแล้ว

  • ผลการตรวจอัตโนมัติที่จับคู่กับเกณฑ์

    กฎของ axe-core ทำงานบนหน้าที่คุณกรอกและหน้าสำคัญอีกสูงสุด 4 หน้า และผลแต่ละรายการจะผูกกับเกณฑ์ความสำเร็จที่กฎนั้นทดสอบ เกณฑ์จะไม่ผ่านเมื่อกฎใดกฎหนึ่งของเกณฑ์นั้นไม่ผ่านในหน้าใดก็ตามที่ทดสอบ

  • หลักฐานจากการใช้คีย์บอร์ด

    การทดสอบกด Tab 40 ครั้งในหน้าแรกที่ทดสอบใช้เป็นข้อมูลสำหรับ 2.1.2 No Keyboard Trap และสำหรับ 2.4.7 Focus Visible ในรูปแบบการประเมินแบบฮิวริสติกที่แสดงให้ตรวจสอบ

  • แยกผลที่ยังตัดสินไม่ได้ไว้ต่างหาก

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

  • แสดงช่องว่างให้เห็น แทนการให้คะแนน

    เกณฑ์ที่ไม่มีกฎอัตโนมัติใดครอบคลุมจะระบุว่า “ตรวจสอบด้วยตนเอง” (Manual check) ไม่มีการนำผลไปเฉลี่ยเป็นเปอร์เซ็นต์ที่จะบดบังสิ่งที่ไม่ได้ทดสอบ

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

  • ตัดสินเกณฑ์ที่ต้องใช้วิจารณญาณของคน เช่น 1.4.10 Reflow, 1.4.11 Non-text Contrast, เกณฑ์ในหมวด 1.2 เรื่องคำบรรยายและเสียงบรรยายภาพ และ 3.3.1 ถึง 3.3.4 เรื่องข้อผิดพลาดในแบบฟอร์ม
  • เปลี่ยน “ไม่พบข้อผิดพลาดจากการตรวจอัตโนมัติ” (No automated failures) ให้กลายเป็นผ่าน กฎที่ทำงานแล้วผ่านครอบคลุมเฉพาะสิ่งที่กฎนั้นทดสอบเท่านั้น
  • จัดทำคำประกาศความสอดคล้อง (conformance claim) คำชี้แจงด้านการเข้าถึง (accessibility statement) หรือ VPAT ความสอดคล้องต้องประเมินโดยคน บนหน้าเว็บทั้งหน้าและกระบวนการที่ครบถ้วน
  • ทดสอบระดับ AAA หรือหน้าอื่นนอกเหนือจาก 5 หน้าในการสแกน
  • เข้าถึงขั้นตอนที่อยู่หลังการเข้าสู่ระบบหรือขั้นตอนชำระเงิน ซึ่งเป็นส่วนที่เกณฑ์อย่าง 3.3.7 Redundant Entry และ 3.3.8 Accessible Authentication มักเกี่ยวข้อง

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

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

เครื่องมืออัตโนมัติครอบคลุมเกณฑ์ระดับ A และ AA ไม่ถึงครึ่ง โดย axe-core จับคู่กฎของตนกับเกณฑ์ประมาณ 25 จาก 55 ข้อ ส่วนที่เหลือไม่มีการทดสอบอัตโนมัติที่เชื่อถือได้ ซอฟต์แวร์บอกไม่ได้ว่าข้อความแจ้งข้อผิดพลาดแนะนำวิธีแก้ไขหรือไม่ (3.3.3) หรือหน้าเว็บยังใช้งานได้ที่ความกว้าง 320 พิกเซล CSS หรือไม่ (1.4.10) การระบุเกณฑ์เหล่านี้เป็นการตรวจด้วยตนเองช่วยให้เห็นว่ายังต้องทดสอบตรงไหน

แม้แต่เกณฑ์ที่ไม่พบข้อผิดพลาดจากการตรวจอัตโนมัติก็อาจไม่ผ่านได้ กฎสำหรับ 1.1.1 Non-text Content ตรวจว่ารูปภาพมีข้อความ alt แต่บอกไม่ได้ว่า alt="IMG_2041.jpg" ไม่มีประโยชน์เลยสำหรับคนที่มองไม่เห็นภาพ

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

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

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

  • 4.1.2 Name, Role, Value ไม่ผ่าน

    ตัวควบคุมแบบกำหนดเองที่สร้างจากองค์ประกอบ div หรือ span (เมนู แท็บ แอคคอร์เดียน ปุ่มสลับ) ไม่ได้บอกเทคโนโลยีสิ่งอำนวยความสะดวกว่าตัวเองคืออะไร หรือกำลังเปิดอยู่หรือไม่ ให้ใช้ <button> แบบเนทีฟทุกครั้งที่ทำได้ ตั้งชื่อให้ และกำหนด aria-expanded หรือ aria-pressed เพื่อให้สถานะถูกอ่านออกเสียง

  • 1.3.1 Info and Relationships ไม่ผ่าน

    โครงสร้างต้องอยู่ใน markup ไม่ใช่แค่ในการจัดรูปแบบ ให้ใช้องค์ประกอบ h2 และ h3 จริงแทนย่อหน้าตัวหนา ใช้ ul หรือ ol สำหรับรายการ ใช้ th พร้อม scope สำหรับหัวตาราง และใช้ label หรือ fieldset พร้อม legend สำหรับกลุ่มช่องกรอกในแบบฟอร์ม

  • 3.1.1 Language of Page ไม่ผ่าน

    เพิ่มแอตทริบิวต์ lang ให้องค์ประกอบ html เช่น <html lang="en"> ธีม WordPress มักแสดงแอตทริบิวต์นี้ด้วย language_attributes() ส่วนในธีม Shopify ให้ใช้ <html lang="{{ request.locale.iso_code }}"> ใน layout/theme.liquid

  • 2.5.8 Target Size (Minimum) ไม่ผ่าน

    ไอคอนขนาดเล็กและลิงก์ที่อยู่ชิดกันแตะด้วยนิ้วได้ยาก ให้เป้าหมายแต่ละจุดมีขนาดอย่างน้อย 24 × 24 พิกเซล CSS หรือเว้นระยะเป้าหมายขนาดเล็กจนวงกลมขนาด 24 px ที่มีจุดศูนย์กลางอยู่ที่แต่ละเป้าหมายไม่ทับเป้าหมายอื่น การเพิ่ม padding ช่วยขยายพื้นที่เป้าหมายได้โดยไม่ต้องเปลี่ยนไอคอน

  • ไล่ตรวจรายการที่ต้องตรวจด้วยตนเอง

    เริ่มจากข้อที่ทำได้เร็ว สำหรับ 1.4.10 Reflow ให้ซูมหน้าต่างเบราว์เซอร์ที่กว้าง 1280 px เป็น 400% แล้วตรวจว่าไม่มีส่วนใดต้องเลื่อนในแนวนอน สำหรับ 2.4.7 และ 2.4.11 ให้กด Tab ไล่ไปทั้งหน้า และตรวจว่าโฟกัสมองเห็นได้เสมอ และไม่ถูกบังด้วยส่วนหัวแบบติดหน้าจอ (sticky header) หรือแบนเนอร์คุกกี้ สำหรับ 3.3.1 ให้ส่งแบบฟอร์มที่กรอกผิด แล้วดูว่าข้อผิดพลาดมีคำอธิบายเป็นข้อความที่ชัดเจนหรือไม่

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

WCAG 2.2 เปลี่ยนแปลงอะไรในระดับ A และ AA?

มีเกณฑ์ใหม่ 6 ข้อ ได้แก่ 2.4.11 Focus Not Obscured (Minimum), 2.5.7 Dragging Movements, 2.5.8 Target Size (Minimum), 3.2.6 Consistent Help, 3.3.7 Redundant Entry และ 3.3.8 Accessible Authentication (Minimum) นอกจากนี้ WCAG 2.2 ยังเพิ่มเกณฑ์ระดับ AAA อีก 3 ข้อ และนำ 4.1.1 Parsing ออก

ทำไมจึงไม่มี 4.1.1 Parsing ในรายการ?

WCAG 2.2 ระบุว่า 4.1.1 Parsing ล้าสมัยและนำออกแล้ว เพราะเบราว์เซอร์และเทคโนโลยีสิ่งอำนวยความสะดวกไม่ได้พึ่งพาข้อผิดพลาดของ markup ที่เกณฑ์นี้ครอบคลุมอีกต่อไป W3C ระบุว่าสำหรับ WCAG 2.0 และ 2.1 ปัจจุบันถือว่าเกณฑ์นี้ผ่านเสมอสำหรับเนื้อหา HTML

การเป็นไปตาม WCAG 2.2 ครอบคลุม WCAG 2.1 ด้วยหรือไม่?

ครอบคลุม WCAG 2.2 เข้ากันได้กับเวอร์ชันก่อนหน้า เนื้อหาที่เป็นไปตาม 2.2 ก็เป็นไปตาม 2.1 และ 2.0 ด้วย การทดสอบตาม 2.2 จึงครอบคลุมเวอร์ชันเก่าที่นโยบายหลายฉบับยังอ้างถึง

ใช้เครื่องมือนี้เขียนคำชี้แจงด้านการเข้าถึงหรือ VPAT ได้หรือไม่?

ใช้เป็นจุดเริ่มต้นได้ แต่ไม่ใช่รายงานความสอดคล้อง คำชี้แจงหรือ VPAT ต้องประเมินเกณฑ์ทุกข้อ ซึ่งส่วนใหญ่ต้องให้คนประเมิน รายการ “ตรวจสอบด้วยตนเอง” (Manual check) และ “ต้องตรวจสอบ” แสดงว่าข้อใดยังต้องประเมินในลักษณะนั้น

ทำไมเกณฑ์จำนวนมากจึงขึ้นว่า “ตรวจสอบด้วยตนเอง” (Manual check)?

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

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

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

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

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