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

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

Alice Boxhall

Dave Gash

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=""