Chrome 137 เพิ่ม CSS `reading-flow`: การนำทางด้วยคีย์บอร์ดตามลำดับการมองเห็น

• ตั้งแต่ Chrome 137 เป็นต้นไป มีการเพิ่ม พร็อพเพอร์ตี CSS reading-flow และ reading-order แบบใหม่ เพื่อแก้ปัญหา ลำดับเลย์เอาต์ที่มองเห็นกับลำดับโฟกัสของคีย์บอร์ดไม่สอดคล้องกัน
• เลย์เอาต์แบบ flex/grid เดิมอาจทำให้ ลำดับ DOM และลำดับที่มองเห็นไม่ตรงกัน จึงก่อให้เกิด ความสับสนสำหรับผู้ใช้เครื่องมือช่วยการเข้าถึงหรือการนำทางด้วยคีย์บอร์ด
• reading-flow ควบคุมการย้ายโฟกัสตามลำดับเลย์เอาต์ที่มองเห็น ส่วน reading-order ใช้กำหนดลำดับแบบแมนนวลให้แต่ละรายการได้
• ใช้งานได้ตรงไปตรงมาและเอื้อต่อการเข้าถึงมากกว่าวิธี tabindex เดิม, พร้อมกำหนดขอบเขตการนำทางภายในเลย์เอาต์แบบโลคัล
• มีตัวอย่างและแบบฝึกหัดเพิ่มเติมที่ chrome.dev

---

reading-flow คืออะไร?

• ใช้กำหนดลำดับที่องค์ประกอบในเลย์เอาต์จะ ได้รับโฟกัสตามลำดับการนำทาง
• ค่าเริ่มต้น: normal → ใช้ลำดับ DOM เดิมตามปกติ
• ตัวอย่างการใช้งาน:
  • Flex: flex-visual, flex-flow
  • Grid: grid-rows, grid-columns, grid-order

  .box {  
    reading-flow: flex-visual;  
  }  
  

• สามารถย้ายโฟกัสตาม ตำแหน่งที่มองเห็นได้ แทนที่จะอิงตามลำดับ DOM

reading-order: การกำหนดลำดับแบบแมนนวล

• เมื่อตั้งค่า reading-flow: source-order จะสามารถ กำหนดลำดับตัวเลขให้แต่ละรายการ ได้

  .wrapper {  
    reading-flow: source-order;  
  }  
  .top {  
    reading-order: -1;  
  }  
  

• สามารถ ปรับลำดับความสำคัญของลำดับการนำทาง ได้ตามค่าลำดับที่กำหนด

เปรียบเทียบกับวิธี tabindex แบบเดิม

• tabindex อาจก่อให้เกิด ปัญหาความไม่สอดคล้องกับเครื่องมือช่วยการเข้าถึง
• อาจเกิด ปัญหาโฟกัสกระโดด จากค่าที่ซ้ำกันหรือระหว่างองค์ประกอบภายนอก
• reading-flow กำหนดขอบเขตโฟกัสเพื่อ จำกัดการนำทางภายใน และทำให้ การนำทางสองทิศทาง ชัดเจนขึ้น
• ค่าบวกของ tabindex จะถูก ละเว้น แต่ยังคงตั้งค่า tabindex แยกให้แต่ละองค์ประกอบภายในได้

สรุป

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