เครื่องมือตรวจสอบความสามารถในการเข้าถึง HTML

การตรวจสอบการเข้าถึงเบื้องต้นส่วนใหญ่มักเป็นเพียงการสแกนคีย์เวิร์ดผิวเผิน หรือไม่ก็เป็นไลบรารีตัวใหญ่ที่คุณต้องไว้ใจโดยไม่รู้การทำงานภายใน เครื่องมือนี้เลือกใช้แนวทางที่สาม: มันจะแยกวิเคราะห์ HTML ที่คุณวางโดยใช้ DOMParser ในตัวของเบราว์เซอร์ — ไม่มี axe-core, ไม่มีไลบรารีการเข้าถึงภายนอก, ไม่มีการดาวน์โหลดอะไรเลย — จากนั้นจึงเดินโครงสร้าง DOM ที่ได้ด้วยชุดคำสั่งตรวจสอบที่เขียนขึ้นเอง ซึ่งสะท้อนรูปแบบความล้มเหลวที่พบบ่อยตามมาตรฐาน WCAG 2.1 จริง นั่นหมายความว่าตรรกะการทำงานเปิดให้ตรวจสอบได้อย่างเต็มที่ และกระบวนการตรวจสอบทั้งหมดเกิดขึ้นภายในเบราว์เซอร์ของคุณ: โค้ดที่คุณวาง และคู่สีใดๆ ที่คุณทดสอบ จะไม่ถูกอัปโหลดหรือส่งไปที่ใด

การตรวจสอบครอบคลุมความล้มเหลวที่พบบ่อยในหน้าเว็บจริง: อิลิเมนต์ <img> ที่ไม่มีแอตทริบิวต์ alt เลย (ซึ่งคือความล้มเหลวตาม WCAG จริง และต่างจาก alt="" ที่เว้นว่างไว้สำหรับภาพตกแต่งอย่างจงใจ ซึ่งจะไม่ถูกแจ้งเตือนอย่างถูกต้อง), ฟิลด์ในฟอร์มที่ไม่มีทางให้เทคโนโลยีช่วยเหลือรู้ว่ามีไว้เพื่ออะไร (ตรวจสอบทุกวิถีทางที่เชื่อมโยงกับ label — มี <label for> ที่ตรงกัน, ถูกครอบด้วย <label> หรือมีแอตทริบิวต์ aria-label/aria-labelledby), ระดับหัวข้อที่กระโดดข้ามโดยไม่มีการเตือน (จาก <h1> ตรงไปยัง <h3> หรือเอกสารที่ไม่มี <h1> เลย หรือมีมากกว่าหนึ่ง), ลิงก์ที่ไม่มี href หรือมีข้อความกว้างๆ กำกวมอย่าง "คลิกที่นี่" หรือ "อ่านต่อ" และแอตทริบิวต์ lang ที่หายไปเมื่อมีการวางเอกสาร HTML แบบเต็ม (ไม่ใช่แค่ส่วนย่อย)

จุดเด่นคือการคำนวณคอนทราสต์ด้วยสมการจริง ไม่ใช่แค่การประมาณด้วยสายตาว่า 'ดูอ่านได้' สำหรับอิลิเมนต์ใดๆ ที่มี inline color และ background-color เครื่องมือจะอ่านค่าทั้งสอง แปลงเป็นตัวเลข RGB จริงผ่านกลไก CSS ของเบราว์เซอร์เอง (ดังนั้น hex, rgb(), hsl() และชื่อสีอย่าง 'tomato' จึงทำงานเหมือนกันหมด) และคำนวณค่าความสว่างสัมพัทธ์ตาม WCAG สำหรับแต่ละสี — L = 0.2126×R + 0.7152×G + 0.0722×B โดยแต่ละช่องสีผ่านการปรับแกมมาด้วยเส้นโค้งถ่ายโอน sRGB ที่ถูกต้องก่อน — จากนั้นจึงรวมเข้าสูตรอัตราส่วนคอนทราสต์อย่างเป็นทางการ (Lที่สว่างกว่า + 0.05) / (Lที่มืดกว่า + 0.05) ค่า font-size และ font-weight ของอิลิเมนต์จะเป็นตัวตัดสินว่าจะใช้เกณฑ์ 'ข้อความปกติ' ที่เข้มงวดกว่า หรือเกณฑ์ 'ข้อความขนาดใหญ่' ที่ผ่อนปรนกว่า (18pt ขึ้นไป หรือ 14pt ขึ้นไปแบบหนา) และผลลัพธ์จะถูกตรวจสอบเทียบกับเกณฑ์ WCAG จริงทั้งสี่ค่าพร้อมกัน: 4.5:1 และ 3:1 สำหรับ AA, 7:1 และ 4.5:1 สำหรับ AAA — ไม่เคยถูกลดทอนเหลือแค่คำตัดสินเดียวว่าใช้ได้/ใช้ไม่ได้

นี่คือชุดย่อยของการตรวจสอบการเข้าถึงที่ตั้งใจให้ตรงไปตรงมาและใช้งานได้จริง ไม่ใช่เครื่องมือเพื่อการรับรอง: มันไม่ได้ประเมินการโต้ตอบที่ขับเคลื่อนด้วย JavaScript, แพทเทิร์น ARIA ที่ซับซ้อนนอกเหนือจากการระบุชื่อพื้นฐาน, ลำดับโฟกัสของคีย์บอร์ด หรืออะไรก็ตามที่ต้องเรนเดอร์และรันหน้าเว็บจริง ให้มองว่าเป็นด่านแรกที่รวดเร็ว ซึ่งตรวจจับความล้มเหลวตาม WCAG ที่พบบ่อยและมีผลกระทบสูงได้ — ข้อความ alt ที่หายไป, ฟิลด์ที่ไม่มี label, ลำดับหัวข้อที่เสียหาย, ข้อความคอนทราสต์ต่ำ และลิงก์ที่กำกวม — ก่อนส่งหน้าเว็บต่อ ใช้ร่วมกัน (ไม่ใช่ใช้แทน) กับการตรวจสอบด้วยตนเองอย่างเต็มรูปแบบหรือเครื่องมือตรวจสอบเฉพาะทางสำหรับสิ่งที่ส่งขึ้นสู่โปรดักชัน