ผู้ใช้หลายคนใช้แป้นพิมพ์เพื่อไปยังส่วนต่างๆ ของแอปพลิเคชัน ตั้งแต่ผู้ใช้ที่มีความบกพร่องทางการเคลื่อนไหวชั่วคราวและถาวร ไปจนถึงผู้ใช้ที่ใช้แป้นพิมพ์ลัดเพื่อให้ทำงานได้อย่างมีประสิทธิภาพมากขึ้น การมีกลยุทธ์การไปยังส่วนต่างๆ ของแป้นพิมพ์ที่ดีสำหรับแอปพลิเคชันจะช่วยให้ทุกคนได้รับประสบการณ์การใช้งานที่ดีขึ้น
โฟกัสและลําดับแท็บ
โฟกัสหมายถึงองค์ประกอบใดในแอปพลิเคชัน (เช่น ช่อง ช่องทําเครื่องหมาย ปุ่ม หรือลิงก์) ที่กำลังรับอินพุตจากแป้นพิมพ์ ณ ขณะหนึ่ง นอกจากจะได้รับเหตุการณ์จากแป้นพิมพ์แล้ว องค์ประกอบที่มีโฟกัสยังจะได้รับเนื้อหาที่วางจากคลิปบอร์ดด้วย
หากต้องการย้ายโฟกัสในหน้าเว็บ ให้ใช้ TAB
เพื่อไปยัง "ข้างหน้า" และ SHIFT + TAB
เพื่อไปยัง "ข้างหลัง" องค์ประกอบที่โฟกัสอยู่ในปัจจุบันมักจะระบุด้วยวงโฟกัส และเบราว์เซอร์ต่างๆ ก็มีรูปแบบวงโฟกัสแตกต่างกันไป ลำดับที่โฟกัสเลื่อนไปข้างหน้าและข้างหลังผ่านองค์ประกอบแบบอินเทอร์แอกทีฟเรียกว่าลําดับ Tab
องค์ประกอบ HTML แบบอินเทอร์แอกทีฟ เช่น ช่องข้อความ ปุ่ม และรายการตัวเลือกจะโฟกัสได้โดยปริยาย โดยระบบจะแทรกองค์ประกอบเหล่านี้ลงในลําดับการกด Tab โดยอัตโนมัติตามตําแหน่งใน DOM องค์ประกอบแบบอินเทอร์แอกทีฟเหล่านี้ยังมีการจัดการเหตุการณ์แป้นพิมพ์ในตัวด้วย องค์ประกอบต่างๆ เช่น ย่อหน้าและ div ไม่สามารถรับโฟกัสโดยปริยายได้ เนื่องจากโดยทั่วไปแล้วผู้ใช้ไม่จำเป็นต้องโต้ตอบกับองค์ประกอบดังกล่าว
การใช้ลําดับแท็บที่สมเหตุสมผลเป็นส่วนสําคัญในการสร้างประสบการณ์การไปยังส่วนต่างๆ ด้วยแป้นพิมพ์ที่ราบรื่นให้แก่ผู้ใช้ แนวคิดหลัก 2 ข้อที่ควรคำนึงถึงเมื่อประเมินและปรับลําดับแท็บมีดังนี้
- จัดเรียงองค์ประกอบใน DOM ให้อยู่ในลําดับเชิงตรรกะ
- ตั้งค่าระดับการมองเห็นของเนื้อหาที่อยู่นอกหน้าจอซึ่งไม่ควรได้รับโฟกัสอย่างถูกต้อง
จัดเรียงองค์ประกอบใน DOM ให้อยู่ในลําดับเชิงตรรกะ
หากต้องการตรวจสอบว่าลําดับแท็บของแอปพลิเคชันสมเหตุสมผลหรือไม่ ให้ลองกด Tab ไปยังส่วนต่างๆ ของหน้า โดยทั่วไป โฟกัสควรเป็นไปตามลำดับการอ่าน โดยเริ่มจากซ้ายไปขวา จากบนลงล่างของหน้า
หากลําดับโฟกัสดูไม่ถูกต้อง คุณควรจัดเรียงองค์ประกอบใน DOM ใหม่เพื่อให้ลําดับแท็บดูเป็นธรรมชาติมากขึ้น หากต้องการให้องค์ประกอบปรากฏบนหน้าจอก่อน ให้ย้ายองค์ประกอบนั้นไปไว้ก่อนใน DOM
ลองกด Tab ผ่านปุ่ม 2 ชุดด้านล่างเพื่อดูความแตกต่างระหว่างลําดับการกด Tab ที่เป็นตรรกะกับลําดับการกด Tab ที่ไม่เป็นไปตามตรรกะ
ลําดับแท็บเชิงตรรกะ
ลำดับแท็บที่ไม่สมเหตุสมผล
โค้ดของตัวอย่างทั้ง 2 รายการนี้เปรียบเทียบกันด้านล่าง
ลําดับแท็บเชิงตรรกะ
<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
ลำดับแท็บที่ไม่สมเหตุสมผล
<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
โปรดระมัดระวังเมื่อเปลี่ยนตำแหน่งที่มองเห็นได้ขององค์ประกอบโดยใช้ CSS เพื่อหลีกเลี่ยงการสร้างลําดับแท็บที่ไม่สมเหตุสมผล หากต้องการแก้ไขลําดับแท็บที่ไม่สมเหตุสมผลด้านบน ให้ย้ายปุ่ม "กีวี" ที่ลอยอยู่ให้อยู่หลังปุ่ม "มะพร้าว" ใน DOM และนําสไตล์ในบรรทัดออก
ตั้งค่าระดับการมองเห็นของเนื้อหาที่อยู่นอกหน้าจออย่างถูกต้อง
บางครั้งองค์ประกอบแบบอินเทอร์แอกทีฟที่อยู่นอกหน้าจอต้องอยู่ใน DOM แต่ไม่ควรอยู่ในลําดับแท็บ เช่น หากคุณมีแถบด้านข้างที่ปรับเปลี่ยนตามอุปกรณ์ซึ่งเปิดขึ้นเมื่อคุณคลิกปุ่ม ผู้ใช้ไม่ควรโฟกัสที่แถบด้านข้างเมื่อปิดอยู่
หากต้องการป้องกันไม่ให้องค์ประกอบแบบอินเทอร์แอกทีฟรายการใดรายการหนึ่งได้รับโฟกัส คุณควรกำหนดพร็อพเพอร์ตี้ CSS รายการใดรายการหนึ่งต่อไปนี้ให้กับองค์ประกอบ
display: none
visibility: hidden
หากต้องการเพิ่มองค์ประกอบกลับไปยังลําดับแท็บ เช่น เมื่อเปิดเมนูด้านข้าง ให้แทนที่พร็อพเพอร์ตี้ CSS ด้านบนด้วยพร็อพเพอร์ตี้ต่อไปนี้ตามลําดับ
display: block
visibility: visible
ขั้นตอนถัดไป
สําหรับผู้ใช้ที่ทํางานกับคอมพิวเตอร์เกือบทั้งหมดด้วยแป้นพิมพ์หรืออุปกรณ์อินพุตอื่น ลําดับแท็บที่สมเหตุสมผลเป็นสิ่งจําเป็นในการทําให้แอปพลิเคชันเข้าถึงได้และใช้งานได้ เพื่อเป็นการฝึกนิสัยที่ดีในการตรวจสอบลําดับแท็บ ให้ลองกด Tab ไปยังส่วนต่างๆ ของแอปพลิเคชันก่อนเผยแพร่แต่ละครั้ง