ซ่อนไอคอนตกแต่งด้วย aria-hidden
นำองค์ประกอบตกแต่งออกจากแผนผังการเข้าถึง
ซ่อนไอคอนตกแต่งด้วย aria-hidden เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
ไอคอนบางอย่างไม่ได้สื่อความหมาย
ลวดลายเล็ก ๆ ข้างป้ายข้อความไม่ได้เพิ่มข้อมูลให้ผู้ใช้โปรแกรมอ่านหน้าจอ การประกาศไอคอนนั้นมีแต่จะเพิ่ม เสียงรบกวนที่ผู้ใช้ต้องฝ่าฟัน 🔇
คำว่าตกแต่ง
ไอคอนเป็น องค์ประกอบตกแต่งเมื่อการนำออกไม่เปลี่ยนสิ่งที่ผู้ใช้เข้าใจ เพราะข้อความข้างเคียงมีความหมายครบถ้วนอยู่แล้ว
ซ่อนไอคอนจากโครงสร้าง
กำหนด aria-hidden="true" ให้ไอคอนตกแต่ง เพื่อนำไอคอนออกจากโครงสร้างการเข้าถึงและให้โปรแกรมอ่านหน้าจอข้ามไปทั้งหมด
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save
</button>ซ่อนลูกทั้งหมดด้วย
aria-hidden="true" เพียงหนึ่งรายการบนตัวครอบจะซ่อนทั้งองค์ประกอบและทุกสิ่งที่อยู่ภายใน ดังนั้นให้กำหนดที่ตัวครอบ ไม่ใช่ทุก path
alt ว่างทำหน้าที่เดียวกันสำหรับ img
หากไอคอนตกแต่งเป็น <img> ให้กำหนด alt เป็นค่าว่างแทน alt ว่างจะบอกโปรแกรมอ่านหน้าจอให้ข้ามรูปภาพ
<img src="sparkle.png" alt="" />อย่าซ่อนเนื้อหาที่มองเห็น
กฎสำคัญคือ อย่าใส่ aria-hidden ให้สิ่งที่ผู้ใช้สายตาต้องพึ่งพา เพราะจะเป็นการลบเนื้อหาจริงสำหรับผู้ใช้บางกลุ่ม
อย่าซ่อนสิ่งที่รับโฟกัสได้
การใส่ aria-hidden ให้แก่องค์ประกอบที่รับโฟกัสได้จะสร้างองค์ประกอบล่องหน ผู้ใช้แป้นพิมพ์ไปถึงตัวควบคุม แต่โปรแกรมอ่านหน้าจอปฏิเสธที่จะ ประกาศมัน
ใช้คู่กับ focusable false
สำหรับ SVG แบบฝังที่ใช้ตกแต่ง ให้เพิ่ม focusable="false" ร่วมกับ aria-hidden เพื่อไม่ให้เบราว์เซอร์ใดแอบใส่เข้าไปในลำดับ Tab
<svg aria-hidden="true" focusable="false">
<path d="..." />
</svg>ไอคอนซ้ำซ้อนเป็นองค์ประกอบตกแต่ง
ไอคอนถังขยะที่อยู่ข้างคำว่า Delete เป็นสิ่ง ซ้ำซ้อน ให้ซ่อนไอคอนและปล่อยให้ข้อความที่มองเห็นสื่อสารกับทุกคน
ระวังไอคอนเดี่ยว
โปรดระวัง ไอคอนที่ไม่มีข้อความอยู่ใกล้เคียงมัก ไม่ใช่องค์ประกอบตกแต่ง การซ่อนไอคอนจะทำให้ตัวควบคุมนั้นไม่มีชื่อและไม่สื่อสาร
ยืนยันว่าถูกนำออกแล้ว
ในเครื่องมือตรวจสอบการเข้าถึง ไอคอนที่ซ่อนได้อย่างถูกต้องจะ หายไปจากโครงสร้าง จุดว่างนั้นคือสิ่งที่คุณต้องการ
ตรวจสอบอย่างรวดเร็ว
ไอคอนเครื่องหมายถูกอยู่ติดกับคำว่า Complete ที่มองเห็นได้ คุณควรทำอย่างไรกับไอคอนนี้
ทบทวน: ซ่อนเสียงรบกวน
ไอคอนตกแต่งควรใช้ aria-hidden="true" (หรือ alt ว่าง) และ focusable false แต่ห้ามใช้กับเนื้อหาที่รับโฟกัสได้หรือเนื้อหาที่มีความหมายเฉพาะ ลดเสียงรบกวนและทำให้หน้าเว็บชัดเจนขึ้น 🎯
คำถามที่พบบ่อย
บทเรียน “ซ่อนไอคอนตกแต่งด้วย aria-hidden” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ซ่อนไอคอนตกแต่งด้วย aria-hidden” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Web Accessibility Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ซ่อนไอคอนตกแต่งด้วย aria-hidden”
นำองค์ประกอบตกแต่งออกจากแผนผังการเข้าถึง คุณปฏิบัติ Web Accessibility Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Web Accessibility Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Web Accessibility Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “ซ่อนไอคอนตกแต่งด้วย aria-hidden” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม
ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- SVG ในบรรทัดเดียว: role img และ title
- ซ่อนไอคอนตกแต่งด้วย aria-hidden
- ปุ่มไอคอนที่ยังมีชื่อ
- แบบอักษรไอคอนกับข้อผิดพลาดด้านการเข้าถึง