tabindex 0, -1 และห้ามใช้ค่าบวก
ควบคุมว่าอะไรรับโฟกัสได้ และอะไรควบคุมได้ด้วยสคริปต์เท่านั้น
tabindex 0, -1 และห้ามใช้ค่าบวก เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
tabindex ควบคุมอะไร
แอตทริบิวต์ tabindex กำหนดว่าองค์ประกอบจะรับโฟกัสจากแป้นพิมพ์ได้หรือไม่ และอยู่ตรงไหนในลำดับ Tab จึงเป็นตัวควบคุมการรับโฟกัสของคุณ
องค์ประกอบส่วนใหญ่รับโฟกัสได้อยู่แล้ว
ลิงก์ ปุ่ม และ input รับโฟกัสได้โดยค่าเริ่มต้น ดังนั้นคุณแทบไม่ต้องแก้ tabindex ขององค์ประกอบเหล่านี้ ควรใช้เมื่อองค์ประกอบพื้นฐานทำงานที่ต้องการไม่ได้เท่านั้น
tabindex 0 เข้าสู่ลำดับ
การตั้ง tabindex="0" จะนำองค์ประกอบที่ปกติรับโฟกัสไม่ได้เข้าสู่ลำดับ Tab ตามธรรมชาติ ณ ตำแหน่งที่องค์ประกอบนั้นอยู่ใน DOM
<div role="button" tabindex="0">Custom action</div>ควรใช้ 0 เมื่อใด
ใช้ tabindex="0" กับวิดเจ็ตแบบกำหนดเองที่สร้างจาก div หรือ span ซึ่งต้องเข้าถึงได้ด้วยแป้นพิมพ์ เช่น ตัวสลับที่ควบคุมด้วยสคริปต์
tabindex -1 ใช้ได้จากสคริปต์เท่านั้น
เมื่อใช้ tabindex="-1" องค์ประกอบจะถูกข้ามด้วยปุ่ม Tab แต่ยังรับโฟกัสจาก JavaScript ได้โดยใช้ element.focus()
<div id="panel" tabindex="-1">Result area</div>เหตุใด -1 จึงมีประโยชน์มาก
คุณใช้ tabindex="-1" เพื่อย้ายโฟกัสไปยังส่วนหนึ่งหลังการทำงาน เช่น แผงผลลัพธ์ โดยไม่เพิ่มส่วนนั้นเข้าไปในการกด Tab ทุกครั้ง 🎯
อย่าใช้ค่าบวก
tabindex ที่เป็นบวก เช่น 3 จะทำให้องค์ประกอบนั้นถูกไปถึงก่อนทุกอย่าง ทำให้ลำดับสับสนและเหมือนติดอยู่ในเขาวงกต โปรดหลีกเลี่ยง
<input tabindex="3">ค่าบวกทำให้ลำดับการใช้งานเสีย
องค์ประกอบที่มีค่าบวกจะถูกไปถึงก่อนองค์ประกอบที่มี tabindex="0" และองค์ประกอบเริ่มต้นทั้งหมด ทำให้ ลำดับโฟกัส ไม่ตรงกับลำดับที่มองเห็น
ให้ DOM กำหนดลำดับ
ลำดับ Tab ที่เป็นระเบียบที่สุดมาจาก ลำดับใน DOM เอง จัดโครงสร้างมาร์กอัปให้มีเหตุผล แล้วปัญหาส่วนใหญ่เกี่ยวกับโฟกัสจะหายไปเอง
อย่าทำให้องค์ประกอบทุกอย่างรับโฟกัสได้
การเพิ่ม tabindex="0" ให้ข้อความธรรมดาหรือกล่องทั้งชุดจะสร้าง เสียงรบกวน และบังคับให้ผู้ใช้แป้นพิมพ์กด Tab ผ่านจุดหยุดที่ไม่ทำอะไร
กฎง่าย ๆ ที่ใช้ได้ทั่วไป
ใช้ 0 เพื่อเพิ่มการควบคุมแบบกำหนดเองในลำดับ ใช้ -1 เพื่อให้โฟกัสผ่านสคริปต์เท่านั้น และอย่าใช้ตัวเลขบวก เท่านี้ก็ครอบคลุมเกือบทุกกรณี
ตรวจสอบความเข้าใจ
ค่า tabindex ใดทำให้องค์ประกอบรับโฟกัสผ่านสคริปต์ได้ แต่ถูกข้ามในลำดับ Tab
สรุป
ตอนนี้คุณควบคุม tabindex ได้แล้ว: 0 เพิ่มการควบคุมแบบกำหนดเองในลำดับ, -1 เปิดให้โฟกัสผ่านสคริปต์ และค่าบวกเป็นสิ่งที่ห้ามใช้ 👍
คำถามที่พบบ่อย
บทเรียน “tabindex 0, -1 และห้ามใช้ค่าบวก” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “tabindex 0, -1 และห้ามใช้ค่าบวก” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Web Accessibility Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “tabindex 0, -1 และห้ามใช้ค่าบวก”
ควบคุมว่าอะไรรับโฟกัสได้ และอะไรควบคุมได้ด้วยสคริปต์เท่านั้น คุณปฏิบัติ Web Accessibility Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Web Accessibility Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Web Accessibility Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “tabindex 0, -1 และห้ามใช้ค่าบวก” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม
ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- tabindex 0, -1 และห้ามใช้ค่าบวก
- ย้ายโฟกัสหลังการดำเนินการ
- คืนโฟกัสเมื่อเลเยอร์ปิดลง
- จัดการ tabindex แบบเลื่อนตำแหน่งในวิดเจ็ต