รูปภาพ

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

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

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

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

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

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

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

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

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

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

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

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

แอตทริบิวต์ข้อความทางเลือกที่ว่างเปล่า/ไม่มีข้อมูลแตกต่างจากทางเลือกที่ขาดหายไป ข้อความ หากไม่มีแอตทริบิวต์ข้อความสำรอง 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 ทราบบริบทเพิ่มเติมเกี่ยวกับรูปภาพและช่วยให้ผู้ใช้ 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 จะข้ามรูปภาพเหล่านี้โดยค่าเริ่มต้น หากคุณมีรูปภาพตกแต่งไม่มีปัญหา AT จะไม่สนใจ ได้ตามที่ต้องการ แต่ถ้าคุณมีรูปภาพที่ให้ข้อมูลได้ด้วย role="img" ARIA จำเป็นต้องเพิ่มลงในรูปแบบเพื่อให้ AT จดจำว่าเป็นรูปภาพ

ประการที่ 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"></img>
   </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> ของ HTML5 องค์ประกอบเหล่านี้ทำหน้าที่คล้ายกับ aria-describedby ตรงที่จัดกลุ่มองค์ประกอบต่างๆ อย่างมีความหมาย ช่วยสร้างการเชื่อมโยงระหว่างรูปภาพและคำอธิบายได้ดียิ่งขึ้น การเพิ่ม ARIA role="group" ช่วยเพิ่มความเข้ากันได้แบบย้อนหลังกับเว็บเบราว์เซอร์รุ่นเก่าที่ไม่รองรับความหมายดั้งเดิมขององค์ประกอบ <figure>

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

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

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

ข้อความสำรองที่ดีที่สุด แนวทางปฏิบัติต่างๆ ได้แก่

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

ตรวจสอบความเข้าใจ

ทดสอบความรู้ของคุณเกี่ยวกับ ARIA และ HTML