เขียน alt ให้สื่อจุดประสงค์ ไม่ใช่แค่พิกเซล
อธิบายความหมายของรูปภาพตามบริบท
เขียน alt ให้สื่อจุดประสงค์ ไม่ใช่แค่พิกเซล เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
อธิบายความหมาย ไม่ใช่รูปลักษณ์
ข้อความแสดงแทนที่ดีอธิบายว่ารูปภาพ สื่อความหมายอะไรในบริบท ไม่ใช่บรรยายทุกสีและรูปร่างแบบไล่ทีละพิกเซล
ให้ความสำคัญกับจุดประสงค์ ไม่ใช่พิกเซล
ถามว่ารูปภาพนี้อยู่ที่นี่เพื่ออะไร คำตอบคือ จุดประสงค์ของรูป และข้อความแสดงแทนควรสื่อสิ่งนั้นอย่างพอดี ไม่มากกว่านั้น
ข้ามคำว่า รูปภาพของ
อย่าเริ่มด้วยคำว่า รูปภาพของ หรือ ภาพถ่ายของ โปรแกรมอ่านหน้าจอประกาศอยู่แล้วว่าเป็น รูปภาพ ดังนั้นคำเหล่านี้จึงเสียเวลาโดยเปล่าประโยชน์
<img src="cat.jpg" alt="A tabby cat asleep on a keyboard">เขียนให้กระชับ
ตั้งเป้าให้เป็นวลีสั้น ๆ ที่สมบูรณ์ โดยปกติควรมีความยาวไม่เกินประมาณ 125 อักขระ หากต้องใช้มากกว่านั้น รูปภาพอาจมีความซับซ้อน
บริบทเปลี่ยนทุกอย่าง
ภาพสุนัขภาพเดียวกันอาจเป็นตัวอย่างสายพันธุ์ หรือเรื่องราวของลูกค้าที่มีความสุข ให้ บริบทโดยรอบเป็นตัวกำหนดถ้อยคำ
รูปภาพที่เป็นลิงก์
เมื่อรูปภาพเป็นสิ่งเดียวภายในลิงก์ ข้อความ แสดงแทนต้องอธิบายปลายทางของลิงก์ ไม่ใช่เพียงบอกว่ารูปเป็นภาพอะไร
<a href="/home"><img src="logo.svg" alt="Acme home"></a>รูปภาพที่มีข้อความ
หากภาพกราฟิกมีคำอยู่ ข้อความแสดงแทนต้องรวมข้อความนั้นไว้ ทั้งหมด เพื่อไม่ให้ผู้ใช้ที่มองไม่เห็นพลาดข้อมูล
อย่าทวนข้อความข้างเคียง
หากคำบรรยายที่อยู่ติดกับรูปภาพบอกข้อมูลนั้นไว้แล้ว การใช้ข้อความ แสดงแทนค่าว่างจะช่วยไม่ให้โปรแกรมอ่านหน้าจออ่านซ้ำสองครั้ง
เขียนให้เทียบเท่า
ลองจินตนาการว่าคุณกำลังอ่านข้อความแสดงแทนให้คนทางโทรศัพท์ฟัง หากเขาเข้าใจประเด็นเดียวกัน แสดงว่าคุณบรรลุ ความเทียบเท่าอย่างแท้จริง
หลีกเลี่ยงการยัดคำค้นหา
ข้อความแสดงแทนไม่ใช่ที่ทิ้งข้อความเพื่อการทำ SEO การยัด คำค้นหาจำนวนมากทำร้ายผู้ใช้จริง และเป็นสิ่งที่ข้อความแสดงแทนที่ดีควรหลีกเลี่ยง
เครื่องหมายวรรคตอนช่วยเรื่องจังหวะ
ลงท้ายข้อความแสดงแทนด้วยจุด เครื่องหมาย วรรคตอนเล็ก ๆ นี้ช่วยให้โปรแกรมอ่านหน้าจอหยุดพักอย่างเป็นธรรมชาติก่อนอ่านต่อ
ตรวจสอบอย่างรวดเร็ว
เลือกข้อความแสดงแทนที่ดีที่สุดด้านล่าง
ทบทวน
ก้าวหน้าได้ดีมาก ข้อความแสดงแทนที่ดีจะสื่อ จุดประสงค์ด้วยวลีที่กระชับ ไม่ขึ้นต้นด้วยคำว่ารูปภาพของ คำนึงถึงบริบท และไม่ยัดคำค้นหา
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 30
- บทเรียน
- 120
คำถามที่พบบ่อย
บทเรียน “เขียน alt ให้สื่อจุดประสงค์ ไม่ใช่แค่พิกเซล” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เขียน alt ให้สื่อจุดประสงค์ ไม่ใช่แค่พิกเซล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Web Accessibility Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เขียน alt ให้สื่อจุดประสงค์ ไม่ใช่แค่พิกเซล”
อธิบายความหมายของรูปภาพตามบริบท คุณปฏิบัติ Web Accessibility Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Web Accessibility Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Web Accessibility Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “เขียน alt ให้สื่อจุดประสงค์ ไม่ใช่แค่พิกเซล” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม
ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ให้ข้อมูลหรือเพื่อตกแต่ง: การตัดสินใจแรก
- เขียน alt ให้สื่อจุดประสงค์ ไม่ใช่แค่พิกเซล
- alt ว่างและรูปภาพตกแต่งที่ซ่อนอยู่
- รูปภาพซับซ้อน: แผนภูมิ แผนที่ และคำอธิบายแบบยาว