กราฟทุกกราฟต้องมีทางเลือกเป็นข้อความ

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

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

หากแผนภูมิของคุณเป็นภาพ แอตทริบิวต์ alt ควรระบุข้อสรุป ไม่ใช่เขียนเพียงว่าแผนภูมิ 📊

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

โดยค่าเริ่มต้น แผนภูมิ SVG ไม่ใช่ภาพ ให้เพิ่ม role="img" พร้อมชื่อ เพื่อให้เทคโนโลยีสิ่งอำนวยความสะดวกมองกราฟิกทั้งหมดเป็นหน่วยเดียวที่มีป้ายกำกับ

องค์ประกอบ title ที่เป็นลูกคนแรกของ SVG ก็สามารถตั้งชื่อให้ SVG ได้เช่นกัน ให้อ้างอิงองค์ประกอบนี้ด้วย aria-labelledby เพื่อให้รองรับโปรแกรมอ่านหน้าจอได้อย่างมั่นคง

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

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

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

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

กราฟประกายเล็ก ๆ ที่ใช้ตกแต่งข้างตัวเลขไม่ได้เพิ่มความหมายใหม่ โปรดซ่อนด้วย aria-hidden เพื่อไม่ให้รบกวนประสบการณ์การฟัง

ข้อความทางเลือกของแผนภูมิควรเริ่มต้นด้วยอะไร

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