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

Rob Dodson

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

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

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

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

องค์ประกอบ HTML อินเทอร์แอกทีฟ เช่น ช่องข้อความ ปุ่ม และรายการที่เลือก โฟกัสได้โดยนัย: ระบบจะแทรกข้อความลงในลําดับแท็บโดยอัตโนมัติ โดยพิจารณาจากอันดับของผู้ใช้ใน DOM องค์ประกอบแบบอินเทอร์แอกทีฟเหล่านี้ยังมีการจัดการเหตุการณ์ด้วยแป้นพิมพ์ในตัวด้วย Elements เช่น ย่อหน้าและ 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

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

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