Web Accessibility Academy · บทเรียน

ให้ข้อมูลหรือเพื่อตกแต่ง: การตัดสินใจแรก

ตัดสินใจว่ารูปภาพจำเป็นต้องมีคำอธิบายหรือไม่

บทเรียน 1 จาก 413 ขั้นตอน

ให้ข้อมูลหรือเพื่อตกแต่ง: การตัดสินใจแรก เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน

คำถามแรก

ก่อนเขียนข้อความแสดงแทนแม้แต่คำเดียว ให้ถามตัวเองก่อนว่า รูปภาพนี้เพิ่ม ความหมายหรือมีไว้เพียงเพื่อความสวยงาม

สองประเภท

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

ความหมายของรูปภาพให้ข้อมูล

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

ความหมายของรูปภาพตกแต่ง

รูปภาพ ตกแต่งไม่เพิ่มข้อมูลใด ๆ เช่น ลวดลายพื้นหลัง เส้นเว้นระยะ หรือภาพสต็อกที่มีไว้สร้างบรรยากาศ

เหตุใดการตัดสินใจจึงสำคัญ

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

รูปภาพให้ข้อมูลต้องมีคำอธิบาย

หากรูปภาพให้ข้อมูล ให้เขียนข้อความ แสดงแทนที่สื่อความหมายของรูปภาพตามบริบทอย่างแท้จริง

<img src="sales-up.png" alt="Sales rose 40 percent in March">

รูปภาพตกแต่งให้เว้นว่าง

หากรูปภาพเป็นรูปตกแต่ง ให้กำหนดข้อความแสดงแทนเป็น ค่าว่าง เพื่อให้โปรแกรมอ่านหน้าจอข้ามไปทันที

<img src="divider.png" alt="">

รูปเดียวกัน สองบทบาท

ภาพถ่ายเดียวกันอาจให้ข้อมูลในหน้าหนึ่ง และเป็นภาพตกแต่งในอีกหน้าหนึ่ง บริบทต่างหากที่ กำหนด ไม่ใช่ตัวไฟล์เอง

การทดสอบที่ใช้ได้จริง

ลองถามว่า หากนำรูปภาพออก หน้าจะสูญเสียความหมายหรือไม่ คำตอบว่าใช่หมายถึง ให้ข้อมูล คำตอบว่าไม่ใช่หมายถึงตกแต่ง

อย่าปล่อยข้อความแสดงแทนทิ้งไว้

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

ตัดสินใจก่อน

ดังนั้นขั้นตอนการทำงานของคุณควรเริ่มจากการจัดประเภทรูปภาพแต่ละภาพว่าให้ข้อมูลหรือตกแต่ง ก่อนที่จะกังวลเรื่องถ้อยคำ

ตรวจสอบอย่างรวดเร็ว

ได้เวลาทดสอบการตัดสินใจหลักแล้ว

ทบทวน

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

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
30
บทเรียน
120

คำถามที่พบบ่อย

บทเรียน “ให้ข้อมูลหรือเพื่อตกแต่ง: การตัดสินใจแรก” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ให้ข้อมูลหรือเพื่อตกแต่ง: การตัดสินใจแรก” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ 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 ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “ให้ข้อมูลหรือเพื่อตกแต่ง: การตัดสินใจแรก” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม

ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

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

  1. ให้ข้อมูลหรือเพื่อตกแต่ง: การตัดสินใจแรก
  2. เขียน alt ให้สื่อจุดประสงค์ ไม่ใช่แค่พิกเซล
  3. alt ว่างและรูปภาพตกแต่งที่ซ่อนอยู่
  4. รูปภาพซับซ้อน: แผนภูมิ แผนที่ และคำอธิบายแบบยาว
← กลับไปที่ Web Accessibility Academy