รูปภาพ

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

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

จุดประสงค์และบริบทของรูปภาพ

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

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

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

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

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

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

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

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

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

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

ตั้งค่าบทบาทเป็น 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 โดยค่าเริ่มต้น

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

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

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

รูปภาพที่ใช้งานได้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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