เขียนหน้าสินค้าผลไม้แห้งให้ฟังรู้เรื่อง: ก่อน–หลังคำอธิบายภาพและหัวข้อ

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

เปลี่ยนคำถามจาก “ภาพสวยไหม” เป็น “ข้อมูลหายตรงไหน”

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

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

แยกข้อมูลเป็นสามชั้นก่อนลงมือเขียน

ชั้นแรก: ข้อมูลที่ทุกคนต้องอ่านได้

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

ชั้นที่สอง: สิ่งที่ภาพเพิ่มจากข้อความ

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

ชั้นที่สาม: ปุ่มและทางไปต่อ

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

เปรียบเทียบคำอธิบายที่ฟังแล้วเลือกต่อได้

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

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

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

จัดหัวข้อให้ฟังข้ามส่วนได้ ไม่ใช่แค่ทำตัวหนา

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

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

ทดลองหนึ่งหน้ากับหนึ่งงานซื้อ

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

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

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

FAQ: คำถามที่พบบ่อยของทีมเนื้อหา

ต้องใส่ชื่อสินค้าซ้ำในทุกรูปไหม?

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

เครื่องมือตรวจขึ้นสีเขียวแล้วถือว่าจบหรือยัง?

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

เจ้าของร้านเขียนเองได้ไหม ถ้าไม่รู้โค้ด?

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

สรุป: ให้ข้อมูลครบก่อนทำหน้าสินค้าให้หวือหวา

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

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