ข้อมูลพื้นฐานเกี่ยวกับการเข้าถึงแป้นพิมพ์

Rob Dodson

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

โฟกัสและลำดับแท็บ

ในช่วงเวลาหนึ่งๆ โฟกัสหมายถึงองค์ประกอบในแอปพลิเคชันของคุณ (เช่น ช่อง ช่องทำเครื่องหมาย ปุ่ม หรือลิงก์) ที่ได้รับอินพุตจากแป้นพิมพ์อยู่ นอกจากการรับเหตุการณ์แป้นพิมพ์แล้ว องค์ประกอบที่โฟกัสยังได้รับเนื้อหาที่วางจากคลิปบอร์ดด้วย

หากต้องการย้ายโฟกัสในหน้า ให้ใช้ TAB เพื่อนำทางแบบ "ไปข้างหน้า" และ SHIFT + TAB เพื่อนำทาง "ย้อนกลับ" องค์ประกอบที่โฟกัสอยู่ในปัจจุบันมักจะระบุด้วยวงแหวนโฟกัส และเบราว์เซอร์ต่างๆ จะจัดรูปแบบวงแหวนโฟกัสแตกต่างกันไป ลำดับการโฟกัสไปข้างหน้าและถอยหลังผ่านองค์ประกอบแบบอินเทอร์แอกทีฟเรียกว่าลำดับแท็บ

องค์ประกอบ HTML แบบอินเทอร์แอกทีฟ เช่น ช่องข้อความ ปุ่ม และรายการที่เลือกโฟกัสได้โดยนัย โดยจะแทรกลงในลำดับแท็บโดยอัตโนมัติตามตำแหน่งใน DOM องค์ประกอบแบบอินเทอร์แอกทีฟเหล่านี้ยังมีการจัดการเหตุการณ์ด้วยแป้นพิมพ์ในตัวอีกด้วย องค์ประกอบต่างๆ เช่น ย่อหน้าและ div ไม่สามารถโฟกัสได้โดยปริยาย เนื่องจากผู้ใช้มักไม่จำเป็นต้องโต้ตอบกับองค์ประกอบ

การใช้ลำดับแท็บที่เหมาะสมเป็นส่วนสำคัญในการทำให้ผู้ใช้ไปยังส่วนต่างๆ ด้วยแป้นพิมพ์ได้อย่างราบรื่น มีแนวคิดหลัก 2 ประการที่ควรคำนึงถึง เมื่อประเมินและปรับเปลี่ยนลำดับแท็บ

  1. จัดเรียงองค์ประกอบใน DOM ให้อยู่ในลำดับเชิงตรรกะ
  2. ตั้งค่าการมองเห็นเนื้อหานอกหน้าจอที่ไม่ควรรับโฟกัสให้ถูกต้อง

จัดเรียงองค์ประกอบใน DOM ให้อยู่ในลำดับเชิงตรรกะ

หากต้องการตรวจสอบว่าลำดับแท็บของแอปพลิเคชันของคุณสมเหตุสมผลไหม ให้ลองกด Tab ในหน้าของคุณ โดยทั่วไป โฟกัสควรเป็นไปตามลำดับการอ่าน โดยเลื่อนจากซ้ายไปขวาจากด้านบนไปยังด้านล่างของหน้า

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

ลองใช้แท็บผ่านปุ่ม 2 ชุดด้านล่างนี้เพื่อให้ได้ลำดับแท็บที่สมเหตุสมผล กับลำดับแท็บที่ไม่ถูกต้อง

ลำดับแท็บเชิงตรรกะ

ลำดับแท็บไม่สมเหตุสมผล

โค้ดสำหรับ 2 ตัวอย่างนี้เปรียบเทียบไว้ด้านล่าง

ลำดับแท็บเชิงตรรกะ

<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>

ลำดับแท็บไม่สมเหตุสมผล

<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>

โปรดระมัดระวังเมื่อเปลี่ยนตำแหน่งการแสดงผลขององค์ประกอบโดยใช้ CSS เพื่อหลีกเลี่ยงการสร้างลำดับแท็บที่ไม่ถูกต้อง ในการแก้ไขลำดับแท็บที่ไม่ถูกต้องข้างต้น ให้ย้ายปุ่ม "Kiwi" แบบลอยไปไว้หลังปุ่ม "มะพร้าว" ใน DOM แล้วนำรูปแบบแทรกในบรรทัดออก

ตั้งค่าการเปิดเผยเนื้อหานอกหน้าจออย่างถูกต้อง

บางครั้งองค์ประกอบอินเทอร์แอกทีฟนอกหน้าจอต้องอยู่ใน DOM แต่ไม่ควรเรียงลำดับแท็บ ตัวอย่างเช่น หากคุณมีการนำทางด้านข้างซึ่งเปิดเมื่อคลิกปุ่ม ผู้ใช้จะไม่สามารถโฟกัสที่การนำทางด้านข้างได้เมื่อปิดไปแล้ว

หากต้องการป้องกันไม่ให้องค์ประกอบแบบอินเทอร์แอกทีฟบางรายการได้รับการโฟกัส คุณควรใส่องค์ประกอบอย่างใดอย่างหนึ่งในพร็อพเพอร์ตี้ CSS ต่อไปนี้

  • display: none
  • visibility: hidden

หากต้องการเพิ่มองค์ประกอบกลับเข้าไปในลำดับแท็บ เช่น เมื่อเปิดการนำทางด้านข้าง ให้แทนที่พร็อพเพอร์ตี้ CSS ด้านบนตามลำดับด้วย

  • display: block
  • visibility: visible

ขั้นตอนถัดไป

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