Web Accessibility Academy · บทเรียน

เขียน alt ให้สื่อจุดประสงค์ ไม่ใช่แค่พิกเซล

อธิบายความหมายของรูปภาพตามบริบท

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

เขียน 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

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

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