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

ร็อบ ดอดสัน

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

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

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

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

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

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

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

จัดเรียงองค์ประกอบใน DOM ให้เรียงลำดับตามตรรกะ

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

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

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

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

ลำดับแท็บที่เหมาะสม

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

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

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

ลำดับแท็บที่เหมาะสม

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

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

ตั้งค่าระดับการเข้าถึงเนื้อหานอกหน้าจออย่างถูกต้อง

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

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

  • display: none
  • visibility: hidden

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

  • display: block
  • visibility: visible

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

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