กักโฟกัสไว้ภายในโมดัล
ป้องกันไม่ให้ Tab หลุดไปยังหน้าที่อยู่ด้านหลัง
กักโฟกัสไว้ภายในโมดัล เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดโฟกัสต้องอยู่ภายใน
ขณะที่โมดัลเปิดอยู่ โฟกัส ของแป้นพิมพ์ควรอยู่ภายในโมดัล หาก Tab หลุดไปยังหน้าด้านหลัง ผู้ใช้ที่มองไม่เห็นจะหลงทางในเนื้อหาที่ตนมองไม่เห็น
องค์ประกอบเนทีฟช่วยได้
dialog จริงที่เปิดด้วย showModal() จะกักโฟกัสให้คุณโดยอัตโนมัติ นี่เป็นเหตุผลสำคัญประการหนึ่งที่ควรเลือกใช้แทน div
เมื่อคุณสร้างขึ้นเอง
หากคุณสร้างโมดัลแบบกำหนดเองด้วย div คุณต้อง กักโฟกัส เอง เพราะไม่มีสิ่งใดหยุดไม่ให้ Tab หลุดไปยังหน้าเว็บ
ย้ายโฟกัสเข้าไปเมื่อเปิด
ขั้นแรก ให้ส่งโฟกัส เข้าไปใน โมดัลเมื่อเปิดขึ้นมา โดยปกติจะส่งไปยังตัวควบคุมแรกหรือหัวข้อ เพื่อให้ผู้ใช้เริ่มต้นในตำแหน่งที่เหมาะสม
modal.querySelector('button').focus();ค้นหาองค์ประกอบที่รับโฟกัสได้
รวบรวมรายการที่ รับโฟกัสได้ ในโมดัล ได้แก่ ลิงก์ ปุ่ม ช่องป้อนข้อมูล และทุกอย่างที่มี tabindex คุณต้องมีรายการแรกและรายการสุดท้ายเพื่อสร้างลูป
modal.querySelectorAll('a, button, input, [tabindex]');วนจากรายการสุดท้ายกลับไปแรก
เมื่อกด Tab บนองค์ประกอบ สุดท้าย ให้ส่งโฟกัสกลับไปยังองค์ประกอบแรก วิธีนี้จะวนผู้ใช้กลับมาแทนที่จะปล่อยให้ออกจากโมดัล
if (e.key==='Tab' && !e.shiftKey && active===last){
e.preventDefault(); first.focus();
}วนจากรายการแรกไปสุดท้าย
จัดการ Shift+Tab บนองค์ประกอบแรกด้วย โดยส่งโฟกัสไปยังรายการสุดท้าย เพื่อให้การกด Tab ย้อนกลับยังคงถูกกักไว้
if (e.key==='Tab' && e.shiftKey && active===first){
e.preventDefault(); last.focus();
}ป้องกันการทำงานเริ่มต้นของ Tab
ที่ขอบของลูป คุณต้องเรียกใช้ preventDefault() มิฉะนั้นเบราว์เซอร์จะย้ายโฟกัสออกไปก่อนที่โค้ดของคุณจะเปลี่ยนเส้นทางได้
e.preventDefault();ระวังรายการที่ปิดใช้งานหรือซ่อนอยู่
ข้ามองค์ประกอบที่ ปิดใช้งาน หรือซ่อนอยู่เมื่อเลือกรายการแรกและรายการสุดท้าย เนื่องจากองค์ประกอบเหล่านี้ไม่สามารถรับโฟกัสได้จริง
อย่าลืมพื้นหลัง
การกักโฟกัสต้องทำควบคู่กับการทำให้หน้าด้านหลัง ไม่ทำงาน เพื่อไม่ให้แม้แต่การคลิกโดยไม่ตั้งใจหรือโปรแกรมอ่านหน้าจอเข้าถึงได้ขณะโมดัลเปิดอยู่
ทดสอบด้วยแป้นพิมพ์
กด Tab ไปทั่วทั้งโมดัลและดูวงแหวน โฟกัส วนรอบโดยไม่หลุดออกไป การวนครบรอบนี้เป็นหลักฐานว่าการกักโฟกัสทำงาน ✅
ตรวจสอบอย่างรวดเร็ว
คุณสร้างโมดัลด้วย div แบบกำหนดเองแล้ว ต้องทำอย่างไรเพื่อให้ Tab อยู่ภายในโมดัล
สรุป: กักโฟกัสไว้ภายใน
คุณได้เรียนรู้ให้ย้ายโฟกัสเข้าไปเมื่อเปิด และวนโฟกัสที่ขอบทั้งสองด้าน เพื่อให้ผู้ใช้แป้นพิมพ์อยู่ในโมดัลจนกว่าจะเลือกปิด 🎯
คำถามที่พบบ่อย
บทเรียน “กักโฟกัสไว้ภายในโมดัล” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “กักโฟกัสไว้ภายในโมดัล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Web Accessibility Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “กักโฟกัสไว้ภายในโมดัล”
ป้องกันไม่ให้ Tab หลุดไปยังหน้าที่อยู่ด้านหลัง คุณปฏิบัติ Web Accessibility Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Web Accessibility Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Web Accessibility Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “กักโฟกัสไว้ภายในโมดัล” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม
ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- บทบาทของกล่องโต้ตอบและองค์ประกอบ dialog แบบเนทีฟ
- กักโฟกัสไว้ภายในโมดัล
- กด Escape เพื่อปิดและคืนโฟกัส
- พื้นหลังที่หยุดนิ่งและ aria-modal