องค์ประกอบ HTML มาตรฐาน เช่น <button>
หรือ <input>
มีการช่วยเหลือพิเศษด้วยแป้นพิมพ์
ในตัวและควรใช้เมื่อใดก็ตามที่ทำได้ แต่หากคุณต้องการสร้าง
คุณสามารถสร้างพฤติกรรมของผู้ใช้
ตามที่คาดหวังไว้ได้โดย
กำลังเพิ่ม tabindex
เพิ่ม tabindex
ไปยังเนื้อหาแบบอินเทอร์แอกทีฟเท่านั้น แม้ว่าเนื้อหาจะ
ที่สำคัญ เช่น ภาพหลัก ผู้ใช้โปรแกรมอ่านหน้าจอจะเข้าใจได้
กำลังเพิ่มโฟกัส
Tabindex คืออะไร
ในกรณีที่คุณต้องแก้ไขลำดับแท็บเริ่มต้นที่มีให้
คุณสามารถใช้แอตทริบิวต์ HTML tabindex
เพื่อตั้งค่า
ตำแหน่งแท็บขององค์ประกอบ
ใช้ tabindex
กับองค์ประกอบใดก็ได้ แต่ควรใช้เฉพาะกับ
องค์ประกอบแบบอินเทอร์แอกทีฟ ซึ่งใช้ช่วงของค่าจำนวนเต็ม ด้วย
tabindex
คุณสามารถระบุลำดับที่ชัดเจน
สำหรับเอลิเมนต์ของหน้าที่โฟกัสได้
แทรกองค์ประกอบอื่นๆ ที่ไม่สามารถโฟกัสได้ลงในลำดับแท็บ และนำองค์ประกอบออก
จากลำดับแท็บ เช่น
tabindex="0"
: แทรกองค์ประกอบในลำดับแท็บตามปกติ องค์ประกอบสามารถ
โฟกัสได้โดยกดแท็บ และโฟกัสองค์ประกอบได้โดยการเรียกใช้
เมธอด focus()
tabindex="-1"
: นำองค์ประกอบออกจากลำดับแท็บตามปกติ ยกเว้นองค์ประกอบ
ยังสามารถโฟกัสได้โดยเรียกใช้เมธอด focus()
tabindex="5"
: ดัชนี Tab ที่มากกว่า 0
จะนำองค์ประกอบนั้นมาไว้ด้านหน้า
ของลำดับแท็บตามปกติ หากมีหลายองค์ประกอบที่มี Tabindex มากกว่า
มากกว่า 0
ลำดับของแท็บจะเริ่มต้นจากค่าต่ำสุดที่มากกว่า 0
และทำงานได้มากขึ้น การใช้ Tabindex ที่มากกว่า 0
จะถือว่าเป็น
anti-pattern
ตรวจสอบว่าเข้าถึงตัวควบคุมได้ด้วยแป้นพิมพ์
เครื่องมืออย่าง Lighthouse เหมาะสำหรับการตรวจหาการช่วยเหลือพิเศษบางอย่างโดยอัตโนมัติ อย่างไรก็ตาม การทดสอบบางอย่างยังคงต้องดำเนินการโดยเจ้าหน้าที่
ลองกดแป้น Tab
เพื่อไปยังส่วนต่างๆ ของเว็บไซต์ คุณสามารถติดต่อกับ
ส่วนควบคุมแบบอินเทอร์แอกทีฟทั้งหมดบนหน้าได้อย่างไร หากไม่เป็นเช่นนั้น คุณอาจต้อง
tabindex
เพื่อปรับปรุงความสามารถในการโฟกัสของตัวควบคุม
จัดการโฟกัสที่ระดับหน้าเว็บ
บางครั้ง tabindex
ก็ช่วยสร้างประสบการณ์ของผู้ใช้ที่ราบรื่น ตัวอย่างเช่น
หากคุณสร้างหน้าเว็บเดียวที่มีประสิทธิภาพโดยมีส่วนเนื้อหาแตกต่างกัน
เนื้อหานั้นซ่อนอยู่ ณ จุดต่างๆ ในการโหลดหน้าเว็บ ซึ่งอาจหมายความว่า
ลิงก์การนำทางจะเปลี่ยนเนื้อหาที่มองเห็นได้โดยไม่ต้องรีเฟรชหน้าเว็บ
ในกรณีนี้ ให้ระบุพื้นที่เนื้อหาที่เลือกและให้ tabindex
ของ
-1
และเรียกใช้เมธอด focus
เพื่อให้มั่นใจว่าเนื้อหาจะไม่ปรากฏใน
ตามลำดับแท็บตามปกติ เทคนิคนี้เรียกว่าการจัดการโฟกัสซึ่งทำให้
บริบทที่ผู้ใช้รับรู้ซึ่งสอดคล้องกับเนื้อหาภาพของเว็บไซต์
จัดการโฟกัสในคอมโพเนนต์
ในบางกรณี คุณต้องจัดการโฟกัสที่ระดับการควบคุมด้วย เช่น องค์ประกอบที่กำหนดเอง
การรู้ลักษณะการทำงานของแป้นพิมพ์ที่อาจเป็นเรื่องยาก การเขียน Accessible Rich Internet Applications (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
ของ WICG
โพลีฟิลจะจำลองลักษณะการทำงานของแอตทริบิวต์ inert
ที่เสนอ
ซึ่งจะป้องกันไม่ให้เทคโนโลยีความช่วยเหลือพิเศษเลือกหรืออ่านองค์ประกอบ
หลีกเลี่ยง tabindex > 0
tabindex
ที่มากกว่า 0 จะข้ามองค์ประกอบไปด้านหน้าแท็บปกติ
คำสั่งซื้อ หากมีองค์ประกอบหลายรายการที่มี tabindex
มากกว่า 0 แท็บ
คำสั่งซื้อเริ่มต้นจากค่าต่ำสุดที่มากกว่า 0 และค่อยๆ เลื่อนขึ้น
การใช้ tabindex
ที่มากกว่า 0 จะถือว่าเป็นรูปแบบต่อต้านเนื่องจาก
โปรแกรมอ่านหน้าจอจะไปยังส่วนต่างๆ ของหน้าตามลำดับ DOM ไม่ใช่ลำดับแท็บ หากคุณต้องการ
องค์ประกอบให้เร็วขึ้นในลำดับแท็บ ควรย้ายไปตำแหน่งก่อนหน้า
ใน DOM
Lighthouse จะช่วยให้คุณระบุองค์ประกอบด้วย tabindex
> 0. เรียกใช้
การตรวจสอบการช่วยเหลือพิเศษ (Lighthouse > Options > Accessibility) และมองหา
ผลลัพธ์ของ "ไม่มีองค์ประกอบที่มีค่า [tabindex]
มากกว่า 0" การตรวจสอบ
ใช้ "การเดินทาง tabindex
"
หากสร้างคอมโพเนนต์ที่ซับซ้อน คุณอาจต้องเพิ่มแป้นพิมพ์อีก
การสนับสนุนมากกว่าแค่การมุ่งเน้น หากทำได้ ให้ใช้องค์ประกอบ select
ในตัว ตอนนี้
โฟกัสได้และทำให้แป้นลูกศรแสดงตัวเลือกเพิ่มเติมที่เลือกได้
ตัวเลือก
หากต้องการใช้ฟังก์ชันที่คล้ายกันในคอมโพเนนต์ของคุณเอง คุณสามารถใช้เทคนิคที่รู้จัก
ว่า "เที่ยวtabindex
" Roving Tabindex ทำงานโดยตั้งค่า tabindex
เป็น -1 สำหรับ
ทั้งหมดยกเว้นรายการที่ใช้งานอยู่ในปัจจุบัน จากนั้นคอมโพเนนต์จะใช้แป้นพิมพ์
Listener เหตุการณ์เพื่อดูว่าผู้ใช้กดแป้นใด
ในกรณีนี้ คอมโพเนนต์จะตั้งค่า 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 ทั่วไปและระบุคีย์ คอมโพเนนต์ควรรองรับ