รูปภาพซับซ้อน: แผนภูมิ แผนที่ และคำอธิบายแบบยาว
จัดการรูปภาพที่ต้องการมากกว่าวลีสั้น ๆ
รูปภาพซับซ้อน: แผนภูมิ แผนที่ และคำอธิบายแบบยาว เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
เมื่อข้อความแสดงแทนไม่เพียงพอ
รูปภาพบางรูปมีข้อมูลมากเกินกว่าจะอธิบายด้วยวลีสั้น ๆ แผนภูมิ แผนที่ และแผนผังต้องใช้แผนการอธิบายที่ ยาวกว่า
เริ่มด้วยข้อความแสดงแทนสั้น ๆ
แม้แต่ภาพที่ซับซ้อนก็ยังควรมี ข้อความ alt สั้น ๆ ที่ระบุว่าภาพคืออะไร เช่น แผนภูมิแท่งแสดงยอดขายรายเดือนของปี 2024
<img src="chart.png" alt="Bar chart of monthly sales for 2024">เพิ่มรายละเอียด
ข้อความ alt สั้น ๆ ใช้ระบุภาพ ส่วน คำบรรยายแบบยาวที่อยู่ใกล้กันจะอธิบายข้อมูลจริงหรือความสัมพันธ์ที่ภาพแสดง
อธิบายข้อค้นพบ
คำบรรยายแบบยาวที่ดีจะบอก ประเด็นสำคัญ เช่น ยอดขายสูงสุดในเดือนธันวาคม แทนที่จะเป็นเพียงรายการค่าทุกค่าแบบแห้ง ๆ
ตารางข้อมูลเป็นทางเลือกสำรอง
สำหรับแผนภูมิ ทางเลือกที่ดีที่สุดมักเป็น ตาราง HTML จริงที่มีตัวเลขชุดเดียวกันอยู่ใต้ภาพ
เชื่อมโยงไปยังคำบรรยาย
คุณสามารถวางคำบรรยายแบบยาวไว้บนหน้า แล้วเชื่อมโยงด้วย aria-describedby ที่ชี้ไปยัง id ขององค์ประกอบนั้น
<img src="map.png" alt="Store map" aria-describedby="mapdesc">Figure และ Figcaption
ครอบภาพและคำอธิบายที่มองเห็นได้ด้วย figure และ figcaption เพื่อให้ทุกคนเข้าใจว่าทั้งสองส่วนเป็นคู่กัน
<figure><img src="flow.png" alt="Checkout flow"><figcaption>Three-step checkout</figcaption></figure>แผนที่ต้องมีข้อมูล
ภาพแผนที่จะไม่มีประโยชน์หากขาดข้อเท็จจริงเบื้องหลัง ดังนั้นควรใส่ ที่อยู่ เส้นทาง หรือรายการข้อมูลเป็นข้อความทดแทน
แผนภาพและลำดับขั้น
สำหรับผังงาน ให้อธิบายขั้นตอนและ ลำดับ ของขั้นตอนเป็นร้อยแก้ว เพื่อให้ตรรกะยังคงเข้าใจได้แม้ไม่มีการจัดวางแบบภาพ
ทำให้ค้นพบได้ง่าย
ตรวจสอบให้แน่ใจว่าคำบรรยายแบบยาว ค้นหา ได้ง่าย ข้อความทดแทนที่ซ่อนไว้จนผู้ใช้เข้าถึงไม่ได้ย่อมไม่ช่วยอะไรเลย
ปรับความพยายามตามความซับซ้อน
ยิ่งภาพมีรายละเอียดมาก ข้อความทดแทนก็ยิ่งต้องอธิบายมาก ให้ ความซับซ้อน ของภาพเป็นตัวกำหนดว่าคุณควรเขียนมากเพียงใด
ตรวจสอบอย่างรวดเร็ว
เลือกแนวทางที่ดีที่สุดสำหรับแผนภูมิที่ซับซ้อน
สรุปทบทวน
คุณทำได้แล้ว! ภาพที่ซับซ้อนควรมี ข้อความ alt สั้น ๆ พร้อมข้อความทดแทนจริง ตารางข้อมูล figcaption หรือ aria-describedby ที่สื่อถึงข้อค้นพบสำคัญ
คำถามที่พบบ่อย
บทเรียน “รูปภาพซับซ้อน: แผนภูมิ แผนที่ และคำอธิบายแบบยาว” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “รูปภาพซับซ้อน: แผนภูมิ แผนที่ และคำอธิบายแบบยาว” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ 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 ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “รูปภาพซับซ้อน: แผนภูมิ แผนที่ และคำอธิบายแบบยาว” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม
ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ให้ข้อมูลหรือเพื่อตกแต่ง: การตัดสินใจแรก
- เขียน alt ให้สื่อจุดประสงค์ ไม่ใช่แค่พิกเซล
- alt ว่างและรูปภาพตกแต่งที่ซ่อนอยู่
- รูปภาพซับซ้อน: แผนภูมิ แผนที่ และคำอธิบายแบบยาว