แค่มี Alt Text ไม่พอ! GitHub เปิดตัวปลั๊กอินใหม่ ตรวจสอบคุณภาพคำอธิบายรูปภาพอัตโนมัติ

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

ข้อมูลจากรายงาน WebAIM Million ปี 2026 ระบุว่า alt text ซึ่งเป็น HTML attribute สำหรับอธิบายรูปภาพ ขาดหายไปถึง 16.2% ในขณะที่รูปภาพที่มี alt text อีก 10.8% กลับให้ข้อมูลที่ไม่มีประโยชน์ เช่น alt="image" หรือชื่อไฟล์ดิบๆ

แม้เครื่องมืออัตโนมัติทั่วไปจะตรวจจับ alt text ที่หายไปได้แม่นยำ แต่ยังล้มเหลวในการตรวจสอบคุณภาพเนื้อหา ทำให้ค่าอย่าง alt="IMG_2847.png" มักจะผ่านการตรวจสอบได้หน้าตาเฉย เพื่อแก้ปัญหานี้ เราจึงสร้าง alt text plugin สำหรับ GitHub Accessibility Scanner เพื่อช่วยคัดกรอง alt text ให้มีประสิทธิภาพยิ่งขึ้น

การพิสูจน์ความผิดของสตริงโดยไม่ต้องเห็นรูปภาพ เนื่องจากการตัดสินคุณภาพของข้อความอธิบายรูปภาพมักใช้ดุลยพินิจของมนุษย์ เราจึงแบ่งการทำงานเป็นกฎแบบ deterministic 5 ข้อที่ตรวจสอบสตริงได้ทันทีโดยไม่ต้องใช้ AI เช่น การตรวจหาชื่อไฟล์, ข้อความ placeholder อย่าง TODO, หรือคำทั่วไปอย่าง image ซึ่งกฎเหล่านี้จะทำงานเป็นค่าเริ่มต้นโดยไม่เก็บข้อมูลส่วนบุคคล

ในการสแกนหน้าเว็บ เราเลือกใช้ locator ตามบทบาท (role-based) ของ Playwright แทนคำสั่งทั่วไป เพื่อคัดกรองเฉพาะรูปภาพที่อยู่ใน accessibility tree เท่านั้น ส่วนรูปภาพที่เป็นการตกแต่งซึ่งมีค่า alt="" จะถูกยกเว้นเพื่อลดการรบกวนนักพัฒนา

การซ้ำซ้อนเป็นปัญหาของเลย์เอาต์ ไม่ใช่ปัญหาของ DOM

ปัญหาที่น่าสนใจคือ alt text ที่ซ้ำกัน เช่น ไอคอนรูปดาว 5 ดวงที่ทุกดวงเขียนว่า "3/5 stars" ซึ่งทำให้เครื่องอ่านหน้าจออ่านซ้ำไปมาโดยไม่จำเป็น ในตอนแรกเราตรวจสอบตามลำดับในโค้ด แต่พบข้อผิดพลาดเมื่อโลโก้ที่หัวเว็บและท้ายเว็บถูกแจ้งเตือนว่าซ้ำกัน ทั้งที่อยู่ห่างกันมากบนหน้าจอ

เราจึงปรับปรุงให้กฎตรวจสอบจากเลย์เอาต์หน้าจอจริง โดยจะแจ้งเตือนความซ้ำซ้อนก็ต่อเมื่อรูปภาพมีระยะห่าง (bounding box) ที่ใกล้กันมากเท่านั้น ดังตัวอย่างโค้ด:

const gap = Math.max(horizontalGap, verticalGap) 
const largerDim = Math.max(a.boundingBox.width, a.boundingBox.height, 
                           b.boundingBox.width, b.boundingBox.height) 
return gap > GAP_MULTIPLIER * largerDim

การใช้ AI เป็นผู้ตรวจสอบคุณภาพ

สำหรับกฎแบบเลือกเปิด (opt-in) เราได้นำโมเดลการมองเห็น (vision model) ผ่าน GitHub Models มาช่วยวิเคราะห์บริบท โดยจะส่งข้อมูลทั้งรูปภาพ ชื่อหน้าเว็บ และเนื้อความรอบข้างสูงสุด 600 ตัวอักษร เพื่อให้ AI ช่วยตัดสินว่า alt text นั้นเหมาะสมกับบริบทหรือไม่ เพื่อป้องกันไม่ให้ AI "จับผิด" เกินความจำเป็น เราได้ปรับปรุงกระบวนการ 3 ส่วน คือการให้ AI ตัดสินตามลำดับขั้นตอน, การยอมรับ alt text สั้นๆ หากมีเนื้อหารอบข้างอธิบายชัดเจนอยู่แล้ว และการบังคับให้ AI ต้องให้เหตุผล (reasoning) ก่อนสรุปผลคำตัดสิน (verdict)

ความเป็นส่วนตัวและค่าใช้จ่าย

การใช้โมเดลภายนอกทำให้เราให้ความสำคัญกับความเป็นส่วนตัว โดยจะปกปิด URL และตัด parameter ที่อาจเป็น token ระบุตัวตนออกก่อนส่งให้โมเดล นอกจากนี้ เนื่องจากมีค่าใช้จ่ายในการเรียกใช้ AI เราจึงแนะนำให้ตั้งเวลาการรันสแกน แทนการรันทุกครั้งที่มีการ commit โค้ด

อย่างไรก็ตาม เครื่องมือนี้ยังมีข้อจำกัด เช่น ยังไม่รองรับ SVG หรือ canvas และ alt text ที่ AI แนะนำเป็นเพียงร่างเบื้องต้นเท่านั้น เป้าหมายสูงสุดของการพัฒนาปลั๊กอินนี้คือการช่วยให้นักพัฒนาสามารถโฟกัสจุดที่ผิดพลาดได้แม่นยำขึ้น แต่การทดสอบกับผู้ใช้งานจริงยังคงเป็นหัวใจสำคัญของการสร้างเว็บไซต์ที่ทุกคนเข้าถึงได้

ลองใช้ alt-text plugin ในกระบวนการสแกนการเข้าถึงของคุณ หากพบข้อผิดพลาด สามารถรายงานได้ที่ issue ของโปรเจกต์ได้ทันที