ดูข้อมูลเพิ่มเติมเกี่ยวกับโฟกัสแป้นพิมพ์ในหลักสูตร
เพิ่ม tabindex
เฉพาะในเนื้อหาแบบอินเทอร์แอกทีฟเท่านั้น แม้ว่าเนื้อหาจะสำคัญ เช่น รูปภาพหลัก ผู้ใช้โปรแกรมอ่านหน้าจอก็เข้าใจเนื้อหาได้โดยไม่ต้องเพิ่มโฟกัส
tabindex คืออะไร
ในกรณีที่คุณต้องแก้ไขลําดับแท็บเริ่มต้นที่มาจากองค์ประกอบในตัว คุณสามารถใช้แอตทริบิวต์ tabindex
HTML เพื่อตั้งค่าตําแหน่งแท็บขององค์ประกอบอย่างชัดเจน
tabindex
ใช้ได้กับองค์ประกอบใดก็ได้ แต่ควรใช้กับองค์ประกอบแบบอินเทอร์แอกทีฟเท่านั้น และรับค่าจำนวนเต็มในช่วง การใช้ tabindex
จะช่วยให้คุณระบุลําดับที่ชัดเจนสําหรับองค์ประกอบของหน้าเว็บที่โฟกัสได้ แทรกองค์ประกอบที่โฟกัสไม่ได้ลงในลําดับการกด Tab และนําองค์ประกอบออกจากลําดับการกด Tab ได้ เช่น
tabindex="0"
: แทรกองค์ประกอบลงในลําดับแท็บตามปกติ คุณสามารถโฟกัสองค์ประกอบได้โดยกด Tab และโฟกัสองค์ประกอบได้โดยเรียกใช้เมธอด focus()
ขององค์ประกอบ
tabindex="-1"
: นำองค์ประกอบออกจากลําดับแท็บตามปกติ แต่องค์ประกอบจะยังคงรับโฟกัสได้ด้วยการเรียกใช้เมธอด focus()
tabindex="5"
: ค่า tabindex ที่มากกว่า 0
จะนําองค์ประกอบนั้นไปไว้ที่ด้านหน้าของลําดับการกด Tab ตามปกติ หากมีองค์ประกอบหลายรายการที่มี tabindex มากกว่า 0
ลําดับการกด Tab จะเริ่มจากค่าต่ำสุดที่มากกว่า 0 และไล่ลำดับขึ้นไป การใช้ tabindex มากกว่า 0
ถือเป็นรูปแบบที่ไม่ถูกต้อง
ตรวจสอบว่าตัวควบคุมเข้าถึงได้ด้วยแป้นพิมพ์
เครื่องมืออย่าง Lighthouse นั้นยอดเยี่ยมในการตรวจหาปัญหาการช่วยเหลือพิเศษบางอย่างโดยอัตโนมัติ แต่การทดสอบบางอย่างยังคงต้องดำเนินการโดยเจ้าหน้าที่
ลองกดแป้น Tab
เพื่อไปยังส่วนต่างๆ ของเว็บไซต์ คุณเข้าถึงตัวควบคุมแบบอินเทอร์แอกทีฟทั้งหมดในหน้าเว็บได้ไหม หากไม่ได้ คุณอาจต้องใช้ tabindex
เพื่อปรับปรุงความสามารถในการโฟกัสของการควบคุมเหล่านั้น
จัดการโฟกัสที่ระดับหน้า
บางครั้ง tabindex
จะช่วยสร้างประสบการณ์การใช้งานที่ราบรื่น เช่น หากคุณสร้างหน้าเว็บเดียวที่มีประสิทธิภาพซึ่งมีส่วนเนื้อหาที่แตกต่างกัน โดยเนื้อหาบางส่วนจะซ่อนอยู่ในจุดต่างๆ ของการโหลดหน้าเว็บ ซึ่งอาจหมายความว่าลิงก์การนําทางเปลี่ยนเนื้อหาที่มองเห็นได้โดยไม่ต้องรีเฟรชหน้าเว็บ
ในกรณีนี้ ให้ระบุพื้นที่เนื้อหาที่เลือกและตั้งค่า tabindex
ของ
-1
แล้วเรียกใช้เมธอด focus
วิธีนี้ช่วยให้มั่นใจว่าเนื้อหาจะไม่ปรากฏในลำดับแท็บตามปกติ เทคนิคนี้เรียกว่าการจัดการโฟกัส ซึ่งช่วยให้บริบทที่ผู้ใช้รับรู้สอดคล้องกับเนื้อหาภาพในเว็บไซต์
จัดการโฟกัสในคอมโพเนนต์
ในบางกรณี คุณต้องจัดการโฟกัสที่ระดับการควบคุมด้วย เช่น กับองค์ประกอบที่กำหนดเอง
การทราบว่าควรใช้ลักษณะการทํางานของแป้นพิมพ์ใดนั้นอาจเป็นเรื่องยาก คำแนะนำแนวทางการเขียนแอปพลิเคชัน Rich Internet ที่เข้าถึงได้ (ARIA) แสดงรายการประเภทคอมโพเนนต์และการดำเนินการบนแป้นพิมพ์ที่คอมโพเนนต์รองรับ
แทรกองค์ประกอบลงในลําดับแท็บ
แทรกองค์ประกอบลงในลําดับแท็บตามปกติโดยใช้ tabindex="0"
เช่น
<div tabindex="0">Focus me with the TAB key</div>
หากต้องการโฟกัสองค์ประกอบ ให้กดแป้น Tab
หรือเรียกใช้เมธอด focus()
ขององค์ประกอบ
นำองค์ประกอบออกจากลําดับแท็บ
นำองค์ประกอบออกโดยใช้ tabindex="-1"
เช่น
<button tabindex="-1">Can't reach me with the TAB key!</button>
ซึ่งจะนําองค์ประกอบออกจากลําดับแท็บตามปกติ แต่องค์ประกอบจะยังคงโฟกัสได้ด้วยการเรียกใช้เมธอด focus()
การใช้ tabindex="-1"
กับองค์ประกอบจะไม่ส่งผลต่อองค์ประกอบย่อย หากองค์ประกอบย่อยอยู่ในลําดับแท็บโดยธรรมชาติหรือเนื่องจากค่า tabindex
องค์ประกอบย่อยจะยังคงอยู่ในลําดับแท็บ
หากต้องการนำองค์ประกอบและองค์ประกอบย่อยทั้งหมดออกจากลําดับแท็บ ให้ลองใช้inert
polyfill ของ WICG
โพลีฟีลจะเลียนแบบลักษณะการทํางานของแอตทริบิวต์ inert
ที่เสนอ ซึ่งป้องกันไม่ให้เทคโนโลยีความช่วยเหลือพิเศษเลือกหรืออ่านองค์ประกอบ
หลีกเลี่ยง tabindex > 0
tabindex
ที่มากกว่า 0 จะส่งองค์ประกอบไปไว้ที่ด้านหน้าของลําดับแท็บตามปกติ หากมีองค์ประกอบหลายรายการที่มี tabindex
มากกว่า 0 ลำดับแท็บจะเริ่มต้นจากค่าต่ำสุดที่มากกว่า 0 แล้วไล่ลำดับสูงขึ้น
การใช้ tabindex
ที่มากกว่า 0 จะถือว่าเป็นรูปแบบที่ไม่ถูกต้องเนื่องจากโปรแกรมอ่านหน้าจอจะไปยังส่วนต่างๆ ของหน้าตามลําดับ DOM ไม่ใช่ลําดับแท็บ หากต้องการให้องค์ประกอบปรากฏเร็วขึ้นในลําดับแท็บ คุณควรย้ายองค์ประกอบนั้นไปยังตําแหน่งก่อนหน้าใน DOM
Lighthouse ช่วยให้คุณระบุองค์ประกอบที่มี tabindex
> 0 ได้ เรียกใช้การตรวจสอบการช่วยเหลือพิเศษ (Lighthouse > ตัวเลือก > การช่วยเหลือพิเศษ) แล้วมองหาผลการตรวจสอบ "ไม่มีองค์ประกอบที่มีค่า [tabindex]
มากกว่า 0"
ใช้ "tabindex
ที่ใช้กับอุปกรณ์เคลื่อนที่"
หากกำลังสร้างคอมโพเนนต์ที่ซับซ้อน คุณอาจต้องเพิ่มการรองรับแป้นพิมพ์เพิ่มเติมนอกเหนือจากโฟกัส ใช้องค์ประกอบ select
ในตัวเมื่อเป็นไปได้ โดยสามารถโฟกัสได้และอนุญาตให้ใช้ปุ่มลูกศรเพื่อแสดงตัวเลือกเพิ่มเติมที่เลือกได้
หากต้องการใช้ฟังก์ชันที่คล้ายกันในคอมโพเนนต์ของคุณเอง คุณสามารถใช้เทคนิคที่เรียกว่า "tabindex
แบบเลื่อนไปเรื่อยๆ" โดย tabindex
แบบเลื่อนไปเรื่อยๆ จะทำงานโดยการตั้งค่า tabindex
เป็น -1 สำหรับองค์ประกอบย่อยทั้งหมด ยกเว้นองค์ประกอบที่ใช้งานอยู่ในปัจจุบัน จากนั้นคอมโพเนนต์จะใช้ตัวรับเหตุการณ์ของแป้นพิมพ์เพื่อระบุปุ่มที่ผู้ใช้กด
เมื่อเกิดกรณีนี้ขึ้น คอมโพเนนต์จะตั้งค่า tabindex
ของรายการย่อยที่โฟกัสก่อนหน้านี้เป็น -1, ตั้งค่า tabindex
ของรายการย่อยที่จะโฟกัสเป็น 0 และเรียกใช้เมธอด focus()
กับรายการย่อยนั้น
ก่อน
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="0">Redo</button>
<button tabindex="-1">Cut</button>
</div>
หลัง
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="-1">Redo</button>
<button tabindex="0">Cut</button>
</div>
สูตรการเข้าถึงด้วยแป้นพิมพ์
หากไม่แน่ใจว่าคอมโพเนนต์ที่กําหนดเองอาจต้องใช้การรองรับแป้นพิมพ์ในระดับใด โปรดดูแนวทางการเขียน ARIA 1.1
คู่มือนี้จะแสดงรายการรูปแบบ UI ที่ใช้กันโดยทั่วไปและระบุคีย์ที่คอมโพเนนต์ควรรองรับ