องค์ประกอบอินเทอร์แอกทีฟ ซึ่งรวมถึงตัวควบคุมแบบฟอร์ม ลิงก์ และปุ่มต่างๆ จะโฟกัสได้และ Tab ตามค่าเริ่มต้น องค์ประกอบที่แตะได้เป็นส่วนหนึ่งของลำดับการโฟกัสตามลำดับของเอกสาร องค์ประกอบอื่นๆ ไม่มีปฏิกิริยาโต้ตอบ กล่าวคือไม่มีการโต้ตอบ แอตทริบิวต์ HTML จะช่วยให้องค์ประกอบแบบอินเทอร์แอกทีฟมีปฏิกิริยาโต้ตอบ และทำให้องค์ประกอบแบบเฉื่อยเป็นแบบอินเทอร์แอกทีฟได้
โดยค่าเริ่มต้น ลำดับการโฟกัสการนำทางจะเหมือนกับลำดับภาพ ซึ่งเป็นลำดับซอร์สโค้ด มีแอตทริบิวต์ HTML ที่เปลี่ยนลำดับนี้และพร็อพเพอร์ตี้ CSS ได้ การเปลี่ยนลำดับแท็บโดยใช้ HTML หรือลำดับการแสดงผลภาพด้วย CSS อาจส่งผลเสียต่อประสบการณ์ของผู้ใช้
อย่าเปลี่ยนลำดับของแท็บที่รับรู้ได้และแท็บจริงด้วย CSS และ HTML จาก 2 ตัวอย่างต่อไปนี้แสดงให้เห็น ลำดับแท็บที่แตกต่างจากลำดับที่คาดไว้จะทำให้ผู้ใช้สับสนและแย่ต่อประสบการณ์ของผู้ใช้
ในตัวอย่างนี้ ค่าของแอตทริบิวต์ tabindex
ทำให้ลำดับแท็บสับสน ดังนี้
ในตัวอย่างนี้ CSS ทำให้เกิดความแตกต่างระหว่างลำดับของแท็บและลำดับภาพของเนื้อหา
การประกาศ flex-flow: row-reverse; กลับลำดับภาพแล้ว
นอกจากนี้ ระบบยังนำคุณสมบัติ order ของ CSS ไปใช้กับคำที่ 6 ซึ่งก็คือ "This" ซึ่งจะย้ายการมองเห็นภาพ 1 คำนั้น ลำดับการกดแท็บคือลําดับของโค้ด ซึ่งไม่ตรงกับลำดับการเห็นอีกต่อไป ส่งผลให้ผู้ใช้แป้นพิมพ์ตัดการเชื่อมต่อ
การทำให้องค์ประกอบเฉื่อยเป็นแบบอินเทอร์แอกทีฟ
คุณเพิ่มแอตทริบิวต์ contenteditable และ tabindex ซึ่งเป็นแอตทริบิวต์ส่วนกลางลงในองค์ประกอบใดก็ได้ ซึ่งทำให้โฟกัสในกระบวนการได้ นอกจากนี้ องค์ประกอบที่โฟกัสได้ยังโฟกัสได้ด้วยเมาส์หรือตัวชี้โดยตั้งค่าแอตทริบิวต์ autofocus หรือตามสคริปต์ เช่น ด้วย element.focus()
แอตทริบิวต์ tabindex
แอตทริบิวต์ tabindex ส่วนกลางซึ่งเปิดตัวในแอตทริบิวต์ทำให้องค์ประกอบที่ไม่สามารถรับโฟกัสเพื่อรับโฟกัสได้ ซึ่งโดยปกติจะใช้แป้น Tab จึงมีชื่อด้วย
แอตทริบิวต์ tabindex จะใช้ค่าเป็นจำนวนเต็ม ค่าลบจะทำให้องค์ประกอบโฟกัสได้ แต่กด Tab ไม่ได้ ค่า tabindex ของ 0 ทำให้องค์ประกอบที่โฟกัสได้และ Tab ได้เป็นการเพิ่มองค์ประกอบที่จะใช้กับลำดับการนำทางโฟกัสตามลำดับของซอร์สโค้ด ค่า 1 ขึ้นไปจะทำให้องค์ประกอบที่โฟกัสได้และ Tab ได้
แต่จะเพิ่มเข้าไปในลำดับการกด Tab ที่จัดลำดับความสำคัญและควรหลีกเลี่ยงอย่างที่เราเห็นด้านบน
ในหน้านี้ ปุ่มแชร์ <share-action> เป็นองค์ประกอบที่กำหนดเอง tabindex="0" จะเพิ่มองค์ประกอบที่โฟกัสได้ไม่ปกตินี้ลงในลำดับการกด Tab เริ่มต้นของแป้นพิมพ์
<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 คำสั่ง Tab ที่มีการแก้ไขสามารถสร้างประสบการณ์ที่ไม่ดีแก่ผู้ใช้
แต่นักพัฒนาซอฟต์แวร์ยังจัดการและดูแลรักษาได้ยาก
แอตทริบิวต์ contenteditable
มีการกล่าวถึงแอตทริบิวต์ contenteditable ก่อนหน้านี้ การตั้งค่า contenteditable="true" ในองค์ประกอบใดก็ตามจะทำให้องค์ประกอบนั้นแก้ไขได้ โฟกัสได้ และเป็นส่วนหนึ่งของลำดับแท็บ ลักษณะการโฟกัสคล้ายกับการตั้งค่า tabindex="0" แต่ไม่เหมือนกัน องค์ประกอบ contenteditable ที่ซ้อนกันจะโฟกัสได้ แต่กด Tab ไม่ได้ หากต้องการทำให้องค์ประกอบ contenteditable ที่ฝังเป็นแบบ Tab เข้าถึงได้ ให้เพิ่ม 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 ที่สามารถนำองค์ประกอบแบบอินเทอร์แอกทีฟออกจากลำดับการกด Tab ได้ การรวม tabindex เชิงลบลงในองค์ประกอบที่โฟกัสได้ การเพิ่มแอตทริบิวต์ disabled ไปยังตัวควบคุมแบบฟอร์มที่รองรับ และการเพิ่มแอตทริบิวต์ inert ส่วนกลางลงในคอนเทนเนอร์จะทำให้องค์ประกอบทั้งหมดสลับไม่ได้ แอตทริบิวต์ 3 รายการนี้ใช้แทนกันไม่ได้
ค่า tabindex เชิงลบ
ตามที่เราได้เรียนรู้ข้างต้น แอตทริบิวต์ tabindex ที่มีค่าลบจะทำให้องค์ประกอบโฟกัสได้ แต่กด Tab ไม่ได้ แม้ว่าการเพิ่ม tabindex="0" ลงในองค์ประกอบที่โฟกัสได้โดยค่าเริ่มต้น ซึ่งรวมถึงลิงก์ ปุ่ม ตัวควบคุมแบบฟอร์ม และองค์ประกอบที่ contenteditable เป็นการดำเนินการที่ไม่จำเป็น ซึ่งรวมถึง tabindex ที่มีค่าลบจะนำองค์ประกอบที่กด Tab ตามปกติออกจากลำดับการโฟกัสตามลำดับ
ค่า tabindex เชิงลบจะป้องกันไม่ให้ผู้ใช้แป้นพิมพ์โฟกัสที่องค์ประกอบแบบอินเทอร์แอกทีฟ แต่ไม่ได้ปิดใช้องค์ประกอบนั้น ผู้ใช้เคอร์เซอร์จะยังคงโฟกัสที่องค์ประกอบได้ หากต้องการปิดใช้องค์ประกอบ ให้ใช้แอตทริบิวต์ disabled
ปิดใช้
แอตทริบิวต์บูลีน Disabled ทำให้ฟอร์มควบคุมสิ่งที่จะใช้และองค์ประกอบสืบทอด (หากมี) ที่ไม่สามารถโฟกัสได้ ตัวควบคุมแบบฟอร์มที่ปิดใช้แล้วจะไม่สามารถโฟกัสได้ ไม่มีกิจกรรมการคลิก และจะไม่ส่งเมื่อส่งแบบฟอร์ม โปรดทราบว่า disabled ไม่ใช่แอตทริบิวต์ร่วม การตั้งค่านี้จะมีผลกับ <button>, <input>,
<optgroup>, <option>, <select>, <textarea>, องค์ประกอบที่กำหนดเองที่เกี่ยวข้องกับแบบฟอร์ม และ <fieldset>
เมื่อตั้งค่าเป็น <optgroup> หรือ <fieldset> ระบบจะปิดใช้การควบคุมแบบฟอร์มย่อยทั้งหมด ยกเว้นเนื้อหาของ <legend> แรกของ <fieldset>
องค์ประกอบเดียวกันที่รองรับ disabled ก็กำหนดเป้าหมายได้ด้วย Pseudoclass ของ :disabled และ :enabled เช่นกัน โดยทั่วไปองค์ประกอบที่ปิดใช้ด้วยแอตทริบิวต์ disabled จะมีสไตล์เป็นสีเทาอ่อนผ่านสไตล์ชีตของ User Agent แม้ว่าจะตั้งค่า accent-color ไว้ก็ตาม
เมื่อมีแอตทริบิวต์บูลีน การแสดงแอตทริบิวต์จะปิดใช้องค์ประกอบที่เปิดใช้องค์ประกอบอื่น คุณจะตั้งค่าเป็น false ไม่ได้
หากต้องการเปิดใช้องค์ประกอบที่ปิดใช้อีกครั้ง คุณต้องนำแอตทริบิวต์ออก โดยทั่วไปจะต้องทำผ่าน Element.removeAttribute('disabled')
พร็อพเพอร์ตี้ HTMLInputElement.disabled ช่วยให้คุณตรวจสอบว่าอินพุตปิดใช้อยู่หรือไม่ เนื่องจาก disabled ไม่ใช่แอตทริบิวต์ส่วนกลาง จึงไม่รับค่ามาจาก HTMLElement แต่อินเทอร์เฟซองค์ประกอบที่รองรับทุกรายการ เช่น HTMLSelectElement, HTMLTextareaElement มีพร็อพเพอร์ตี้แบบอ่านอย่างเดียวที่เหมือนกัน
แอตทริบิวต์ disabled ใช้ไม่ได้กับองค์ประกอบ inert ปกติที่กำหนดให้โฟกัสผ่าน tabindex หรือ contenteditable ได้
นอกจากนี้ยังไม่มีผลกับองค์ประกอบ <form> เองด้วย หากต้องการปิดใช้ฟีเจอร์เหล่านี้ ให้ใช้แอตทริบิวต์ inert ส่วนกลาง
แอตทริบิวต์ inert
เมื่อเพิ่มแอตทริบิวต์บูลีนร่วม inert ลงในองค์ประกอบ องค์ประกอบนั้นและเนื้อหาที่ซ้อนกันทั้งหมดจะถูกปิดใช้งาน (คลิกหรือแตะไม่ได้) และนำออกจากแผนผังการช่วยเหลือพิเศษ แม้ว่า inert จะใช้กับองค์ประกอบใดก็ได้ แต่โดยทั่วไปแล้วจะใช้สำหรับส่วนต่างๆ ของเนื้อหา เช่น เนื้อหาที่นอกหน้าจอหรือเนื้อหาที่ซ่อนไว้
เมื่อใช้ disabled กับตัวควบคุมแบบฟอร์ม เบราว์เซอร์จะมีการจัดรูปแบบเริ่มต้นและสามารถจัดรูปแบบโดยใช้คลาสเทียม :disabled แอตทริบิวต์ inert ไม่มีตัวบ่งชี้แบบภาพและไม่มี Pseudoclass ที่ตรงกัน (แต่ตัวเลือกแอตทริบิวต์ของ [inert] ตรงกัน)
การใช้ inert ในเนื้อหาที่มองเห็นได้โดยไม่มีรูปแบบที่บ่งบอกถึงความเฉื่อยอาจทำให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ไม่ดี เนื่องจากเนื้อหาที่ไม่มีความเฉื่อยไม่มีให้ใช้งานสำหรับผู้ใช้โปรแกรมอ่านหน้าจอ อาจทำให้เกิดความสับสนเมื่อผู้ใช้โปรแกรมอ่านหน้าจอเห็นเนื้อหาบนหน้าจอที่ไม่สามารถเข้าถึงในเครื่องมือช่วยเหลือพิเศษได้ ทำให้เห็นความเฉื่อยชัดๆ ได้ผ่านทาง CSS
ตรวจสอบว่าโฟกัสไม่ย้ายไปยังเนื้อหาที่มองไม่เห็น ทุกสิ่งที่แสดงผลนอกหน้าจอซึ่งไม่ปรากฏขึ้นโดยอัตโนมัติเมื่อโฟกัสที่ควรทำให้เป็นแบบ inert หากเนื้อหาถูกซ่อนไว้ แต่ผู้ใช้จะยังคงเห็นเนื้อหาที่ถูกโฟกัส เช่น ลิงก์ข้ามเนื้อหาในหน้านี้ ก็ไม่ต้องแสดงเนื้อหาขึ้นมาอย่างเฉื่อยๆ
ทดสอบความเข้าใจ
ทดสอบความเข้าใจ
ทดสอบความรู้ในการโฟกัส
หากไม่สามารถโฟกัสองค์ประกอบใด องค์ประกอบนั้นเรียกว่าอะไร
จะเกิดอะไรขึ้นหากองค์ประกอบมีแอตทริบิวต์ disabled