แอตทริบิวต์ inert เป็นแอตทริบิวต์ HTML ระดับสากลที่ลดความซับซ้อนของวิธีนําเหตุการณ์อินพุตของผู้ใช้สําหรับองค์ประกอบออกและกู้คืน รวมถึงเหตุการณ์โฟกัสและเหตุการณ์จากเทคโนโลยีความช่วยเหลือพิเศษ
เฉื่อยเป็นลักษณะการทำงานเริ่มต้นในองค์ประกอบ dialog เช่น เมื่อคุณใช้ showModal เพื่อเปิดกล่องโต้ตอบเพื่อให้ผู้ใช้เลือกรายการ แล้วปิดกล่องโต้ตอบออกจากหน้าจอ
หลังจากเปิด <dialog> ส่วนที่เหลือของหน้าจะใช้งานไม่ได้ เช่น คุณจะคลิกหรือกด Tab ไปยังลิงก์ไม่ได้อีกต่อไป
คุณใช้แอตทริบิวต์ inert เพื่อให้องค์ประกอบอื่นๆ ทำงานในลักษณะเดียวกันได้
ไม่มีการเคลื่อนไหวหมายความว่าไม่มีความสามารถในการเคลื่อนไหว ดังนั้นเมื่อคุณทําเครื่องหมายว่าไม่มีการเคลื่อนไหว แสดงว่าคุณนําการเคลื่อนไหวหรือการโต้ตอบออกจากองค์ประกอบ DOM เหล่านั้น
<div>
<label for="button1">Button 1</label>
<button id="button1">I am not inert</button>
</div>
<div inert>
<label for="button2">Button 2</label>
<button id="button2">I am inert</button>
</div>
ในที่นี้ มีการประกาศ inert ในองค์ประกอบ <div> ลำดับที่ 2 ซึ่งมี button2 อยู่
ดังนั้นเนื้อหาทั้งหมดที่อยู่ใน <div> นี้ รวมถึงปุ่มและป้ายกำกับจะไม่ได้รับโฟกัสหรือคลิกไม่ได้
แอตทริบิวต์ inert มีประโยชน์อย่างยิ่งสำหรับการช่วยเหลือพิเศษ โดยเฉพาะเพื่อป้องกันการกักเก็บโฟกัส
การช่วยเหลือพิเศษที่ดียิ่งขึ้น
หลักเกณฑ์การพัฒนาเนื้อหาเว็บที่ทุกคนสามารถเข้าถึงได้ง่ายกำหนดให้มีการจัดการโฟกัสและลําดับโฟกัสที่ใช้งานได้และสมเหตุสมผล ซึ่งรวมถึงการค้นพบและการโต้ตอบ ก่อนหน้านี้ คุณสามารถซ่อนระดับการค้นพบได้ด้วย aria-hidden="true" แต่การโต้ตอบทำได้ยากกว่า
inert ช่วยให้นักพัฒนาแอปนำองค์ประกอบออกจากลําดับแท็บและออกจากลําดับความเกี่ยวข้องได้ ซึ่งจะช่วยให้คุณควบคุมทั้งความสามารถในการค้นพบและการโต้ตอบได้ รวมถึงสร้างรูปแบบที่ใช้งานได้และเข้าถึงได้มากขึ้น
กรณีการใช้งานหลักๆ 2 กรณีในการใช้ inert กับองค์ประกอบเพื่อเพิ่มการช่วยเหลือพิเศษมีดังนี้
- เมื่อองค์ประกอบเป็นส่วนหนึ่งของต้นไม้ DOM แต่อยู่นอกหน้าจอหรือซ่อนอยู่
- เมื่อองค์ประกอบหนึ่งเป็นส่วนหนึ่งของแผนผัง DOM แต่ไม่ควรมีการโต้ตอบ
องค์ประกอบ DOM ที่อยู่นอกหน้าจอหรือซ่อนอยู่
ข้อกังวลด้านการช่วยเหลือพิเศษที่พบบ่อยอย่างหนึ่งคือองค์ประกอบอย่างลิ้นชัก ซึ่งจะเพิ่มองค์ประกอบลงใน DOM ที่ผู้ใช้มองไม่เห็นเสมอไป
inert ช่วยให้มั่นใจได้ว่าผู้ใช้แป้นพิมพ์จะไม่โต้ตอบกับองค์ประกอบย่อยของลิ้นชักโดยไม่ตั้งใจขณะที่องค์ประกอบย่อยดังกล่าวอยู่นอกหน้าจอ
องค์ประกอบ DOM ที่ไม่ได้โต้ตอบ
ข้อกังวลอื่นๆ ที่พบบ่อยเกี่ยวกับความสามารถเข้าถึงได้ง่ายคือเมื่อการออกแบบ UI มองเห็นได้หรือมองเห็นได้บางส่วน แต่ไม่มีการโต้ตอบอย่างชัดเจน ตัวอย่างเช่น ในระหว่างการโหลดหน้าเว็บ ขณะส่งแบบฟอร์ม หรือหากมีการเปิดกล่องโต้ตอบซ้อนทับอยู่
ระบุสถานะของ UI และ "ตรึง" โฟกัสไว้ที่ส่วนต่างๆ ของหน้าเว็บที่มีการโต้ตอบเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดีที่สุด
การล็อกโฟกัส
การล็อกโฟกัสเป็นแนวคิดหลักของการช่วยเหลือพิเศษที่ยอดเยี่ยมสำหรับ UI คุณควรตรวจสอบว่าโฟกัสของโปรแกรมอ่านหน้าจออยู่ในองค์ประกอบ UI แบบอินเทอร์แอกทีฟ และระวังเมื่อองค์ประกอบบล็อกการโต้ตอบ การตั้งค่านี้ยังช่วยจำกัดโปรแกรมอ่านหน้าจอที่หลอกลวงไม่ให้เข้าถึงด้านหลังการวางซ้อนหน้าเว็บ หรือการส่งแบบฟอร์มโดยไม่ตั้งใจขณะที่การส่งครั้งแรกยังดำเนินการอยู่
เมื่อใช้ inert คุณจะมั่นใจได้ว่ามีเพียงเนื้อหาที่ค้นพบได้เท่านั้นที่เข้าถึงได้ ซึ่งมีประโยชน์ในกรณีต่อไปนี้
- การบล็อกองค์ประกอบ เช่น กล่องโต้ตอบแบบโมดัล เมนูที่กักเก็บโฟกัส หรือการนำทางด้านข้าง
- ภาพสไลด์ที่มีรายการที่ไม่ได้ใช้งาน
- เนื้อหาแบบฟอร์มที่ไม่เกี่ยวข้อง (เช่น การทำให้ช่อง "ที่อยู่สำหรับจัดส่ง" จางลงและปิดใช้เมื่อเลือกช่องทำเครื่องหมาย "เหมือนกับที่อยู่สำหรับการเรียกเก็บเงิน")
- การปิดใช้ UI ทั้งหมดขณะอยู่ในสถานะที่ไม่สอดคล้องกัน
ระบุองค์ประกอบ inert ให้เห็น
โดยค่าเริ่มต้น จะไม่มีตัวบ่งชี้ที่เป็นภาพว่าซับต้นไม้ไม่มีการใช้งาน เราขอแนะนำให้คุณทําเครื่องหมายให้ชัดเจนว่าส่วนใดของ DOM ที่ใช้งานอยู่และส่วนใดไม่ใช้งาน
[inert], [inert] * {
opacity: 0.5;
pointer-events: none;
cursor: default;
user-select: none;
}
ผู้ใช้บางรายอาจไม่เห็นส่วนต่างๆ ของหน้าเว็บพร้อมกัน เช่น ผู้ใช้โปรแกรมอ่านหน้าจอ อุปกรณ์ขนาดเล็ก หรือผู้ใช้ที่มีแว่นขยาย และแม้แต่ผู้ใช้ที่ใช้หน้าต่างขนาดเล็กเป็นพิเศษอาจไม่เห็นส่วนที่มีการใช้งานของหน้าเว็บ และอาจหงุดหงิดหากส่วนที่ไม่มีการใช้งานไม่ชัดเจน สําหรับตัวควบคุมแต่ละรายการ แอตทริบิวต์ "ปิดใช้" อาจเหมาะสมกว่า
การโต้ตอบและการเคลื่อนไหวใดบ้างที่ถูกบล็อก
โดยค่าเริ่มต้น inert จะบล็อกเหตุการณ์โฟกัสและการคลิก สำหรับเทคโนโลยีความช่วยเหลือพิเศษ การตั้งค่านี้จะบล็อกการแท็บและการค้นพบได้ด้วย เบราว์เซอร์อาจไม่สนใจการค้นหาหน้าเว็บและการเลือกข้อความในองค์ประกอบ
ค่าเริ่มต้นของ inert คือ false