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