ไขปมคำเตือน Blocked aria-hidden และวิธีแก้โค้ดโมดัลที่ถูกต้อง

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

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

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

ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง

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