ซ่อนไว้ทางภาพจนกว่าจะได้รับโฟกัส

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

อย่าเลือกใช้ display none หรือ visibility hidden เพราะสิ่งเหล่านี้จะนำลิงก์ออกจากโครงสร้างการเข้าถึง ทำให้ไม่มีใครโฟกัสลิงก์ได้

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

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

จุดสำคัญคือสถานะ focus เมื่อ Tab ไปถึงลิงก์ CSS ของคุณจะคืนขนาดให้ลิงก์และนำกลับมาแสดงบนหน้าจอ

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

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

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

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

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

กด Tab หลังโหลดหน้าใหม่ ลิงก์ข้ามควรปรากฏขึ้นทันที กด Tab ออกจากลิงก์ แล้วลิงก์ควรหายไปอีกครั้ง ✅

วิธีใดซ่อนลิงก์ข้ามได้อย่างถูกต้องจนกว่าจะจำเป็นต้องใช้

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