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

Rob Dodson

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

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

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

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

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

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

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

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

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

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

เช่น

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

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

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

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

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

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

• display: none
• visibility: hidden

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

• display: block
• visibility: visible

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

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