รายงานแก้ไข

รายงานแก้ไขการเข้าถึง

เราทดสอบเว็บไซต์ของคุณตาม WCAG 2.2 ระดับ A และ AA ในเบราว์เซอร์จริง เดินผ่านเส้นทางหลักด้วยคีย์บอร์ดเพียงอย่างเดียว (สำหรับร้านค้า ไปจนถึงปุ่มชำระเงิน) และให้สิ่งที่ต้องเปลี่ยนสำหรับทุกอุปสรรคแก่นักพัฒนาของคุณ โดยสร้างจาก markup ของคุณเอง

  • ทดสอบได้สูงสุด 25 หน้า
  • ทดสอบเส้นทางด้วยคีย์บอร์ด
  • ทดสอบซ้ำได้ 5 ครั้ง

สิ่งที่เราตรวจ

  • กฎ WCAG 2.2 ระดับ A และ AA

    การทดสอบอัตโนมัติด้วย axe-core บนหน้าสำคัญของคุณและหน้าเพิ่มเติมสูงสุด 20 หน้าจาก sitemap: ข้อความ alt คอนทราสต์สี ชื่อของปุ่มและลิงก์ ป้ายกำกับฟอร์ม หัวข้อ แลนด์มาร์ก และ ARIA

  • ทดสอบเส้นทางด้วยคีย์บอร์ด

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

  • กับดักโฟกัสและการมองเห็นโฟกัส

    โฟกัสติดค้างหรือไม่ เช่น ในแบนเนอร์คุกกี้ และผู้เข้าชมมองเห็นได้หรือไม่ว่าโฟกัสอยู่ที่ใด

  • Reflow บนมือถือที่ 320 px

    หน้าเว็บต้องเลื่อนด้านข้างบนโทรศัพท์จอเล็กหรือไม่ (WCAG 1.4.10)

  • แผนผังข้อกล่าวหาในหนังสือเรียกร้อง

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

  • รายการที่ต้องให้คนตรวจ

    สิ่งที่การทดสอบตั้งข้อสังเกตแต่ตัดสินไม่ได้ เช่น ข้อความที่วางบนรูปภาพ พร้อมวิธีตรวจแต่ละรายการ

สิ่งที่คุณจะได้รับ

  • รายการเรียงตามลำดับความสำคัญ: แก้ก่อน แก้ถัดไป และปรับปรุง
  • โค้ดก่อนและหลังแก้ที่สร้างจากองค์ประกอบที่ไม่ผ่านแต่ละจุด
  • ขั้นตอนสำหรับ Shopify, WordPress, WooCommerce หรือแพลตฟอร์มที่เราตรวจพบ
  • พรอมต์ AI สำเร็จรูปสำหรับทุกปัญหาที่พบ
  • ภาพหน้าจอที่วงองค์ประกอบที่ไม่ผ่านไว้
  • ร่างแถลงการณ์การเข้าถึง (accessibility statement) และบันทึกหลักฐาน
  • ทดสอบซ้ำ 5 ครั้งเพื่อยืนยันการแก้ไข และไฟล์ PDF

รายงานจัดทำอย่างไร

  1. 1

    5 หน้าจากการสแกนฟรีของคุณ รวมกับหน้าเพิ่มเติมสูงสุด 20 หน้าจาก sitemap จะถูกโหลดใน Chromium และทดสอบด้วย axe-core

  2. 2

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

  3. 3

    ข้อบกพร่องแต่ละจุดจะได้วิธีแก้ที่เขียนสำหรับแพลตฟอร์มของคุณ จากนั้นรายงานจะถูกรวบรวมและส่งทางอีเมลถึงคุณ

ปัญหาที่พบจากรายงานตัวอย่าง

ผลลัพธ์จริงของ Harbor & Pine ร้านค้าสมมติที่เราสร้างขึ้นพร้อมปัญหาที่พบบ่อย

เปิดรายงานตัวอย่างฉบับเต็ม
  • Critical

    @axe/button-name/help{"$en":"Buttons must have discernible text"}

    @axe/button-name/help{"$en":"Buttons must have discernible text"}: the failing element outlined in red

    41 instances on 9 pages. WCAG 4.1.2 requires every control to have a name. Unnamed buttons often include quantity steppers, close buttons and slider arrows.

    Fix: Add visible text, visually hidden text, or an aria-label that says what the button does (for example {a} or {b}).{"a":"aria-label=\"Close\"","b":"aria-label=\"Increase quantity\""}

  • Critical

    @axe/image-alt/help{"$en":"Images must have alternative text"}

    @axe/image-alt/help{"$en":"Images must have alternative text"}: the failing element outlined in red

    22 instances on 7 pages. WCAG 1.1.1 requires a text alternative for meaningful images. Without it, a screen reader user can't tell which product a photo shows.

    Fix: Describe what matters to a shopper: product name, color and the angle shown (for example 'Canvas tote in olive, front view').

  • Critical

    @axe/label/help{"$en":"Form elements must have labels"}

    @axe/label/help{"$en":"Form elements must have labels"}: the failing element outlined in red

    7 instances on 6 pages. WCAG 1.3.1, 3.3.2 and 4.1.2 require form fields to have labels. Newsletter sign-up and search fields are common offenders.

    Fix: Placeholder text alone does not count as a label.

สิ่งที่ไม่ครอบคลุม

  • ผลลัพธ์จากโปรแกรมอ่านหน้าจอ คำบรรยาย และเสียงบรรยายภาพ (มีรายการตรวจด้วยคนให้)
  • ขั้นตอนชำระเงิน การจ่ายเงิน และการส่งฟอร์ม
  • หน้าที่ต้องเข้าสู่ระบบ
  • คำแนะนำทางกฎหมาย หรือใบรับรองการปฏิบัติตาม ADA หรือ EAA

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

นี่เป็นการตรวจ WCAG แบบเต็มหรือไม่?

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

ช่วยเรื่องหนังสือเรียกร้องตาม ADA ได้หรือไม่?

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

โค้ดใช้ได้กับแพลตฟอร์มใดบ้าง?

วิธีแก้เขียนขึ้นสำหรับแพลตฟอร์มที่เราตรวจพบ: ธีม Shopify, WordPress และ WooCommerce, Webflow, BigCommerce, Wix, Squarespace, เฟรมเวิร์กอย่าง Next.js หรือ HTML ธรรมดา ในกรณีที่เรามองไม่เห็นซอร์สโค้ดของคุณ ตำแหน่งไฟล์จะระบุไว้เป็นคำแนะนำ

การทดสอบซ้ำ 5 ครั้งคืออะไร?

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

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

สแกนเว็บไซต์ของคุณวันนี้

ค้นหา แก้ไข ตรวจยืนยัน

เว็บไซต์นี้เป็นประเภทใด

คำตอบของคุณจะเลือกการตรวจที่เหมาะสม เช่น เส้นทางการซื้อสำหรับร้านค้าออนไลน์ เรายังตรวจหลักฐานจากตัวเว็บไซต์เองและแสดงทั้งสองอย่าง

เว็บไซต์นี้เป็นประเภทใด

สแกนฟรี ไม่ต้องใช้บัตรเครดิต