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

Emma Twersky

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

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

ค่าเริ่มต้นของ inert คือ false