Tab, Shift+Tab, Enter, Space: ปุ่มหลัก

หลายคนไม่เคยใช้เมาส์เลย พวกเขาควบคุมเว็บทั้งหมดด้วย แป้นพิมพ์ ดังนั้นตัวควบคุมทุกอย่างที่คุณสร้างต้องใช้งานได้ด้วยปุ่มเพียงอย่างเดียว ⌨️

ปุ่มที่สำคัญที่สุดคือ Tab การกดแต่ละครั้งจะย้ายโฟกัสไปยังสิ่งที่โต้ตอบได้ถัดไป เช่น ลิงก์ ปุ่ม หรือช่องกรอกข้อมูล

กดอะไรเร็วเกินไปหรือไม่ Shift+Tab จะเลื่อนโฟกัสย้อนกลับไปยังตัวควบคุมก่อนหน้า ทำให้ผู้ใช้ย้อนกลับไปยังจุดเดิมได้เสมอ

เมื่อโฟกัสอยู่ที่ลิงก์ Enter จะเปิดใช้งานลิงก์นั้น ซึ่งเป็นวิธีคลิกจุดยึดเพื่อไปยังตำแหน่งใหม่ด้วยแป้นพิมพ์

ปุ่มจริงมีคุณสมบัติพิเศษ คือทำงานได้ทั้งเมื่อกด Enter และ Space การรองรับสองปุ่มนี้มีมาให้ฟรีจากองค์ประกอบดั้งเดิม

ในช่องทำเครื่องหมายหรือปุ่มตัวเลือก Space คือปุ่มสลับสถานะ เลื่อนโฟกัสไปที่ช่องนั้นแล้วกด Space เพื่อเปิดหรือปิดสถานะที่เลือก

นี่คือข้อดี: ลิงก์ ปุ่ม และช่องรับข้อมูลดั้งเดิมจะตอบสนองต่อปุ่มเหล่านี้ โดยอัตโนมัติ คุณไม่ต้องเขียนการเชื่อมต่อใด ๆ เอง

หากสร้างปุ่มปลอมจาก div การกด Tab จะข้ามผ่านไปทันที div และ span ธรรมดาจะมองไม่เห็นสำหรับผู้ใช้แป้นพิมพ์

เปิดหน้าใดก็ได้แล้วกด Tab สองสามครั้ง ดูไฮไลต์ย้ายจากตัวควบคุมหนึ่งไปยังอีกตัวควบคุม นั่นคือเส้นทางเดียวกับที่ผู้ใช้แป้นพิมพ์ใช้

ภายในชุดปุ่มตัวเลือก ปุ่มลูกศรจะย้ายระหว่างตัวเลือก ส่วน Tab จะข้ามไปทั้งกลุ่มในครั้งเดียว ปุ่มต่างกันก็ทำหน้าที่ต่างกัน

ผู้ใช้คุ้นเคยกับรูปแบบเหล่านี้ในทุกที่ ดังนั้นควรรักษารูปแบบไว้ ตัวควบคุมที่ไม่ตอบสนองต่อ Enter หรือ Space จะทำให้ผู้ใช้แป้นพิมพ์รู้สึกว่า เสีย

คุณได้เรียนรู้พื้นฐานการใช้แป้นพิมพ์แล้ว: ใช้ Tab และ Shift+Tab เพื่อเคลื่อนที่ ใช้ Enter เพื่อตามลิงก์ และใช้ Enter หรือ Space เพื่อกดปุ่ม องค์ประกอบดั้งเดิมมีความสามารถเหล่านี้ให้ครบโดยไม่ต้องทำเพิ่ม ✅