นำอาการปวดหัวออกจากการจัดการโฟกัส

Rob Dodson

ฟีเจอร์ "จุดเริ่มต้นของการไปยังส่วนต่างๆ ด้วยโฟกัสตามลำดับ" จะกำหนดจุดที่เราจะเริ่มค้นหาองค์ประกอบที่โฟกัสได้สำหรับการไปยังส่วนต่างๆ ด้วยโฟกัสตามลำดับ ([Tab] หรือ [Shift-Tab]) เมื่อไม่มีพื้นที่โฟกัส ซึ่งจะเป็นประโยชน์อย่างยิ่งสำหรับฟีเจอร์การช่วยเหลือพิเศษ เช่น "ข้ามลิงก์" และการจัดการโฟกัสในเอกสาร

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

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

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

ลิงก์ภายในหน้า

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

<!-- Table of Contents -->
<a href="#recipes">Recipes</a>
<a href="#ingredients">Ingredients</a>

<!-- Recipes Section -->
<h2 id="recipes">Recipes</h1>
<h3>Vegemite Cheesecake</h3>
<p>
    Vegemite cheesecake is delicious. We promise.
    <a href="cheesecake.html">Read More</a>
</p>

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

• กด Tab 2 ครั้งเพื่อโฟกัสลิงก์ "สูตรอาหาร"
• กด Enter เพื่อข้ามไปยังส่วนสูตรอาหาร
• กด Tab อีกครั้งเพื่อโฟกัสลิงก์ "อ่านเพิ่มเติม"

มาดูการใช้งานจริงโดยใช้ Chrome 49

โอ้ ดูเหมือนว่าทุกอย่างจะไม่เป็นไปตามแผนสินะ

การกด Tab เป็นครั้งสุดท้ายจะย้ายโฟกัสไปยังรายการถัดไปในสารบัญแทนที่จะโฟกัสที่ลิงก์ "อ่านเพิ่มเติม" เนื่องจากนักพัฒนาแอปไม่ได้ตั้งค่า tabindex="-1" ในส่วนหัวเพื่อให้โฟกัสได้ ดังนั้นการคลิกที่ส่วนยึดที่มีชื่อ #recipes จึงไม่ย้ายโฟกัส นี่เป็นข้อผิดพลาดเล็กๆ น้อยๆ และไม่สำคัญมากนักหากคุณใช้เมาส์ แต่อาจเป็นเรื่องสำคัญมากหากคุณเป็นผู้ใช้แป้นพิมพ์หรืออุปกรณ์สวิตช์ พิจารณาจำนวนการลิงก์ภายในในหน้า Wikipedia ทั่วไป คงจะน่าหงุดหงิดที่ต้องกด Tab ไปมาตลอดเพื่อไปยังส่วนต่างๆ ทั้งหมดเหล่านั้น

มาดูประสบการณ์การใช้งานแบบเดียวกันนี้ใน Chrome 50 กัน

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

หลักการทำงาน

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

จุดเริ่มต้นโฟกัส (ตามที่ชื่อบอก) มีกลไกในการแนะนำจุดเริ่มต้นในการค้นหาองค์ประกอบถัดไปที่โฟกัสได้เมื่อเรากด Tab หรือ Shift-Tab

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

กรณีการใช้งานอื่นๆ

นอกจากตัวอย่างข้างต้นแล้ว ยังมีสถานการณ์อื่นๆ อีกมากมายที่ฟีเจอร์นี้มีประโยชน์

การซ่อนองค์ประกอบ

บางครั้งผู้ใช้อาจโฟกัสที่รายการที่ต้องตั้งค่าเป็น visibility: hidden หรือ display: none ตัวอย่างขององค์ประกอบดังกล่าว ได้แก่ รายการที่คลิกได้ในภาพสไลด์ ใน Chrome เวอร์ชันก่อนหน้า การซ่อนรายการที่โฟกัสอยู่ในปัจจุบันด้วยวิธีนี้จะรีเซ็ตโฟกัสกลับไปที่จุดเริ่มต้นเริ่มต้น ซึ่งทำให้ภาพสไลด์ที่กล่าวถึงข้างต้นกลายเป็นกับดักที่น่ารำคาญสำหรับผู้ใช้ที่มีปัญหาเกี่ยวกับการเคลื่อนไหว แต่จุดเริ่มต้นโฟกัสตามลำดับจะแก้ปัญหานี้ได้ หากองค์ประกอบถูกซ่อนไว้ด้วยวิธีใดวิธีหนึ่งข้างต้น การกดแป้น Tab จะย้ายไปยังรายการถัดไปที่โฟกัสได้

ข้ามลิงก์

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

เว็บไซต์ยอดนิยมหลายแห่งใช้ลิงก์ข้าม แม้ว่าคุณอาจไม่เคยสังเกตเห็น

เนื่องจากลิงก์ข้ามเป็น Anchor ที่มีชื่อ ลิงก์ดังกล่าวจึงทํางานในลักษณะเดียวกับตัวอย่างสารบัญต้นฉบับ

ข้อควรระวังและการสนับสนุน

ปัจจุบันจุดเริ่มต้นของการไปยังส่วนต่างๆ ตามลำดับด้วยโฟกัสรองรับใน Chrome 50, Firefox และ Opera เท่านั้น จนกว่าเบราว์เซอร์ทั้งหมดจะรองรับ คุณยังคงต้องเพิ่ม tabindex="-1" (และนำเส้นขอบโฟกัสออก) ไปยังเป้าหมายของส่วนหัวที่มีชื่อ

สาธิต

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