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

การใช้แอตทริบิวต์ 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 สีดำ) และผู้ใช้สามารถเลือกได้ว่าจะไปที่บทความต่อหรือไม่

ความคิดเห็น 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=""