SCT

กำลังเตรียมประสบการณ์ดิจิทัล

ข้อความแทนภาพผ่านเครื่องตรวจอัตโนมัติ ไม่ได้แปลว่าเขียนดี

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

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

ตัวเลขที่บอกว่าปัญหาใหญ่กว่าที่คิด

รายงานประจำปี 2026 ของ WebAIM ระบุว่ารูปภาพมากกว่าหนึ่งในสี่บนหน้าแรกของเว็บยอดนิยม มีข้อความแทนภาพที่หายไป กำกวม หรือคัดลอกมาจากรูปข้างเคียง แยกเป็นรูปที่ไม่มีข้อความแทนภาพเลย 16.2% และรูปที่มีข้อความแต่ไม่ช่วยอะไรอีก 10.8% เช่นใส่ชื่อไฟล์หรือคำทั่วไปที่ไม่สื่อความหมาย

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

ตัวอย่างที่ผ่านเครื่องตรวจแต่ไร้ประโยชน์

กรณีที่พบบ่อยได้แก่ การใส่ชื่อไฟล์อย่าง IMG_2847.png การใส่คำว่า image เฉย ๆ การใส่ข้อความว่า TODO ค้างไว้ตั้งแต่ตอนพัฒนา และการใส่ข้อความเดียวกันซ้ำกับไอคอนทุกตัว เช่น ไอคอนดาวห้าดวงที่ทุกดวงเขียนว่าสามในห้าดาวเหมือนกันหมด ทำให้ผู้ใช้โปรแกรมอ่านหน้าจอได้ยินข้อความเดิมห้ารอบ

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

ภาพประกอบบทความหมวดUX/UI
ภาพประกอบบทความหมวดUX/UI

ลำดับการตัดสินใจสี่ขั้น

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

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

แยกสิ่งที่พิสูจน์ได้ออกจากสิ่งที่ได้แค่สงสัย

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

ข้อควรระวังที่บทความย้ำคือ การตรวจอัตโนมัติเป็นเพียงพื้นขั้นต่ำ ไม่ใช่การรับรองว่าผ่านมาตรฐาน การทดสอบกับผู้ใช้ที่ใช้เทคโนโลยีช่วยเหลือจริงยังจำเป็นเสมอ และเครื่องมือกลุ่มนี้มักครอบคลุมเฉพาะแท็ก img เท่านั้น ไม่รวม SVG ภาพพื้นหลังจาก CSS และ canvas

ภาพประกอบบทความหมวดUX/UI
ภาพประกอบบทความหมวดUX/UI

นำไปใช้กับทีมไทยอย่างไร

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

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

สรุปสาระสำคัญ

  • ตัวเลขที่บอกว่าปัญหาใหญ่กว่าที่คิด
  • ตัวอย่างที่ผ่านเครื่องตรวจแต่ไร้ประโยชน์
  • ลำดับการตัดสินใจสี่ขั้น
แหล่งอ้างอิงเรียบเรียงจาก GitHub Blog — Your alt text passes automated checks. That doesn't mean it's any good. — อ่านบทความต้นฉบับ
ภาพปก: GitHub Blog · ลิขสิทธิ์ภาพเป็นของเจ้าของต้นฉบับ ใช้ประกอบการรายงานพร้อมอ้างอิงแหล่งที่มา
มีคำถามเพิ่มเติมเกี่ยวกับบทความนี้? เขียนหาเราได้ที่ info@smart-cyber-tech.com
บริการที่เกี่ยวข้องจากทีมงาน Smart Cyber Tech

บทความอื่นที่เกี่ยวข้อง

บทความที่เกี่ยวข้อง

เว็บที่ทุกคนใช้ได้: เริ่มต้นกับ Accessibility และมาตรฐาน WCAG เว็บ

เว็บที่ทุกคนใช้ได้: เริ่มต้นกับ Accessibility และมาตรฐาน WCAG

ผู้ใช้จำนวนไม่น้อยเข้าถึงเว็บผ่าน Screen Reader แป้นพิมพ์ หรือมีข้อจำกัดด้านการมองเห็น เว็บที่เข้าถึงไม่ได้คือการปิดประตูใส่ลูกค้า บทความนี้แนะนำมาตรฐาน WCAG ของ W3C หลักการ POUR และการแก้ไข 5 อันดับปัญหาที่พบบ่อยที่สุด ซึ่งส่วนใหญ่ใช้ความพยายามน้อยกว่าที่คิด

อ่านบทความ
พื้นฐาน UX Research ฉบับ Nielsen Norman Group: เข้าใจผู้ใช้ก่อนเขียนโค้ด UX/UI

พื้นฐาน UX Research ฉบับ Nielsen Norman Group: เข้าใจผู้ใช้ก่อนเขียนโค้ด

ฟีเจอร์ที่สร้างโดยไม่ถามผู้ใช้คือการพนันราคาแพง บทความนี้สรุปแนวทางจาก UX Research Cheat Sheet ของ Nielsen Norman Group อธิบายวิธีเลือกวิธีวิจัยให้ตรงคำถาม และเทคนิคทดสอบ Usability กับผู้ใช้เพียง 5 คนที่ทีมเล็กก็ทำได้

อ่านบทความ
ออกแบบเว็บ Responsive ยุคใหม่: จาก Media Query สู่ Container Query UX/UI

ออกแบบเว็บ Responsive ยุคใหม่: จาก Media Query สู่ Container Query

ผู้ใช้เว็บในไทยส่วนใหญ่เข้าผ่านมือถือ การออกแบบ Responsive จึงไม่ใช่ทางเลือกแต่คือมาตรฐาน บทความนี้รวบรวมแนวคิดสมัยใหม่จากบทความของ Smashing Magazine ตั้งแต่ Mobile-First, Fluid Layout ด้วย CSS Grid ไปจนถึง Container Query ที่เปลี่ยนวิธีคิดเรื่อง Breakpoint ไปตลอดกาล

อ่านบทความ

ติดต่อเพื่อขอรับคำปรึกษาจากทีมงาน

ตั้งแต่ประเมินระบบปัจจุบัน วางแผน จนถึงลงมือพัฒนา — คุยกับเราได้โดยไม่มีค่าใช้จ่าย

ปรึกษาทีมของเรา