จดจ่อ

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

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

อย่าเปลี่ยนลำดับแท็บที่เห็นและตามจริงด้วย CSS และ HTML ตามตัวอย่าง 2 ข้อต่อไปนี้ ลำดับแท็บ ที่แตกต่างจากลำดับที่คาดหวังไว้ จะสร้างความสับสนให้กับผู้ใช้และส่งผลเสียต่อประสบการณ์ของผู้ใช้

ในตัวอย่างนี้ ค่าของแอตทริบิวต์ tabindex ทำให้ลำดับแท็บวุ่นวาย:

ในตัวอย่างนี้ CSS ได้สร้างความแตกต่างระหว่างลำดับแท็บและลำดับการแสดงภาพของเนื้อหา

การประกาศ flex-flow: row-reverse; ได้กลับลำดับภาพ นอกจากนี้ยังมีการใช้คุณสมบัติ order ของ CSS กับคำที่ 6 ซึ่งก็คือ "This" ซึ่งย้ายภาพที่เห็น คำเดียว ลำดับแท็บคือลำดับของโค้ดซึ่งไม่ตรงกับลำดับภาพอีกต่อไป เกิดการยกเลิกการเชื่อมต่อ สำหรับผู้ใช้แป้นพิมพ์

การทำให้องค์ประกอบเฉื่อยเป็นแบบอินเทอร์แอกทีฟ

แอตทริบิวต์ contenteditable และ tabindex ซึ่งเป็นแอตทริบิวต์ส่วนกลางสามารถเพิ่มไปยังองค์ประกอบใดก็ได้ ทำให้โฟกัสได้ ในกระบวนการนี้ องค์ประกอบที่โฟกัสได้ยังสามารถโฟกัสโดยใช้เมาส์หรือเคอร์เซอร์ได้โดยใช้autofocus หรือตามสคริปต์ เช่น element.focus()

แอตทริบิวต์ tabindex

แอตทริบิวต์ tabindex ส่วนกลางที่เปิดตัวใน แอตทริบิวต์ จะเปิดใช้องค์ประกอบที่อาจไม่ได้รับโฟกัส โดยปกติมักมีแป้น Tab จึงจะเป็นชื่อ

แอตทริบิวต์ tabindex จะนำค่าเป็นจำนวนเต็ม ค่าลบจะทำให้โฟกัสองค์ประกอบได้ แต่เข้าถึงแท็บไม่ได้ ต ค่า tabindex ของ 0 ทําให้องค์ประกอบโฟกัสได้และเป็นแบบ Tab ได้ เป็นการเพิ่มองค์ประกอบที่จะใช้กับลําดับ โฟกัสการไปยังส่วนต่างๆ ตามลำดับซอร์สโค้ด ค่าที่เท่ากับ 1 ขึ้นไปจะทำให้องค์ประกอบที่โฟกัสได้และกด Tab ได้ แต่การเพิ่มไว้ในลำดับแท็บที่มีลำดับความสำคัญ และควรหลีกเลี่ยง อย่างที่เราเห็นด้านบน

ในหน้านี้ ปุ่มแชร์ <share-action> เป็นองค์ประกอบที่กำหนดเอง tabindex="0" เพิ่มการโฟกัสไม่ได้นี้ตามปกติ ลงในลำดับการแท็บเริ่มต้นของแป้นพิมพ์:

<share-action authors="@front-end.social/@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, mastodon" role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

มีองค์ประกอบที่กำหนดเองอีก 1 รายการในหน้านี้: การนำทางในท้องถิ่นมี ที่มีค่า tabindex เป็นลบ:

<web-navigation-drawer type="standard" tabindex="-1">

แอตทริบิวต์ tabindex ที่มีค่าลบจะทำให้โฟกัสองค์ประกอบได้แต่กด Tab ไม่ได้ องค์ประกอบสามารถรับ เช่น ผ่าน HTMLElement.focus() แต่ไม่ได้เป็นส่วนหนึ่ง ของคำสั่งการนำทางโฟกัสตามลำดับ กฎเกณฑ์สำหรับองค์ประกอบที่โฟกัสไม่ได้และไม่สามารถใช้แท็บได้คือการใช้ tabindex="-1" โปรดทราบว่า ถ้าคุณเพิ่ม tabindex="-1" ลงในองค์ประกอบแบบอินเทอร์แอกทีฟ องค์ประกอบนั้นจะเป็นแบบแท็บไม่ได้อีกต่อไป

