การสร้างโลโก้ที่สามารถเข้าถึงได้ด้วยกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้

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

ตั้งแต่ปี 1999 การใช้กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (SVGs) ได้เพิ่มขึ้น ควรแยกความแตกต่างระหว่างภาพตกแต่งและภาพที่ให้ข้อมูล หากรูปภาพมีวัตถุประสงค์เพื่อการตกแต่ง รูปภาพนั้นต้องมีแอตทริบิวต์ข้อความทางเลือกว่าง/ว่าง เนื้อหาทางเลือกที่สื่อความหมายและสื่อความหมายไม่ควรยาวเกิน 250 อักขระ และไม่ควรเกิน 800 อักขระ หากคุณใช้รูปภาพธรรมดา พื้นฐาน หรือรูปภาพตกแต่ง คุณสามารถบันทึกเป็นไฟล์ได้โดยใช้แท็ก <img> สำหรับ SVG ที่ซับซ้อนหรือจำเป็น HTML ควรมีมาร์กอัปสำหรับพวกเขา ด้วยเหตุนี้ JavaScript และ CSS จะมีตัวเลือกที่หลากหลายมากขึ้นสำหรับการแสดงสไตล์และภาพเคลื่อนไหวของรูปภาพ

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

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

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

ในทางกลับกัน JPEG, PNG และ GIF ไม่มีฟังก์ชัน HTML5 ที่ปรับขนาดได้และจะไม่สมบูรณ์แบบพิกเซลไม่ว่าจะมีความละเอียดเท่าใดก็ตาม เนื่องจากไฟล์ในรูปภาพเวกเตอร์เป็นไฟล์เวกเตอร์ จึงมักมีขนาดไฟล์ที่เล็กกว่าภาพบิตแมปมาก สามารถใช้สไตล์ CSS เพื่อสร้าง SVG แบบฝัง

ไฟล์ Svg สามารถเข้าถึงได้หรือไม่

ใช่ สามารถเข้าถึงไฟล์ SVG ได้ ไฟล์เหล่านี้เป็นไฟล์ XML ที่สามารถอ่านได้โดยโปรแกรมอ่านหน้าจอและ เครื่องมือช่วยการเข้าถึง อื่นๆ

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

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

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

ข้อความ Svg สามารถเข้าถึงได้

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

ข้อความ Svg สามารถเข้าถึงได้หรือไม่

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

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

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

การช่วยสำหรับการเข้าถึง Svg: วิธีทำให้ไอคอนของคุณสามารถเข้าถึงได้

SVG การช่วยเหลือพิเศษสามารถแทรกลงในรูปภาพได้โดยตรง ทำให้สามารถเพิ่มข้อมูลเพิ่มเติมภายในรูปภาพได้ ซึ่งช่วยผู้พิการ เช่น โปรแกรมอ่านหน้าจอ วิธีที่ดีที่สุดในการเข้าถึง ไอคอน SVG คืออะไร เมื่อสร้างโค้ด อย่าลืมใส่ *title ชื่อเรื่องควรปรากฏที่จุดเริ่มต้นของ thesvg และก่อนเส้นทางเสมอ หากต้องการแทรก aria-describedby ต้องตั้งค่า svg> เป็น คุณสามารถอ่านเกี่ยวกับแอตทริบิวต์ aria นี้ได้ในหน้าที่อธิบายถึงคำอธิบายของ Anastoevsky ในบริบทของหน้าเว็บ เป็นรูปแบบที่มนุษย์อ่านได้ซึ่งสามารถแก้ไขได้ในโปรแกรมแก้ไขข้อความ สามารถค้นหาและบีบอัดได้ สามารถสร้างและจัดการโดยอัตโนมัติ สามารถรวมเข้ากับ (X)HTML และ มันสามารถเคลื่อนไหวได้เช่นกัน

ไอคอน Svg การช่วยสำหรับการเข้าถึง

มีหลายวิธีในการทำให้ ไอคอน SVG สามารถเข้าถึงได้มากขึ้น หนึ่งคือการใช้ aria-labeledby เพื่อให้คำอธิบายของไอคอน อีกประการหนึ่งคือการใช้ role=”img” เพื่อให้ไอคอนเป็นชื่อที่โปรแกรมอ่านหน้าจอสามารถอ่านได้ อีกประการหนึ่งคือการให้ข้อความ

การเข้าถึง Inline Svg

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

การใช้ Scalable Vector Graphics (SVG) บนเว็บกำลังเป็นที่นิยมมากขึ้นเรื่อยๆ สำหรับกราฟิกที่ใช้ตกแต่งเพียงอย่างเดียว ข้อความไม่ควรแตกต่างกัน แท็ก > ทั้งหมดต้องมีแอตทริบิวต์ alt แต่ไม่จำเป็น (ไม่ต้องเว้นวรรค) ตอนนี้คุณสามารถใช้ HTML ได้โดยตรงโดยการใส่ SVG เข้าไปโดยตรง คุณอาจต้องแทนที่ role=”img” ด้วย role=”group” ใน Safari หรือ WebKit เวอร์ชันเก่า หากคุณใช้บทบาท คุณสามารถทำให้ภาพชัดเจนยิ่งขึ้นโดยการเปลี่ยนชื่อหรือคำอธิบาย ดัชนีแท็บจะเป็น 20

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

