Alt text ผ่านการตรวจอัตโนมัติ ไม่ได้แปลว่าใช้งานได้จริงเสมอไป

Alt text คืออะไรและทำไมคนทำเว็บต้องแคร์

ถ้าคุณกำลังฝึกเขียนโปรแกรม คุณอาจเคยได้ยินคำว่า Alt text (ข้อความอธิบายรูปภาพ) มาบ้าง มันคือคุณสมบัติหนึ่งใน HTML ที่ใช้บอกว่ารูปนี้คือรูปอะไร สำหรับคนที่มองไม่เห็นหรือใช้โปรแกรมอ่านหน้าจอ (Screen Reader) พวกเขาจะรับรู้เนื้อหาผ่านข้อความนี้แทนการมองเห็น

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

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

เมื่อการผ่านระบบเช็คอัตโนมัติ ไม่ได้แปลว่าใช้งานได้จริง

ในการพัฒนาเว็บ เรามักใช้เครื่องมือที่เรียกว่า Automated Checker (โปรแกรมตรวจเช็คคุณภาพโค้ดอัตโนมัติ) เพื่อดูว่าเราลืมใส่ Alt text หรือไม่ เครื่องมือพวกนี้จะบอกว่า "ผ่าน" ทันทีถ้ามีข้อความอยู่ในช่องนั้น แม้ว่าคุณจะใส่คำว่า alt="image" หรือชื่อไฟล์มั่วๆ ลงไปก็ตาม

ปัญหาคือเครื่องมือเหล่านี้มองแค่ว่า "มีหรือไม่มี" แต่มันไม่รู้ว่า "มีแล้วดีไหม" การเขียน alt="IMG_2847.png" หรือ alt="3/5 ดาว" ซ้ำกัน 5 ครั้งในหน้าเว็บเดียว อาจจะผ่านการตรวจของโปรแกรม แต่สำหรับผู้ใช้งานจริง มันคือความล้มเหลวในการสื่อสาร

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

สร้างกฎการตรวจสอบที่วัดผลได้จริง

การจะวัดว่า Alt text ดีหรือไม่นั้นทำได้ยาก เพราะมันเป็นเรื่องของความรู้สึก แต่เราสามารถสร้างกฎที่ชัดเจนเพื่อตรวจจับสิ่งที่ไม่ควรเกิดขึ้นได้ เช่น การตรวจสอบว่าข้อความนั้นเป็นเพียงชื่อไฟล์ หรือเป็นคำกว้างๆ ที่ไม่มีประโยชน์ เช่นคำว่า "รูปภาพ" หรือ "โลโก้"

เราควรสร้างระบบที่คัดกรองสิ่งเหล่านี้ออกไปโดยไม่ต้องเดา กฎที่ดีต้องเป็นแบบ Deterministic (กฎที่ให้ผลลัพธ์แน่นอนตายตัว) คือถ้าเจอคำแบบนี้ให้แจ้งเตือนทันที เช่น การใช้คำว่า "TODO" หรือ "tbd" (ยังไม่ได้ระบุ) ซึ่งเป็นสัญญาณว่านักพัฒนาลืมกลับมาแก้

นี่คือตัวอย่างการตรวจสอบเบื้องต้นที่คุณสามารถนำไปปรับใช้ในโปรเจกต์ของคุณได้

// ฟังก์ชันตรวจสอบความเหมาะสมของ Alt text เบื้องต้น
function isAltTextBad(altText) {
  const badPatterns = ["image", "logo", "chart", "img_"];
  const lowerAlt = altText.toLowerCase();
  
  // ตรวจสอบว่ามีคำที่ห้ามใช้หรือไม่
  return badPatterns.some(pattern => lowerAlt.includes(pattern));
}

console.log(isAltTextBad("Image of cat")); // ผลลัพธ์: true (ไม่ควรใช้)
console.log(isAltTextBad("Cat playing with yarn")); // ผลลัพธ์: false (ใช้ได้)

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

อย่าลืมดูโครงสร้างหน้าเว็บ ไม่ใช่แค่ตัวโค้ด

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

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

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

ใช้ AI ช่วยตรวจทานแบบมีขอบเขต

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

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

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

สรุป: การเขียน Alt text คือการใส่ใจผู้ใช้

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

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

การเป็นโปรแกรมเมอร์ที่เก่งไม่ได้วัดกันแค่ว่าคุณเขียนโค้ดได้เร็วแค่ไหน แต่คือการสร้างซอฟต์แวร์ที่ทุกคนเข้าถึงได้ ขอให้เริ่มฝึกตั้งแต่วันนี้ด้วยการใส่ใจรายละเอียดเล็กๆ อย่าง Alt text แล้วคุณจะกลายเป็นนักพัฒนาที่ใครๆ ก็อยากร่วมงานด้วยครับ

ที่มา: Your alt text passes automated checks. That doesn’t mean it’s any good. — The GitHub Blog