ฟีเจอร์ "จุดเริ่มต้นของการนำทางโฟกัสตามลำดับ" จะกำหนดจุดที่เราเริ่มค้นหาองค์ประกอบที่โฟกัสได้สำหรับการนำทางโฟกัสตามลำดับ ([แท็บ] หรือ [Shift-Tab]) เมื่อไม่มีพื้นที่ที่โฟกัส ซึ่งเป็นประโยชน์อย่างยิ่งสำหรับฟีเจอร์การช่วยเหลือพิเศษ เช่น "ข้ามลิงก์" และการจัดการโฟกัสในเอกสาร
HTML มอบการสนับสนุนในตัวมากมายสำหรับรับมือกับการโต้ตอบด้วยแป้นพิมพ์ ซึ่งหมายความว่าการเขียนหน้าเว็บซึ่งสามารถใช้ผ่านแป้นพิมพ์นั้นง่ายมาก ไม่ว่าความบกพร่องทางการเคลื่อนไหวจะทำให้เราไม่สามารถใช้เมาส์ได้หรือไม่ หรือเราสามารถนำมือออกจากแป้นพิมพ์ได้อย่างสิ้นเชิงโดยสิ้นเปลืองเวลาหลายมิลลิวินาทีอันมีค่า
การจัดการแป้นพิมพ์จะปรับเปลี่ยนโฟกัสตามโฟกัสซึ่งกำหนดตำแหน่งที่เหตุการณ์ของแป้นพิมพ์จะไปในหน้า มีบางสถานการณ์ที่ก่อนหน้านี้เราต้องทำงานเพิ่มเติม เพื่อทำให้สิ่งต่างๆ ทำงานได้ดีสำหรับผู้ใช้แป้นพิมพ์ เมธอด focus() ช่วยให้เราจัดการโฟกัสได้โดยเลือกองค์ประกอบที่ต้องการโฟกัสตามการดำเนินการของผู้ใช้ อย่างไรก็ตาม แนวทางปฏิบัติแนะนำนี้จะรับผลกระทบจาก Gocha มากมายและต้องใช้การแฮ็ก 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>
ถ้าผมเคยใช้คีย์บอร์ด (และรู้จักอาหารออสเตรเลีย) การทำงานในครั้งต่อๆ ไปของฉันจะออกมาเป็นดังนี้
- กด
Tab2 ครั้งเพื่อโฟกัสลิงก์สูตรอาหาร - กด
Enterเพื่อข้ามไปยังส่วนสูตรอาหาร - กด
Tabอีกครั้งเพื่อโฟกัสลิงก์ "อ่านเพิ่มเติม"
มาดูการทำงานใน Chrome 49 กัน
ไม่เป็นอย่างที่คิดไว้ใช่ไหม
แทนที่จะโฟกัสที่ลิงก์ "อ่านเพิ่มเติม" ให้กด Tab สำหรับเวลาสุดท้ายได้ย้ายโฟกัสไปที่รายการถัดไปในสารบัญ เนื่องจากนักพัฒนาซอฟต์แวร์ไม่ได้ตั้งค่า tabindex="-1" ในส่วนหัวให้โฟกัสได้ การคลิกจุดยึดที่ตั้งชื่อ #recipes จึงไม่ย้ายโฟกัส ข้อผิดพลาดนี้เล็กๆ น้อยๆ และไม่ใช่เรื่องใหญ่หากคุณเป็นผู้ใช้เมาส์ แต่อาจเป็นเรื่องที่ใหญ่มากหากคุณใช้แป้นพิมพ์หรือเปลี่ยนผู้ใช้อุปกรณ์ ลองพิจารณาปริมาณของการเชื่อมต่อระหว่างหน้า Wikipedia โดยทั่วไปไหม คงน่าหงุดหงิดที่ต้องคอยแท็บกลับไปกลับมาผ่าน Anchor ทั้งหมดอยู่ตลอด!
มาดูประสบการณ์การใช้งาน Chrome 50 กัน
ว้าว นี่คือสิ่งที่เราต้องการจริงๆ และเหนือสิ่งอื่นใดคือเราไม่จำเป็นต้องเปลี่ยนโค้ดของเรา เบราว์เซอร์เพิ่งจะรู้ว่าควรโฟกัสตรงจุดไหนโดยดูจากตำแหน่งที่เราอยู่ในเอกสาร
หลักการทำงาน
ก่อนที่จะใช้จุดเริ่มต้นของโฟกัส โฟกัสจะย้ายจากองค์ประกอบที่โฟกัสก่อนหน้าหรือที่ด้านบนของหน้าเสมอ ซึ่งหมายความว่าการเลือกสิ่งที่ต้องการโฟกัสในลำดับต่อไปอาจเกี่ยวข้องกับการย้ายโฟกัสไปยังสิ่งที่ไม่ควรโฟกัสได้จริงๆ เช่น องค์ประกอบคอนเทนเนอร์หรือส่วนหัว ซึ่งทำให้เกิดอาการแปลกๆ ทุกรูปแบบ รวมถึงการแสดงวงแหวนโฟกัสหากคุณคลิกองค์ประกอบดังกล่าวเพียงอย่างใดอย่างหนึ่งเท่านั้น
จุดเริ่มต้นโฟกัสตรงตามชื่อที่แนะนำ เป็นกลไกสำหรับแนะนำว่าจะเริ่มค้นหาองค์ประกอบที่โฟกัสได้ถัดไปอย่างไรเมื่อเรากด Tab หรือ Shift-Tab
สามารถตั้งค่าได้หลายอย่าง เช่น
หากมีสิ่งใดโฟกัส ก็จะเป็นจุดเริ่มต้นการไปยังส่วนต่างๆ ของโฟกัสเหมือนก่อนหน้านี้
และเช่นเดียวกับก่อนหน้านี้ ถ้าไม่มีสิ่งใดกำหนดจุดเริ่มต้นการนำทางของโฟกัสไว้ ก็จะเป็น document ปัจจุบัน หรือ dialog ที่ใช้งานอยู่ในปัจจุบัน ถ้ามีและรองรับ
หากเราไปยังส่วนย่อยของหน้าอย่างเช่นในตัวอย่างข้างต้น ระบบจะกำหนดจุดเริ่มต้นของโฟกัส
นอกจากนี้ หากเราคลิกองค์ประกอบใดก็ตามในหน้าเว็บ ไม่ว่าจะโฟกัสได้หรือไม่ก็ตาม ซึ่งจะเป็นการตั้งจุดเริ่มต้นของการนำทางที่โฟกัส
สุดท้าย หากองค์ประกอบซึ่งเป็นจุดเริ่มต้นโฟกัสถูกนำออกจาก DOM องค์ประกอบหลักจะกลายเป็นจุดเริ่มต้นโฟกัส หมดใจแล้ว
Use Case อื่นๆ
นอกเหนือจากตัวอย่างข้างต้นแล้ว ยังมีสถานการณ์อื่นๆ อีกหลายอย่างที่ฟีเจอร์นี้มีประโยชน์
การซ่อนองค์ประกอบ
อาจมีบางครั้งที่ผู้ใช้โฟกัสไปที่รายการที่ต้องตั้งค่าเป็น visibility: hidden หรือ display: none ตัวอย่างเช่น รายการที่คลิกได้ภายในภาพสไลด์ ใน Chrome เวอร์ชันก่อนหน้า การซ่อนรายการที่โฟกัสอยู่ในปัจจุบันในลักษณะนี้จะรีเซ็ตโฟกัสกลับไปที่จุดเริ่มต้น ซึ่งเปลี่ยนภาพหมุนที่กล่าวถึงข้างต้นให้กลายเป็นกับดักสำหรับผู้ใช้ที่มีความบกพร่องด้านการเคลื่อนไหว ในกรณีนี้จะไม่เป็นเช่นนั้นอีกต่อไปด้วยจุดเริ่มต้นการโฟกัสตามลำดับ หากองค์ประกอบซ่อนอยู่โดยใช้วิธีใดวิธีหนึ่งข้างต้น การกดปุ่ม Tab จะย้ายไปยังรายการที่โฟกัสได้ถัดไป
ข้ามลิงก์
ลิงก์ข้ามคือจุดยึดที่มองไม่เห็นซึ่งเข้าถึงได้ทางแป้นพิมพ์เท่านั้น โฆษณาเหล่านี้ช่วยให้ผู้ใช้ "ข้าม" องค์ประกอบการนำทางเพื่อข้ามไปยังเนื้อหาของหน้าเว็บได้โดยตรง และมีประโยชน์อย่างยิ่งสำหรับแป้นพิมพ์และเปลี่ยนผู้ใช้อุปกรณ์ ตามที่อธิบายไว้ในเว็บไซต์ WebAIM
เว็บไซต์ยอดนิยมจำนวนมากใช้ลิงก์การข้าม อย่างไรก็ตาม คุณอาจไม่เคยสังเกตเห็นลิงก์ดังกล่าวเลย
เนื่องจากลิงก์ข้ามมีชื่อว่า Anchor สิ่งต่างๆ จะทำงานในลักษณะเดียวกันกับตัวอย่างสารบัญดั้งเดิมของเรา
ข้อควรระวังและการสนับสนุน
ขณะนี้จุดเริ่มต้นของการนำทางโดยโฟกัสตามลำดับได้รับการสนับสนุนเฉพาะใน Chrome 50, Firefox และ Opera คุณจะยังต้องเพิ่ม tabindex="-1" (และนำโครงร่างโฟกัสออก) ไปยังเป้าหมาย Anchor ที่ตั้งชื่อไว้จนกว่าจะรองรับในทุกเบราว์เซอร์
เดโม
จุดเริ่มต้นของการนำทางตามโฟกัสตามลำดับเป็นส่วนเติมเต็มที่ดีให้แก่ชุดการช่วยเหลือพิเศษของเบราว์เซอร์เบื้องต้น คุณสามารถเรียนรู้ได้อย่างง่ายดายและช่วยให้เราสามารถนำโค้ดออกจากแอปพลิเคชันของเราไปพร้อมๆ กับการปรับปรุงประสบการณ์สำหรับผู้ใช้ของเราไปพร้อมกัน ชนะ 2 เท่า ดูการสาธิตเพื่อสำรวจฟีเจอร์นี้ในเชิงลึก