เมธอด element.focus() สามารถใช้เพื่อตั้งโฟกัสเป็น องค์ประกอบที่โฟกัสได้ โปรดทราบว่าเบราว์เซอร์จะเลื่อนองค์ประกอบที่โฟกัสเข้ามาในมุมมอง ด้วยเหตุนี้ โปรดหลีกเลี่ยงการใช้ element.focus({preventScroll:true}) เนื่องจากการโฟกัสที่องค์ประกอบที่มองไม่เห็นจะทำให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ไม่ดี

หากต้องการค้นหาเอกสารเพื่อดูว่าองค์ประกอบใดที่โฟกัสอยู่ในปัจจุบัน ให้ใช้พร็อพเพอร์ตี้ Document.activeElement แบบอ่านอย่างเดียว

องค์ประกอบที่มี tabindex เป็น 1 ขึ้นไปจะรวมอยู่ในลำดับแท็บที่แยกต่างหาก คุณจะสังเกตได้จากใน Codepen การจัดแท็บจะเริ่มในลำดับที่แยกต่างหาก โดยเรียงจากค่าต่ำสุดไปค่าสูงสุด ก่อนจะไปยังลำดับต่างๆ ในลำดับปกติ (ไม่ได้ตั้งค่า tabindex หรือ tabindex="0") ในลำดับแหล่งที่มา:

tabindex ที่มีค่าบวกจะทำให้องค์ประกอบอยู่ในลำดับการโฟกัสที่มีลำดับความสำคัญสูง ซึ่งอาจทำให้การเรียงลำดับที่โฟกัสวุ่นวายได้ หลีกเลี่ยงการแก้ไขลำดับ DOM ด้วย tabindex นอกจากจะแก้ไขลำดับแท็บที่แก้ไขได้แล้ว ยังสร้างผู้ใช้ที่ไม่ดีได้ด้วย นักพัฒนาซอฟต์แวร์จึงจัดการและดูแลรักษาได้ยาก

แอตทริบิวต์ contenteditable

เราได้พูดถึงแอตทริบิวต์ contenteditable ไว้ก่อนหน้านี้ การตั้งค่า contenteditable="true" ในองค์ประกอบใดก็ตามจะทำให้แก้ไขได้ โฟกัสได้ และเป็นส่วนหนึ่งของลำดับแท็บ ลักษณะการทำงานของการโฟกัสจะคล้ายกับการตั้งค่า tabindex="0" แต่ไม่เหมือนกัน ซ้อนอยู่ เอลิเมนต์ contenteditable โฟกัสได้ แต่แตะ Tab ไม่ได้ หากต้องการทำให้องค์ประกอบ contenteditable ที่ฝังไว้ใช้แท็บได้ ให้เพิ่ม tabindex="0" ซึ่งจะเพิ่มไปยังลำดับการโฟกัสการไปยังส่วนต่างๆ

ให้ความสำคัญกับองค์ประกอบแบบอินเทอร์แอกทีฟ

แอตทริบิวต์ autofocus

แม้ว่าบูลีน autofocus เป็นแอตทริบิวต์ร่วม ที่ตั้งค่าในองค์ประกอบใดก็ได้ องค์ประกอบที่ไม่เฉื่อยจะโต้ตอบไม่ได้ เมื่อหน้าเว็บโหลดขึ้น องค์ประกอบที่โฟกัสได้รายการแรก ที่มีชุดแอตทริบิวต์ autofocus จะได้รับโฟกัส ตราบใดที่มีการแสดงองค์ประกอบนั้นและไม่ได้ฝังอยู่ใน <dialog>

