รูปภาพ

รูปภาพที่เข้าถึงได้อาจดูเหมือนเป็นหัวข้อง่ายๆ เมื่อมองแวบแรก เพียงแค่เพิ่ม "ข้อความแสดงแทน" ลงในรูปภาพก็เสร็จแล้ว แต่หัวข้อนี้มีความซับซ้อนมากกว่าที่บางคนคิด ในส่วนนี้ เราจะตรวจสอบข้อมูลต่อไปนี้

• วิธีอัปเดตโค้ดเพื่อให้เข้าถึงรูปภาพได้
• ข้อมูลใดบ้างที่ควรแชร์กับผู้ใช้และแชร์ที่ไหน
• วิธีอื่นๆ ในการปรับปรุงรูปภาพเพื่อรองรับคนพิการ

วัตถุประสงค์และบริบทของรูปภาพ

ก่อนที่จะเขียนโค้ดแม้แต่บรรทัดเดียว ให้พิจารณาถึงวัตถุประสงค์ของภาพจุด ตำแหน่งที่จะแสดง และวิธีการใช้งาน การถามคำถามเหล่านี้กับตนเองจะช่วยคุณกำหนดวิธีที่ดีที่สุดในการสื่อข้อมูลไปยังบุคคลที่ใช้เทคโนโลยีความช่วยเหลือพิเศษ (AT) เช่น โปรแกรมอ่านหน้าจอ

คุณอาจถามตัวเองว่า

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

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

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

รูปภาพตกแต่ง

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

หากพิจารณาว่ารูปภาพมีไว้เพื่อตกแต่ง รูปภาพดังกล่าวต้องซ่อนจาก AT โดยใช้โปรแกรม เมื่อคุณตั้งโปรแกรมให้รูปภาพซ่อนอยู่ จะเป็นการส่งสัญญาณให้ AT ทราบว่าไม่จำเป็นต้องใช้รูปภาพเพื่อทำความเข้าใจเนื้อหา บริบท หรือการดำเนินการของหน้า การซ่อนรูปภาพมีหลายวิธี เช่น ใช้ข้อความทางเลือกที่ว่างเปล่าหรือเป็นค่า Null, การใช้ ARIA หรือเพิ่มรูปภาพเป็นพื้นหลัง CSS ต่อไปนี้คือตัวอย่างวิธีซ่อนรูปภาพตกแต่งจากผู้ใช้

ว่างเปล่าหรือ Null alt

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

ตั้งค่าบทบาทเป็น presentation หรือ none

บทบาทที่ตั้งค่าเป็น presentation หรือ none จะนําความหมายขององค์ประกอบออกจากการแสดงในลําดับชั้นการช่วยเหลือพิเศษ ขณะเดียวกัน aria-hidden= "true" จะนําองค์ประกอบทั้งหมดและองค์ประกอบย่อยทั้งหมดออกจาก Accessibility API

<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">

ใช้ aria-hidden อย่างระมัดระวัง เนื่องจากอาจซ่อนองค์ประกอบที่คุณไม่ต้องการซ่อน

รูปภาพใน CSS

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

รูปภาพให้ข้อมูล

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

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

คุณสามารถเพิ่มคำอธิบายสำรองสำหรับองค์ประกอบ <img> โดยใส่แอตทริบิวต์ alt ไม่ว่าไฟล์ที่ชี้ถึงจะเป็นประเภทใด เช่น .jpg, .png, .svg และอื่นๆ

<img src=".../Ladybug_Swarm.jpg" alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">

อย่างไรก็ตาม เมื่อใช้องค์ประกอบ <svg> ในบรรทัด คุณจะต้องคำนึงถึงความสะดวกในการเข้าถึง

ประการแรก เนื่องจาก SVG ได้รับการเข้ารหัสตามความหมาย AT จึงจะข้าม SVG โดยค่าเริ่มต้น หากมีรูปภาพตกแต่ง ก็ไม่มีปัญหา AT จะละเว้นรูปภาพดังกล่าวตามที่ตั้งใจไว้ แต่หากมีรูปภาพที่ให้ข้อมูล คุณต้องเพิ่ม ARIA role="img" ลงในรูปแบบเพื่อให้ AT จดจําว่าเป็นรูปภาพ

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

