แบบอักษรไอคอนกับข้อผิดพลาดด้านการเข้าถึง

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

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

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

แบบอักษรไอคอนมักแทรกรูปสัญลักษณ์ผ่าน องค์ประกอบเสมือนของ CSS เนื้อหาที่สร้างขึ้นเช่นนี้เปราะบางและเทคโนโลยีสิ่งอำนวยความสะดวกอาจอ่านผิดได้ง่าย

หากรูปสัญลักษณ์จากแบบอักษรไอคอนเป็นองค์ประกอบตกแต่ง ให้ครอบไว้แล้วเพิ่ม aria-hidden="true" เพื่อไม่ให้อักขระที่ไร้ความหมายเข้าสู่โครงสร้างการเข้าถึง

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

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

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

SVG แบบฝังหลีกเลี่ยงปัญหาเหล่านี้ทั้งหมด เพราะเป็นรูปภาพจริง ทนต่อการเปลี่ยนแบบอักษรและการแปล และกำหนด role กับป้ายชื่อได้อย่างเหมาะสม

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

บล็อกแบบอักษรในเครื่องมือสำหรับนักพัฒนาแล้วโหลดใหม่ หากเห็น อักขระแปลกปลอมแทนไอคอน แสดงว่าค่าทางเลือกและป้ายชื่อของคุณยังต้องปรับปรุง

รูปสัญลักษณ์จากแบบอักษรไอคอนคือข้อความที่เปราะบาง ซ่อนไอคอนตกแต่งด้วย aria-hidden ใส่ข้อความจริงกำกับไอคอนที่มีความหมาย และเลือกใช้ SVG หากเป็นไปได้ 🎯