0Pricing
Web Accessibility Academy · บทเรียน

สี รูปแบบ และป้ายกำกับโดยตรง

เข้ารหัสชุดข้อมูลเพื่อให้ผู้มีภาวะตาบอดสีอ่านได้

สี รูปแบบ และป้ายกำกับโดยตรง เป็นบทเรียน 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. กราฟทุกกราฟต้องมีทางเลือกเป็นข้อความ
  2. ทางเลือกสำรองเป็นตารางข้อมูล
  3. สี รูปแบบ และป้ายกำกับโดยตรง
  4. กราฟแบบโต้ตอบที่นำทางด้วยแป้นพิมพ์ได้
← กลับไปที่ Web Accessibility Academy