SVG ที่เข้าถึงได้: รูปแบบที่สมบูรณ์แบบสำหรับผู้ใช้โปรแกรมอ่านหน้าจอ

แม้ว่ากราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (SVG) จะเปิดตัวครั้งแรกในช่วงปลายทศวรรษ 90 แต่ก็ได้รับความนิยมอย่างมากในทศวรรษที่ผ่านมา เนื่องจากมีความยืดหยุ่นสูง ความเที่ยงตรงสูง และความสว่างที่สัมพันธ์กันในโลกที่แบนด์วิดท์และประสิทธิภาพมีความสำคัญมากกว่าที่เคย . ความก้าวหน้าใน JavaScript และการแนะนำข้อความค้นหาสื่อ CSS เช่น @prefers-color-scheme และ @prefers-reduced-motion ได้ขยายฟังก์ชันการทำงานของ SVG ให้ไปไกลกว่ากรณีใช้งานครั้งแรกเพียงแค่แสดงภาพเวกเตอร์บนเว็บไซต์

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

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

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

คำอธิบายทางเลือกพื้นฐานโดยใช้แท็ก <img>

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

รูปแบบ #1: <img> + alt="[words]"

 <img class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

รูปแบบ #2: <img> + role="img" + alt="[words]"

 <img role="img" class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

รูปแบบ #3: <img> + role="img" + aria-label="[words]"

 <img role="img" class="fox" aria-label="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

รูปแบบ #4: <img> + role="img" + aria-labelledby="[ID]"

 <p class="visually-hidden">What does the fox say?</p> <img role="img" aria-labelledby="caption1" class="fox" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

คำอธิบายทางเลือกพื้นฐานโดยใช้แท็ก <svg>

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

รูปแบบ #5: <svg> + role="img" + <title>

 <svg role="img" ...> <title>What does the fox say?</title> [design code] </svg>

รูปแบบ #6: <svg> + role="img" + <text>

 <svg role="img" ...> <text class="visually-hidden" font-size="0">What does the fox say?</text> [design code] </svg>

รูปแบบ #7: <svg> + role="img" + <title> + aria-describedby="[ID]"

 <svg role="img" ...> <title>What does the fox say?</title> [design code] </svg>

รูปแบบ #8: <svg> + role="img" + <title> + aria-labelledby="[ID]"

 <svg role="img" aria-labelledby="fox8" ...> <title>What does the fox say?</title> [design code] </svg>

คำอธิบายทางเลือกเพิ่มเติมโดยใช้แท็ก <svg>

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

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

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

รูปแบบ #9: <svg> + role="img" + <title> + <text>

 <svg role="img" ...> <title>What does the fox say?</title> <text class="visually-hidden" font-size="0">Will we ever know?</text> [design code] </svg>

รูปแบบ #10: <svg> + role="img" + <title> + <desc>

 <svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg>

รูปแบบ #11: <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"

 <svg role="img" aria-labelledby="fox11 description11" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg>

รูปแบบ #12: <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"

 <svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg> 

ผู้ชนะและผู้แพ้รูปแบบ SVG

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

คำอธิบายทางเลือกพื้นฐานโดยใช้แท็ก <img> (กลุ่มที่ 1)

ดีที่สุดในการแสดง

• รูปแบบที่ 2 : <img> + role="img" + alt="[words]"
• รูปแบบที่ 3 : <img> + role="img" + aria-label="[words]"

ใช้ความระมัดระวัง

• รูปแบบที่ 4 : <img> + role="img" + aria-labelledby="[ID]"

ไม่แนะนำ

• แบบที่ 1 : <img> + alt="[words]"

คำอธิบายทางเลือกพื้นฐานโดยใช้แท็ก <svg> (กลุ่มที่ 2)

ดีที่สุดในการแสดง

• รูปแบบที่ 5 : <svg> + role="img" + <title>
• รูปแบบที่ 8 : <svg> + role="img" + <title> + aria-labelledby="[ID]"

ใช้ความระมัดระวัง

• รูปแบบที่ 7 : <svg> + role="img" + <title> + aria-describedby="[ID]"

ไม่แนะนำ

• รูปแบบที่ 6 : <svg> + role="img" + <text>

คำอธิบายทางเลือกเพิ่มเติมโดยใช้แท็ก <svg> (กลุ่ม 3)

ดีที่สุดในการแสดง

• รูปแบบที่ 11 : <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"

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

ใช้ความระมัดระวัง

• รูปแบบที่ 9 : <svg> + role="img" + <title> + <text>
• รูปแบบที่ 10 : <svg> + role="img" + <title> + <desc>
• รูปแบบที่ 12 : <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"

ไม่แนะนำ

• ไม่มีรูปแบบใดในกลุ่มนี้ที่ไม่ผ่านการทดสอบอย่างสมบูรณ์

ผลการทดสอบ

ห่อ

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

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

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

หากคุณต้องการความช่วยเหลือเพิ่มเติมในการตัดสินใจเลือกรูปแบบที่จะใช้สำหรับสภาพแวดล้อมของคุณ ให้อ่านบทความ Good, Better, Best: Untangling The Complex World Of Accessible Patterns เพื่อช่วยให้คุณสำรวจผืนน้ำอันซับซ้อนของรูปแบบที่เข้าถึงได้ ด้วยข้อมูลทั้งหมดนี้และความพยายามเพียงเล็กน้อย SVG ของคุณพร้อมที่จะเข้าถึงทุกคนได้มากขึ้น

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