บทบาทของกล่องโต้ตอบและองค์ประกอบ dialog แบบเนทีฟ

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

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

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

เรียกใช้ showModal() ใน JavaScript เพื่อเปิดกล่องโต้ตอบเป็นโมดัลจริง วิธีนี้จะทำให้หน้าที่อยู่ด้านหลังไม่ทำงานและไม่สามารถเข้าถึงได้

โปรดระวัง: show() จะเปิดกล่องโต้ตอบแบบไม่ใช่โมดัล ดังนั้นหน้าด้านหลังยังคงโต้ตอบได้ หากต้องการกล่องโต้ตอบที่บล็อกหน้าไว้ ให้ใช้ showModal()

ภายใน องค์ประกอบนี้จะถูกจับคู่กับ บทบาท dialog หากจำเป็นต้องสร้างจาก div ให้ใช้ role="dialog" ซึ่งเป็นแอตทริบิวต์ที่ให้ความหมายแก่องค์ประกอบ

เมื่อกล่องโต้ตอบต้องการคำตอบ เช่น การยืนยันการลบ ให้ใช้ role="alertdialog" ซึ่งจะแจ้งเทคโนโลยีสิ่งอำนวยความสะดวกว่ากรณีนี้มีความเร่งด่วนเป็นพิเศษ

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

องค์ประกอบเนทีฟนี้มีเมธอด close() ที่สอดคล้องกัน การเรียกใช้จะปิดกล่องโต้ตอบและทำให้หน้าด้านหลังกลับมาเข้าถึงได้อีกครั้ง

กล่องโต้ตอบแบบโมดัลจะมี ฉากหลัง ให้โดยอัตโนมัติ ซึ่งคุณสามารถตกแต่งด้วยองค์ประกอบเสมือน ::backdrop ได้ ฉากหลังนี้จะทำให้หน้ามืดลงและสื่อว่าจุดโฟกัสถูกย้ายแล้ว

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

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