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

Rob Dodson

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

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

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

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

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

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

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

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

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

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

ลองกด Tab ผ่านปุ่ม 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

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

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