การใช้แอตทริบิวต์ 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 สีดำ) และผู้ใช้สามารถเลือกได้ว่าจะไปที่บทความต่อหรือไม่
ความคิดเห็น 2-3 รายการเกี่ยวกับ alt
:
alt
ช่วยให้คุณระบุสตริงง่ายๆ ที่จะใช้ได้ทุกเมื่อที่รูปภาพไม่พร้อมใช้งาน เช่น เมื่อรูปภาพโหลดไม่สำเร็จ หรือบ็อตรวบรวมข้อมูลเว็บเข้าถึง หรือพบโดยโปรแกรมอ่านหน้าจอalt
แตกต่างจากtitle
หรือคำอธิบายภาพประเภทต่างๆ ตรงที่จะใช้ในกรณีที่รูปภาพไม่พร้อมใช้งานเท่านั้น
การเขียนข้อความแสดงแทนที่เป็นประโยชน์ ก็เป็นศิลปะอย่างหนึ่ง หากต้องการให้สตริงเป็นทางเลือกข้อความที่ใช้ได้ สตริงนั้นจำเป็นต้องถ่ายทอดแนวคิดเดียวกันกับรูปภาพในบริบทเดียวกัน
พิจารณารูปภาพโลโก้ที่ลิงก์ไว้ในโฆษณา Masthead ของหน้าเว็บดังเช่นที่แสดงไว้ด้านบน เราสามารถอธิบายรูปภาพได้ค่อนข้างแม่นยำว่า "โลโก้ Funion"
<img class="logo" src="logo.jpg" alt="The Funion logo">
คุณอาจจะอยากแสดงข้อความอื่น เช่น "หน้าแรก" หรือ "หน้าหลัก" ที่ดูง่าย แต่การทำเช่นนี้จะส่งผลเสียต่อทั้งผู้ใช้ที่มีสายตาเลือนรางและผู้ใช้ที่มีความบกพร่องทางสายตา
แต่ลองนึกภาพผู้ใช้โปรแกรมอ่านหน้าจอที่ต้องการค้นหาโลโก้โฆษณา Masthead ในหน้าเว็บ การระบุค่า Alt เป็น "หน้าแรก" จะทำให้สับสนมากขึ้น และผู้ใช้ที่เห็นก็ต้องเผชิญกับความท้าทายเดียวกัน นั่นคือการค้นหาว่าการคลิกโลโก้ของเว็บไซต์ทำอะไรบ้างในฐานะผู้ใช้โปรแกรมอ่านหน้าจอ
ในทางกลับกัน การอธิบายรูปภาพก็ไม่ได้มีประโยชน์เสมอไป เช่น ลองพิจารณารูปภาพแว่นขยายภายในปุ่มค้นหาที่มีข้อความ "ค้นหา" หากไม่พบข้อความ คุณจะต้องระบุค่า Alt
ของ "search" ให้กับรูปภาพนั้น แต่เนื่องจากเรามีข้อความที่มองเห็นได้ โปรแกรมอ่านหน้าจอจะเลือกและอ่านออกเสียงคำว่า "ค้นหา" ดังนั้นค่า alt
ที่เหมือนกันในรูปภาพจึงซ้ำซ้อน
แต่เรารู้ว่าถ้าเราปล่อยข้อความ alt
ไว้ เราก็อาจได้ยินชื่อไฟล์ภาพแทน ซึ่งก็ไม่มีประโยชน์และอาจสับสนได้ ในกรณีนี้ คุณสามารถใช้แอตทริบิวต์ alt
ที่ว่างเปล่า โปรแกรมอ่านหน้าจอจะข้ามรูปภาพไปเลย
<img src="magnifying-glass.jpg" alt="">
โดยสรุปแล้ว รูปภาพทั้งหมดควรมีแอตทริบิวต์ alt
แต่ไม่จำเป็นต้องมีข้อความทุกรูป รูปภาพที่สำคัญควรมีข้อความแสดงแทนที่สื่อความหมายซึ่งอธิบายว่ารูปภาพคืออะไร ส่วนรูปภาพตกแต่งควรมีแอตทริบิวต์ Alt ที่ว่างเปล่า ซึ่งก็คือ alt=""