การตั้งค่าโฟกัสที่เนื้อหาโดยอัตโนมัติอาจสร้างความสับสน การตั้งค่า autofocus ในตัวควบคุมแบบฟอร์มหมายความว่าตัวควบคุมแบบฟอร์ม จะเลื่อนเข้ามาในมุมมองเมื่อโหลดหน้าเว็บ ผู้ใช้ทุกคน รวมถึงผู้ใช้โปรแกรมอ่านหน้าจอและผู้ใช้ที่มีวิวพอร์ตขนาดเล็กจะไม่สามารถ "ดู" คำแนะนำสำหรับแบบฟอร์ม โดยอาจเลื่อนผ่านป้ายกำกับที่ปรากฏตามปกติของตัวควบคุมแบบฟอร์ม autofocus ไม่เปลี่ยนลำดับการไปยังโฟกัสตามลำดับของเอกสาร องค์ประกอบในลำดับที่อยู่ก่อนแท็ก ระบบจะข้ามเอลิเมนต์ที่โฟกัสอัตโนมัติ เราจึงขอแนะนำให้ระบุแอตทริบิวต์ autofocus ด้วยด้วยเหตุผลเหล่านี้

ข้อยกเว้นสำหรับ "ไม่ใช้ autofocus" คำแนะนำมีการรวมแอตทริบิวต์ autofocus ภายในองค์ประกอบ <dialog> เมื่อกล่องโต้ตอบเปิดขึ้น เบราว์เซอร์จะโฟกัสไปที่องค์ประกอบแบบอินเทอร์แอกทีฟที่โฟกัสได้รายการแรกภายใน <dialog> โดยอัตโนมัติ ซึ่งหมายความว่าไม่จำเป็นต้องใส่ autofocus ลงในเอลิเมนต์ ถ้าคุณต้องการให้แน่ใจว่าองค์ประกอบแบบอินเทอร์แอกทีฟที่เฉพาะเจาะจงภายในกล่องโต้ตอบจะได้รับ โฟกัสเมื่อกล่องโต้ตอบเปิดขึ้น ให้เพิ่มแอตทริบิวต์ autofocus ลงในองค์ประกอบนั้น

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

แอตทริบิวต์ autofocus ที่ตั้งค่าเป็นปิด <button> จะทำให้ได้รับโฟกัสเมื่อกล่องโต้ตอบเปิดขึ้น เป็นองค์ประกอบแรก ในกล่องโต้ตอบ นั่นก็จะได้รับโฟกัสไม่ว่าในกรณีใดก็ตาม โดยค่าเริ่มต้น เมื่อเปิดกล่องโต้ตอบ องค์ประกอบที่โฟกัสได้เป็นอันดับแรกภายใน กล่องโต้ตอบจะได้รับโฟกัสเว้นแต่องค์ประกอบอื่นภายในกล่องโต้ตอบจะมีชุดแอตทริบิวต์ autofocus

การทำให้องค์ประกอบแบบอินเทอร์แอกทีฟเฉื่อย

นอกจากนี้ยังมีแอตทริบิวต์ HTML ที่สามารถลบองค์ประกอบแบบอินเทอร์แอกทีฟออกจากลำดับแท็บ มีtabindexเชิงลบ ไปยังองค์ประกอบที่โฟกัสได้ เพิ่มแอตทริบิวต์ disabled ลงในตัวควบคุมแบบฟอร์มที่รองรับ และเพิ่มแอตทริบิวต์ inert ส่วนกลาง ลงในคอนเทนเนอร์ ล้วนทำให้องค์ประกอบต่างๆ แท็บไม่ได้ แอตทริบิวต์ทั้ง 3 รายการใช้แทนกันไม่ได้

ค่า tabindex ติดลบ

ตามที่เราได้เรียนรู้ข้างต้น แอตทริบิวต์ tabindex ที่มีค่าลบจะทำให้โฟกัสองค์ประกอบได้แต่โฟกัสแท็บไม่ได้ ขณะเพิ่ม tabindex="0"ไปยังองค์ประกอบที่โฟกัสได้โดยค่าเริ่มต้น ซึ่งรวมถึงลิงก์ ปุ่ม ตัวควบคุมแบบฟอร์ม และองค์ประกอบที่เป็น contenteditable ไม่จำเป็น การรวม tabindex ที่มีค่าลบจะนำองค์ประกอบที่โดยทั่วไปใช้แท็บได้ออกจากการโฟกัสตามลำดับ ลำดับการนำทาง

ค่า tabindex เชิงลบป้องกันไม่ให้ผู้ใช้แป้นพิมพ์โฟกัสที่องค์ประกอบแบบอินเทอร์แอกทีฟ แต่ไม่ได้ปิดใช้องค์ประกอบดังกล่าว Pointer ผู้ใช้ก็จะยังโฟกัสที่องค์ประกอบได้ หากต้องการปิดใช้องค์ประกอบ ให้ใช้แอตทริบิวต์ disabled

