Chrome 137 giới thiệu CSS `reading-flow`: điều hướng bàn phím theo thứ tự hiển thị trực quan

• Từ Chrome 137, các thuộc tính CSS reading-flow và reading-order mới được giới thiệu để giải quyết vấn đề thứ tự bố cục trực quan không khớp với thứ tự focus khi điều hướng bằng bàn phím
• Các bố cục flex/grid trước đây có thể khiến thứ tự DOM và thứ tự hiển thị trực quan lệch nhau, gây nhầm lẫn cho người dùng khi dùng công cụ hỗ trợ tiếp cận hoặc điều hướng bằng bàn phím
• reading-flow điều khiển việc di chuyển focus dựa trên thứ tự bố cục trực quan, còn reading-order cho phép chỉ định thứ tự thủ công cho từng mục
• Trực quan hơn so với cách dùng tabindex trước đây và có lợi hơn cho khả năng truy cập, đồng thời giới hạn phạm vi điều hướng cục bộ bên trong bố cục
• Nhiều ví dụ và bài thực hành được cung cấp tại chrome.dev

---

reading-flow là gì?

• Chỉ định thứ tự mà các phần tử trong bố cục sẽ nhận focus theo thứ tự điều hướng
• Giá trị mặc định: normal → giữ nguyên thứ tự DOM hiện có
• Ví dụ sử dụng:
  • Flex: flex-visual, flex-flow
  • Grid: grid-rows, grid-columns, grid-order

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

• Có thể di chuyển focus dựa trên vị trí hiển thị trực quan thay vì thứ tự DOM

reading-order: chỉ định thứ tự thủ công

• Khi đặt reading-flow: source-order, có thể gán thứ tự bằng số cho từng mục

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

• Có thể điều chỉnh mức ưu tiên của thứ tự điều hướng theo giá trị thứ tự đã chỉ định

So sánh với cách dùng tabindex hiện có

• tabindex có nguy cơ gây ra vấn đề không đồng nhất với các công cụ hỗ trợ tiếp cận
• Có thể phát sinh vấn đề nhảy focus giữa các giá trị trùng lặp hoặc giữa các phần tử bên ngoài
• reading-flow xác định phạm vi focus để giới hạn điều hướng bên trong và làm rõ điều hướng hai chiều
• Giá trị tabindex dương sẽ bị bỏ qua, nhưng vẫn có thể đặt tabindex riêng cho các phần tử bên trong

Tóm tắt

• reading-flow là cách tiếp cận mới nhất để chỉ định thứ tự focus dựa trên bố cục
• Sự đồng nhất giữa trật tự trực quan và điều hướng bàn phím giúp cải thiện khả năng truy cập và tránh gây nhầm lẫn cho người dùng
• Khi áp dụng trong thực tế, nó mang lại trải nghiệm dễ dự đoán và nhất quán hơn so với tabindex hiện có