ตัวเลือกข้อความสำหรับรูปภาพ

การใช้แอตทริบิวต์ Alt เพื่อระบุข้อความแสดงแทนสำหรับรูปภาพ

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

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

<article>
    <h2>Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
    <img src="imgs/160204193356-01-cat-500.jpg">
</article>

การศึกษาพบว่าแมว 9 ใน 10 ตัวจะแอบตัดสินเจ้าของขณะนอนหลับ

แมว

ในหน้าเว็บมีรูปแมวแสดงบทความเกี่ยวกับพฤติกรรมการตัดสินที่เป็นที่รู้จักกันดีของแมว โปรแกรมอ่านหน้าจอจะอ่านออกเสียงรูปภาพนี้โดยใช้ชื่อจริงของรูปภาพ "/160204193356-01-cat-500.jpg" ข้อมูลนี้ถูกต้อง แต่ไม่มีคุณค่าใดๆ ทั้งสิ้น

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

<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly off into space">

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

รูปภาพที่มีข้อความแสดงแทนที่ปรับปรุงแล้ว

ความคิดเห็นเกี่ยวกับ alt

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

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

ลองใช้รูปภาพโลโก้ที่ลิงก์ในโฆษณา Masthead ของหน้าเว็บ เช่น รูปภาพที่แสดงด้านบน เราอธิบายรูปภาพได้อย่างถูกต้องว่า "โลโก้ Funion"

<img class="logo" src="logo.jpg" alt="The Funion logo">

คุณอาจอยากใช้ข้อความทางเลือกที่เข้าใจง่ายกว่า เช่น "หน้าแรก" หรือ "หน้าหลัก" แต่วิธีนี้ไม่เป็นประโยชน์ต่อทั้งผู้ใช้ที่มีสายตาเลือนรางและผู้ใช้ที่มีสายตาปกติ

แต่ลองนึกถึงผู้ใช้โปรแกรมอ่านหน้าจอที่ต้องการค้นหาโลโก้โฆษณา Masthead ในหน้าเว็บ การให้ค่า Alt เป็น "home" จะทําให้ผู้ใช้ได้รับประสบการณ์ที่ทําให้สับสนมากขึ้น และผู้ใช้ที่มองเห็นก็พบปัญหาเดียวกันกับผู้ใช้โปรแกรมอ่านหน้าจอ นั่นคือการหาว่าเมื่อคลิกโลโก้เว็บไซต์แล้วจะเกิดอะไรขึ้น

ในทางกลับกัน การอธิบายรูปภาพก็อาจไม่เป็นประโยชน์เสมอไป ตัวอย่างเช่น ให้พิจารณารูปภาพแว่นขยายภายในปุ่มค้นหาที่มีข้อความ "ค้นหา" หากไม่มีข้อความ คุณควรตั้งค่าค่า alt ของรูปภาพเป็น "search" แต่เนื่องจากเรามีข้อความที่มองเห็นได้ โปรแกรมอ่านหน้าจอจึงจะเลือกและอ่านออกเสียงคําว่า "ค้นหา" ดังนั้นค่า alt ที่เหมือนกันในรูปภาพจึงซ้ำซ้อน

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

<img src="magnifying-glass.jpg" alt="">

โดยสรุปแล้ว รูปภาพทั้งหมดควรมีแอตทริบิวต์ alt แต่ไม่จำเป็นต้องมีข้อความทั้งหมด รูปภาพสำคัญควรมีข้อความแสดงแทนที่สื่อความหมายซึ่งอธิบายสิ่งที่รูปภาพแสดงอย่างกระชับ ส่วนรูปภาพตกแต่งควรมีแอตทริบิวต์ alt ว่างเปล่า นั่นคือ alt=""