แอตทริบิวต์ inert เป็นแอตทริบิวต์ HTML ส่วนกลางที่ช่วยลดความซับซ้อนในวิธีนำออกและกู้คืนเหตุการณ์อินพุตของผู้ใช้สำหรับองค์ประกอบ ซึ่งรวมถึงกิจกรรมโฟกัสและเหตุการณ์จากเทคโนโลยีความช่วยเหลือพิเศษ
ความเฉื่อยเป็นลักษณะการทำงานเริ่มต้นในองค์ประกอบกล่องโต้ตอบ เช่น เมื่อคุณใช้ 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 ช่วยให้นักพัฒนาซอฟต์แวร์นำองค์ประกอบออกจากลำดับแท็บและจากแผนผังการช่วยเหลือพิเศษได้ วิธีนี้ช่วยให้คุณสามารถควบคุมทั้งการค้นพบได้และการโต้ตอบ และทำให้สามารถสร้างรูปแบบที่ใช้งานได้และเข้าถึงได้มากขึ้น
การใช้ inert กับองค์ประกอบเพื่อทําให้การช่วยเหลือพิเศษดีขึ้นมี 2 กรณีหลักๆ ดังนี้
- เมื่อองค์ประกอบเป็นส่วนหนึ่งของแผนผัง 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