อ่านแผนผังการเข้าถึงเพื่อแก้ไขปัญหา ARIA

เบราว์เซอร์สร้าง โครงสร้างการเข้าถึงจาก DOM ของคุณ นี่คือเวอร์ชันที่ตัดทอนแล้ว ซึ่งเป็นสิ่งที่โปรแกรมอ่านหน้าจออ่านจริง

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

ใน Chrome ให้เปิด DevTools แล้วเลือกแผง การเข้าถึงในแผง Elements เลือกโหนดใดก็ได้เพื่อตรวจสอบข้อมูลการเข้าถึงที่คำนวณแล้ว

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

Firefox มี ตัวตรวจสอบการเข้าถึงเป็นแท็บหนึ่งของ DevTools พร้อมเครื่องมือตรวจสอบปัญหาคอนทราสต์และการตั้งชื่อที่พบบ่อย

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

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

ลองสลับวิดเจ็ตแล้วดูโครงสร้าง หาก aria-expanded ไม่เปลี่ยนค่าในแผง แสดงว่า JavaScript ของคุณไม่ได้ทำให้สถานะสอดคล้องกัน

องค์ประกอบที่ตั้งค่าเป็น aria-hidden จะหายไปจากโครงสร้างทั้งหมด ใช้สิ่งนี้เพื่อยืนยันว่าเนื้อหาตกแต่งถูกข้ามอย่างถูกต้อง

โครงสร้างแสดงเจตนา แต่ โปรแกรมอ่านหน้าจอจริงแสดงประสบการณ์การใช้งาน ใช้โครงสร้างเพื่อแก้ไขข้อผิดพลาด แล้วตรวจสอบยืนยันด้วย NVDA หรือ VoiceOver

ฝึกให้เป็นนิสัย: เปลี่ยนมาร์กอัป เลือกโหนดใหม่ แล้วอ่านชื่อ บทบาท และสถานะ วงจรสั้น ๆ ช่วยจับข้อผิดพลาดของ ARIA ได้รวดเร็ว

ปุ่มแบบกำหนดเองของคุณอ่านได้เพียงคำว่าปุ่มโดยไม่มีป้ายกำกับ คุณจะยืนยันชื่อที่หายไปได้ที่ใด

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