รูปภาพ

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

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

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

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

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

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

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

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

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

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

หากตัดสินใจว่ารูปภาพเป็นการตกแต่ง รูปภาพนั้นต้องซ่อนจาก AT แบบเป็นโปรแกรม เมื่อคุณตั้งโปรแกรมให้ซ่อนรูปภาพ จะเป็นการส่งสัญญาณให้ AT ทราบว่ารูปภาพนั้นไม่จำเป็นต้องมีเพื่อทำความเข้าใจเนื้อหา บริบท หรือการกระทำของหน้า คุณซ่อนรูปภาพได้หลายวิธี รวมถึงการใช้ตัวเลือกข้อความว่าง/ว่างเปล่า การใช้ 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 จะข้ามไปโดยค่าเริ่มต้น หากคุณมีรูปภาพตกแต่ง ก็ไม่เป็นปัญหา เพราะ 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 และข้อความแสดงแทนของรูปภาพคือ "Lovely Ladybugs for your Lawn" เมื่อฟังโค้ดโลโก้ด้วยโปรแกรมอ่านหน้าจอ คุณจะได้ยินทั้งภาพและการทำงานที่ถ่ายทอดออกมาในรูปภาพเดียว

<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, &) และใช้เครื่องหมายขีดกลางคั่นระหว่างคำแทนที่จะใช้ขีดล่างในชื่อรูปภาพหรือข้อความทางเลือก
• ใช้เครื่องหมายวรรคตอนที่เหมาะสมเมื่อเป็นไปได้ หากไม่มี คำอธิบายรูปภาพจะฟังดูเป็นประโยคเดียว ที่ยืดยาวไม่สิ้นสุด
• เขียนข้อความสำรองแบบคน ไม่ใช่หุ่นยนต์ การใช้คีย์เวิร์ดในทางที่ผิด ไม่มีประโยชน์อะไร ผู้ที่ใช้โปรแกรมอ่านหน้าจอจะรำคาญและอัลกอริทึมของเครื่องมือค้นหาจะลงโทษคุณ

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

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