สร้าง Windows Modal ที่สามารถเข้าถึงได้ด้วย A11y Dialog

Modals ได้รับการสนับสนุนอย่างกว้างขวางในเบราว์เซอร์ที่ทันสมัย พวกเขาสามารถใช้เป็น ป๊อปอัปแจ้งเตือน, เช่น เลือกในฟิลด์, หรือแม้กระทั่งสำหรับ ภาพสไลด์โชว์.

คุณสามารถสร้างหน้าต่างเหล่านี้โดยใช้ CSS บริสุทธิ์ แต่นี่ไม่ใช่ทางออกที่เข้าถึงได้มากที่สุด แต่ให้ตรวจสอบ A11y กล่องโต้ตอบ, หน้าต่างโมดัลที่ใช้งานได้อย่างเต็มที่ซึ่งให้ความสำคัญกับ การเข้าถึงก่อน.

มันวิ่งต่อไป JavaScript วานิลลา กับมัน API ที่กำหนดเองของตัวเอง และรองรับเบราว์เซอร์ที่ทันสมัยทั้งหมดในทุกอุปกรณ์ คุณสามารถตรวจสอบ การสาธิตนี้ เพื่อดูว่ามันทำงานอย่างไร.

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

โดยค่าเริ่มต้น A11y ไดอะล็อกยัง รองรับหน้าจอสัมผัส, ดังนั้นการแตะจะมีผลเหมือนกับการคลิก คุณสามารถคลิกหรือแตะที่ใดก็ได้นอกหน้าต่างเพื่อปิดหรือบนคอมพิวเตอร์ให้กดปุ่ม ESC.

อย่างใดห้องสมุดนี้ค่อนข้างเล็ก, เพียง 1.2kb, รวมถึงรหัส CSS และ JS ทั้งหมด ทำให้มีน้ำหนักเบาเหนือการเข้าถึงอย่างสมบูรณ์.

คุณสามารถเรียนรู้เพิ่มเติมโดยการอ่านผ่าน GitHub repo และ A11y Dialog มี หน้าเอกสารของตัวเอง, เกินไป. ซึ่งรวมถึงส่วนบน การติดตั้งและตั้งค่า สำหรับผู้เริ่มต้นสมบูรณ์ นอกจากนี้ยังมีส่วนยาวที่ครอบคลุม DOM API สำหรับการเพิ่มปุ่ม ไปยังเพจของคุณที่สามารถเปิด (หรือปิด) หน้าต่างโมดัล.

หากคุณกำลังพยายาม สร้างเว็บไซต์ที่เข้าถึงได้มากขึ้น พิจารณาใช้ A11y Dialog อย่างจริงจังในโครงการของคุณ คุณสามารถ รับรหัสที่มา จาก GitHub หรือดาวน์โหลดจากตัวจัดการแพคเกจเช่น npm หรือ Bower.

ดูที่หน้าหลักเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติการตั้งค่าและ JavaScript พื้นฐาน ห้องสมุดนี้มาพร้อมกับ มีมากเกินกว่าความสามารถในการเข้าถึง ARIA, ดังนั้นจึงเป็นการทดสอบที่คุ้มค่าหากคุณต้องการขยายคุณสมบัติของหน้าต่างโมดัลของคุณ.