แอตทริบิวต์เฉื่อย

Emma Twersky

แอตทริบิวต์ inert เป็นแอตทริบิวต์ HTML ร่วมที่ช่วยลดความซับซ้อนของวิธีนำออกและกู้คืนเหตุการณ์การป้อนข้อมูลของผู้ใช้สำหรับองค์ประกอบหนึ่งๆ ซึ่งรวมถึงกิจกรรมโฟกัสและเหตุการณ์จากเทคโนโลยีความช่วยเหลือพิเศษ

เฉื่อยคือลักษณะการทำงานเริ่มต้นในองค์ประกอบกล่องโต้ตอบ เช่น เมื่อคุณใช้ showModal เพื่อเปิดกล่องโต้ตอบให้ผู้ใช้เลือก จากนั้นปิดกล่องโต้ตอบจากหน้าจอ หลังจากเปิด <dialog> ส่วนที่เหลือของหน้าจะเฉื่อยขึ้น เช่น คุณจะไม่สามารถคลิกหรือกด Tab ไปยังลิงก์ต่างๆ ได้อีกต่อไป

คุณสามารถใช้แอตทริบิวต์ inert เพื่อให้องค์ประกอบอื่นๆ มีลักษณะการทำงานแบบเดียวกัน

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