โดยทั่วไปไอคอนจะเป็นโค้ดในลักษณะนี้จากตัวสร้างไอคอน ตัวอย่าง Basic Image Replacement, Inline Script สาธิตวิธีใช้วิธีนี้ โปรแกรมอ่านหน้าจอไม่แสดงข้อความภายในแท็ก anchor เว้นแต่จะมีการทำเครื่องหมาย aria เนื่องจากมีรายละเอียดมากเกินไปในแอตทริบิวต์ alt เราสามารถใช้ข้อความแสดงแทนได้ การส่งออกเลเยอร์ใน Adobe Illustrator สามารถทำได้จากล่างขึ้นบนโดยใส่ลงใน SVG ในกรณีที่เกิดอะไรขึ้นกับ SVG ของฉัน ฉันจะเก็บทั้งสองเวอร์ชันไว้ใน CA เวอร์ชันหนึ่งสำหรับแก้ไขใน Illustrator และอีกเวอร์ชันสำหรับแก้ไขโค้ด คุณควรคอมมิตไฟล์หากคุณใช้ซอร์สคอนโทรลในรูปแบบ git-based (git, SourceTree, ect)

ก่อนแก้ไข SVG ด้วยมือ ควรรอจนกว่าจะแน่ใจ 100% ว่าการออกแบบเสร็จสมบูรณ์ ในกรณีนี้ เราจะเชื่อมโยงชื่อเรื่องและคำอธิบายกับองค์ประกอบข้อความที่สอดคล้องกัน เพื่อให้ดูเหมือนชื่อเรื่องและคำอธิบาย การสร้างบทบาทความหมาย – เพิ่มบทบาทความหมายให้กับกลุ่มที่มีแถบ ป้ายชื่อ และคีย์ หากคุณต้องการรวมกราฟแท่ง ให้เพิ่มป้ายกำกับลงในกลุ่มที่มีรายการ ตรวจสอบข้อผิดพลาด – เราจะใช้โปรแกรมอ่านหน้าจอเพื่อทดสอบ เพื่อให้แน่ใจว่าสามารถดู SVG ได้ในทุกเบราว์เซอร์ ให้ใส่ role=”group” ในโค้ด HTML เส้นเวลาหรือส่วนของเวลาสามารถกำหนดความหมายให้กับบทบาทความหมายเฉพาะในกลุ่มที่มีอยู่

โปรดเพิ่มป้ายกำกับ: ไทม์ไลน์ วิธีที่ดีที่สุดเพื่อให้แน่ใจว่า tabindex [[0]] อยู่ในโฟกัสคือการเพิ่มลงในเบราว์เซอร์ทั้งหมด ความหมายของลิงก์ควรได้รับการแก้ไข เป็นความเสี่ยงของคุณเองทั้งหมด การแสดง URL นี้ในหน้าเว็บที่ไม่ได้นำไปยังไซต์อื่นและอาจทำให้โปรแกรมอ่านหน้าจอสับสนนั้นไม่ใช่ลิงก์เชิงความหมาย เมื่อใช้ SVG คุณไม่จำเป็นต้องเลื่อนหน้าต่างเสมอไปเพื่อให้แน่ใจว่าองค์ประกอบอยู่ในวิวพอร์ต เบราว์เซอร์บางตัวดูเหมือนจะเลื่อนองค์ประกอบ HTML ทั้งหมดโดยไม่ดูองค์ประกอบย่อยที่อยู่นอกจอ เนื่องจากมีสายตาเลือนราง ผู้ที่มีสายตาเลือนรางจึงได้รับประโยชน์จากคุณสมบัตินี้ใน Windows และ High Mode Contrast

การช่วยสำหรับการเข้าถึง Svg: การเพิ่มชื่อเรื่องและ Aria-describedby

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

Svg> การช่วยการเข้าถึงแท็ก

เนื่องจากมีการใช้แท็ก svg> เพื่อสร้างกราฟิก สิ่งสำคัญคือต้องคำนึงถึงความสามารถในการเข้าถึงเมื่อใช้แท็กนี้ มีสองสามวิธีในการทำให้เนื้อหา svg> เข้าถึงได้มากขึ้น ขั้นแรก ใช้แอตทริบิวต์ชื่อเพื่อระบุคำอธิบายของกราฟิก สิ่งนี้จะถูกอ่านโดยโปรแกรมอ่านหน้าจอ ประการที่สอง ใช้แอตทริบิวต์บทบาทเพื่อให้กราฟิกมีบทบาทเฉพาะ สิ่งนี้จะถูกอ่านโดยโปรแกรมอ่านหน้าจอ สุดท้าย ใช้แอตทริบิวต์ aria-label เพื่อระบุป้ายกำกับสำหรับกราฟิก

ทำให้ Svgs ของคุณเข้าถึงได้โดยการเพิ่มชื่อเรื่อง

คุณสามารถเพิ่มการเข้าถึงไฟล์ svg ของคุณได้โดยเพิ่มชื่อ * ในการระบุว่า svg คืออะไร ให้เพิ่ม aria ที่อธิบายไว้ ตราบเท่าที่ svgs ได้รับการเข้ารหัสเพื่อให้สามารถอ่านหน้าจอได้ จะสามารถอ่านได้ หาก svg มีวัตถุประสงค์เพื่อเป็นวัตถุตกแต่ง ให้หลีกเลี่ยงการใช้ aria-hidden=true

การตกแต่งการเข้าถึง Svg

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

การเข้าถึงชื่อ Svg

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

ข้อความแสดงแทนการช่วยสำหรับการเข้าถึง Svg

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

การเพิ่ม Aria-อธิบายโดย To Svgs

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

Svg ที่เข้าถึงได้

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

Svgs สามารถรองรับข้อความแสดงแทนได้

svgs นอกจากจะรองรับ alt text แล้ว ยังรองรับอีกด้วย หากเลือกแอตทริบิวต์ alt สิ่งนี้จะปรากฏถัดจากรูปภาพหากมีการคลิกหรือหากรูปภาพถูกคลิก