ต้นไม้การเข้าถึง: โปรแกรมอ่านหน้าจอได้ยินอะไร

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

ต้นไม้การเข้าถึงสร้างขึ้นโดยตรงจาก HTML ของคุณ เมื่อมีความหมายเชิงโครงสร้างที่ดี ก็ได้ต้นไม้ที่สมบูรณ์ แต่เมื่อมี div soup ก็ได้ต้นไม้ที่ว่างเปล่าและไร้ประโยชน์

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

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

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

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

สิ่งใดก็ตามที่ซ่อนด้วย display none หรือ aria-hiddenจะถูกตัดออกจากต้นไม้ หากไม่อยู่ในต้นไม้ โปรแกรมอ่านหน้าจอก็เข้าถึงไม่ได้

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

div ที่คลิกได้จะปรากฏในต้นไม้เป็นโหนดทั่วไปที่ไม่มีบทบาทและชื่อ ผู้ใช้จึงไม่ได้ยินข้อมูลที่มีประโยชน์ แม้จะดูเหมือนปุ่มก็ตาม

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

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

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