ปิดใช้

แอตทริบิวต์บูลีนปิดใช้อยู่เปิดใช้การควบคุมแบบฟอร์ม ซึ่งนำไปใช้และองค์ประกอบสืบทอด (หากมี) ที่ไม่สามารถโฟกัสได้ โฟกัสการควบคุมแบบฟอร์มที่ปิดใช้ไม่ได้ ไม่ได้รับกิจกรรมการคลิก และจะไม่ส่งเมื่อส่งแบบฟอร์ม โปรดทราบว่า disabled ไม่ใช่แอตทริบิวต์ร่วม โดยจะมีผลกับ <button>, <input> <optgroup>, <option>, <select>, <textarea>, องค์ประกอบที่กำหนดเองซึ่งเชื่อมโยงกับแบบฟอร์ม และ <fieldset> เมื่อตั้งค่าใน <optgroup> หรือ <fieldset> การควบคุมแบบฟอร์มย่อยทั้งหมดจะถูกปิดใช้ ยกเว้นเนื้อหาของ <legend> รายการแรกของ <fieldset>

องค์ประกอบเดียวกันที่รองรับ disabled ก็สามารถกำหนดเป้าหมายได้ด้วย :disabled และ Pseudoclasses :enabled องค์ประกอบที่ปิดใช้งานด้วย โดยทั่วไปแล้ว แอตทริบิวต์ disabled จะมีการจัดรูปแบบเป็นสีเทาอ่อนผ่านสไตล์ชีตของ User Agent แม้ว่าแอตทริบิวต์ accent-color ก็ตาม ได้รับการตั้งค่าแล้ว

การมีแอตทริบิวต์เป็นบูลีนจะปิดใช้องค์ประกอบที่เปิดใช้ด้วยวิธีอื่น คุณตั้งค่าเป็น false ไม่ได้ หากต้องการเปิดใช้องค์ประกอบที่ปิดใช้อีกครั้ง คุณต้องนำแอตทริบิวต์ออก โดยทั่วไปผ่านทาง Element.removeAttribute('disabled')

คุณสามารถใช้พร็อพเพอร์ตี้ HTMLInputElement.disabled เพื่อตรวจสอบว่า หากอินพุตถูกปิดใช้ เนื่องจาก disabled ไม่ใช่แอตทริบิวต์ร่วม จึงไม่รับค่าจาก HTMLElement แต่รองรับทั้งหมด อินเทอร์เฟซเอลิเมนต์ เช่น HTMLSelectElement HTMLTextareaElement มีพร็อพเพอร์ตี้แบบอ่านอย่างเดียวเหมือนกัน

แอตทริบิวต์ disabled ไม่มีผลกับองค์ประกอบ inert ปกติที่ทําให้โฟกัสได้ผ่าน tabindex หรือ contenteditable และไม่มีผลกับองค์ประกอบ <form> ด้วย หากต้องการปิดใช้ ให้ใช้แอตทริบิวต์ inert ร่วม

แอตทริบิวต์ inert

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

เมื่อใช้ disabled กับตัวควบคุมแบบฟอร์ม เบราว์เซอร์จะมีการจัดรูปแบบเริ่มต้นและจัดรูปแบบได้โดยใช้ :disabled คลาสสมมติ แอตทริบิวต์ inert ไม่มีสัญญาณบอกสถานะที่เป็นภาพและไม่มี Pseudoclass ที่ตรงกัน (แม้ว่าตัวเลือกแอตทริบิวต์ [inert] จะตรงกับ)

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

ตรวจสอบว่าจุดโฟกัสไม่ย้ายไปที่เนื้อหาที่มองไม่เห็น ทุกสิ่งที่แสดงผลนอกหน้าจอที่ไม่แสดงผลโดยอัตโนมัติ ปรากฏขึ้นมาทั้งที่ควรปรับให้เป็นแบบ inert หากเนื้อหาซ่อนอยู่ แต่จะแสดงเมื่อมีการโฟกัส เช่น ลิงก์ข้ามไปยังเนื้อหาในหน้านี้ ไม่จำเป็นต้องทำแบบเฉื่อยชา

ตรวจสอบความเข้าใจ

ตรวจสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับการจดจ่อ