สี รูปแบบ และป้ายกำกับโดยตรง
เข้ารหัสชุดข้อมูลเพื่อให้ผู้มีภาวะตาบอดสีอ่านได้
สี รูปแบบ และป้ายกำกับโดยตรง เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
สีเพียงอย่างเดียวทำให้บางคนเข้าใจผิด
ผู้ชายประมาณ 1 ใน 12 คนไม่สามารถแยกแยะสีบางคู่ได้อย่างน่าเชื่อถือ หากแผนภูมิระบุว่าสีแดงหมายถึงการขาดทุน ผู้ใช้เหล่านั้นจะไม่เห็นความแตกต่างเลย 🎨
กฎสองช่องทาง
เข้ารหัสข้อมูลของแต่ละชุดด้วย ช่องทางที่สองนอกเหนือจากสี เช่น ลวดลาย รูปร่าง หรือป้ายกำกับโดยตรง สีจึงเป็นเพียงตัวช่วยเสริม ไม่ใช่สัญญาณเดียว
ใช้ลวดลายเติมช่องว่าง
ใช้ ลวดลายที่แตกต่างกันกับแท่งและพื้นที่ เช่น เส้นหรือจุด การเติมลวดลายช่วยแยกชุดข้อมูลออกจากกันได้แม้แสดงผลเป็นโทนเทาอย่างเดียว
<rect fill="url(#stripes)" />ใช้รูปร่างต่างกันกับแผนภูมิเส้น
ในแผนภูมิเส้น ให้ทำเครื่องหมายจุดด้วย รูปร่างที่แตกต่างกัน เช่น วงกลม สี่เหลี่ยม และสามเหลี่ยม แต่ละเส้นจะแยกออกจากกันได้โดยไม่ต้องพึ่งเฉดสี
ป้ายกำกับโดยตรงดีกว่าคำอธิบายสัญลักษณ์
คำอธิบายสัญลักษณ์ที่แยกออกมาต่างหากบังคับให้ผู้ใช้จับคู่สี ให้วาง ป้ายกำกับไว้บนเส้นหรือส่วนของแผนภูมิโดยตรง เพื่อให้ชื่ออยู่ติดกับข้อมูล
เลือกชุดสีที่ปลอดภัยสำหรับผู้มีภาวะตาบอดสี
สีบางคู่ เช่น แดงกับเขียว แยกออกจากกันได้ยากที่สุด ชุดสีที่ ปลอดภัยสำหรับผู้มีภาวะตาบอดสี เช่น Okabe-Ito จะช่วยหลีกเลี่ยงความสับสนเหล่านี้
ความเปรียบต่างยังสำคัญในกรณีนี้
ชุดข้อมูลที่อยู่ติดกันและป้ายกำกับต้องมี ความเปรียบต่างที่เพียงพอ WCAG กำหนดให้ส่วนกราฟิกที่มีความหมายมีอัตราส่วนอย่างน้อย 3 ต่อ 1
ทดสอบในโทนสีเทา
ตรวจสอบอย่างรวดเร็วด้วยการดูแผนภูมิใน โทนสีเทา หากคุณแยกชุดข้อมูลออกจากกันไม่ได้ ผู้มีภาวะตาบอดสีก็แยกไม่ได้เช่นกัน โปรดแก้ไขก่อนเผยแพร่
filter: grayscale(100%);เป้าหมายคือการเข้ารหัสซ้ำซ้อน
การซ้อนสัญญาณเหล่านี้เรียกว่า การเข้ารหัสซ้ำซ้อน ได้แก่ สี ลวดลาย และป้ายกำกับ หากสัญญาณหนึ่งหายไป แผนภูมิก็ยังอ่านได้อย่างชัดเจน
อย่าใช้สัญญาณมากจนเกินไป
ความสมดุลเป็นสิ่งสำคัญ การใส่ลวดลายทุกแบบพร้อมกันทำให้ดูวุ่นวาย เพิ่มเพียงพอให้แต่ละชุดข้อมูล แตกต่างอย่างชัดเจน และแผนภูมิยังดูสบายตา
ยังช่วยในสภาพแสงไม่ดี
ป้ายกำกับโดยตรงและลวดลายยังช่วยแผนภูมิที่ดูท่ามกลาง แสงแดด บนหน้าจอราคาถูก หรือพิมพ์เป็นขาวดำ ทุกคนจึงได้ประโยชน์ ☀️
ตรวจสอบอย่างรวดเร็ว
เหตุใดสีเพียงอย่างเดียวจึงเป็นวิธีที่ไม่ดีในการแยกชุดข้อมูลของแผนภูมิ
ทบทวน: ใช้สัญญาณมากกว่าหนึ่งแบบ
คุณได้เรียนรู้ว่าอย่าพึ่งพาสีเพียงอย่างเดียว ให้เพิ่ม ลวดลาย รูปร่าง หรือป้ายกำกับโดยตรง เลือกชุดสีที่ปลอดภัย และทดสอบในโทนสีเทา 🖤
คำถามที่พบบ่อย
บทเรียน “สี รูปแบบ และป้ายกำกับโดยตรง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “สี รูปแบบ และป้ายกำกับโดยตรง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Web Accessibility Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “สี รูปแบบ และป้ายกำกับโดยตรง”
เข้ารหัสชุดข้อมูลเพื่อให้ผู้มีภาวะตาบอดสีอ่านได้ คุณปฏิบัติ Web Accessibility Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Web Accessibility Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Web Accessibility Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “สี รูปแบบ และป้ายกำกับโดยตรง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม
ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- กราฟทุกกราฟต้องมีทางเลือกเป็นข้อความ
- ทางเลือกสำรองเป็นตารางข้อมูล
- สี รูปแบบ และป้ายกำกับโดยตรง
- กราฟแบบโต้ตอบที่นำทางด้วยแป้นพิมพ์ได้