크롬 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보다 더 예측 가능하고 일관된 경험 제공