พื้นหลังที่หยุดนิ่งและ aria-modal

แม้จะกักโฟกัสไว้ แต่เนื้อหาที่อยู่ ด้านหลัง โมดัลก็ยังอยู่ใน DOM โปรแกรมอ่านหน้าจออาจเข้าไปอ่านได้หากคุณไม่ป้องกัน

แอตทริบิวต์ inert ทำให้องค์ประกอบและองค์ประกอบลูกทั้งหมดไม่รับโฟกัส คลิกไม่ได้ และถูกข้ามโดยเทคโนโลยีสิ่งอำนวยความสะดวกในครั้งเดียว

เมื่อโมดัลเปิด ให้เพิ่ม inert ให้ทุกอย่างที่อยู่นอกโมดัล ตอนนี้จะไม่มีใครเข้าถึงหน้าด้านหลังได้จริง

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

dialog แบบเนทีฟที่เปิดด้วย showModal() จะทำให้ส่วนที่เหลือของหน้าไม่ทำงานโดยอัตโนมัติ คุณจึงได้รับการป้องกันนี้โดยไม่ต้องเขียนโค้ดเพิ่มเติม

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

โปรดระวัง: aria-modal เพียงแจ้งข้อมูลแก่โปรแกรมอ่านหน้าจอเท่านั้น ไม่ได้บล็อกโฟกัสหรือการคลิกจริง ๆ ดังนั้นคุณยังต้องใช้ inert

รูปแบบที่รัดกุมจะใช้ inert กับพื้นหลังร่วมกับ aria-modal บนกล่องโต้ตอบ อย่างหนึ่งบังคับใช้ขอบเขต อีกอย่างประกาศขอบเขตนั้น

ก่อนที่ inert จะได้รับการรองรับอย่างแพร่หลาย นักพัฒนาจะใส่ aria-hidden ให้พื้นหลัง วิธีนี้ซ่อนเนื้อหาจากโปรแกรมอ่าน แต่ไม่ได้หยุดโฟกัสของแป้นพิมพ์

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

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

คุณได้เรียนรู้ให้ทำหน้าด้านหลังเป็น inert และประกาศ aria-modal เพื่อให้โมดัลเป็นสิ่งเดียวที่ผู้ใช้เข้าถึงได้จริง 🎯