<svg role="img" ...>
  <title>Cartoon drawing of a red, black, and gray ladybug.</title>
</svg>

รูปภาพที่มีฟังก์ชันการทำงาน

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

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

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

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

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

<div title="Navigate to the homepage">
   <a href="/">
      <img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
   </a>
</div>

รูปภาพที่ซับซ้อน

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

เช่นเดียวกับรูปภาพประเภทอื่นๆ คุณใช้วิธีต่างๆ เพื่อเพิ่มคำอธิบายสำรองลงในรูปภาพที่ซับซ้อนได้

<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug.">
<a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>

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

อีกวิธีหนึ่งที่คุณใช้ได้คือเพิ่มแอตทริบิวต์ aria-describedby ต่อท้ายองค์ประกอบ <img> คุณสามารถลิงก์รูปภาพกับรหัสที่มีคำอธิบายยาวขึ้นแบบเป็นโปรแกรมได้ วิธีนี้สร้างการเชื่อมโยงที่แน่นหนาระหว่างรูปภาพกับคำอธิบายแบบเต็ม คำอธิบายแบบขยายจะแสดงบนหน้าจอหรือซ่อนอยู่ก็ได้ แต่ให้พิจารณาแสดงคำอธิบายแบบขยายเพื่อรองรับผู้ใช้จำนวนมากขึ้น

อีกวิธีในการจัดกลุ่มคำอธิบายทางเลือกสั้นๆ ไว้กับคำอธิบายที่ยาวขึ้นคือการใช้องค์ประกอบ <figure> และ <figcaption> องค์ประกอบเหล่านี้ทํางานคล้ายกับ aria-describedby ตรงที่กลุ่มองค์ประกอบตามความหมาย ซึ่งจะสร้างการเชื่อมโยงที่แน่นขึ้นระหว่างรูปภาพกับคําอธิบาย

การเพิ่ม ARIA role="group" ช่วยให้เว็บเบราว์เซอร์เวอร์ชันเก่าที่ไม่รองรับความหมายขององค์ประกอบ <figure> ใช้งานร่วมกันได้

แนวทางปฏิบัติแนะนำสำหรับข้อความแสดงแทน

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

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

แนวทางปฏิบัติแนะนำเพิ่มเติมสำหรับข้อความแสดงแทนมีดังนี้

• หลีกเลี่ยงการใช้คำอย่าง "รูปภาพ" หรือ "รูปถ่าย" ในคำอธิบาย เนื่องจากโปรแกรมอ่านหน้าจอจะระบุประเภทไฟล์เหล่านี้ให้คุณ
• เมื่อตั้งชื่อรูปภาพ ให้ตั้งชื่อให้สอดคล้องกันและถูกต้องที่สุด ชื่อรูปภาพเป็นทางเลือกสำรองเมื่อไม่มีหรือระบบละเว้นข้อความแสดงแทน
• หลีกเลี่ยงการใช้อักขระที่ไม่ใช่ตัวอักษร (เช่น #, 9, &) และใช้ขีดกลางระหว่างคำแทนเครื่องหมายขีดล่างในชื่อรูปภาพหรือข้อความแสดงแทน
• ใช้เครื่องหมายวรรคตอนที่เหมาะสมเมื่อเป็นไปได้ หากไม่มีเครื่องหมายวรรคตอน คำอธิบายรูปภาพจะดูเป็นประโยคยาวๆ ที่ต่อเชื่อมกันจนจบไม่ลง
• เขียนข้อความแสดงแทนเหมือนมนุษย์ ไม่ใช่หุ่นยนต์ การใส่คีย์เวิร์ดมากเกินไปไม่มีประโยชน์ต่อใครเลย ผู้ใช้โปรแกรมอ่านหน้าจอจะรู้สึกรำคาญ และอัลกอริทึมของเครื่องมือค้นหาจะลงโทษคุณ

ทดสอบความเข้าใจ

ทดสอบความรู้