ให้ข้อมูลหรือเพื่อตกแต่ง: การตัดสินใจแรก
ตัดสินใจว่ารูปภาพจำเป็นต้องมีคำอธิบายหรือไม่
ให้ข้อมูลหรือเพื่อตกแต่ง: การตัดสินใจแรก เป็นบทเรียน 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ให้ข้อมูลหรือเพื่อตกแต่ง: การตัดสินใจแรก
- เขียน alt ให้สื่อจุดประสงค์ ไม่ใช่แค่พิกเซล
- alt ว่างและรูปภาพตกแต่งที่ซ่อนอยู่
- รูปภาพซับซ้อน: แผนภูมิ แผนที่ และคำอธิบายแบบยาว