# 크롬 137 부터 CSS `reading-flow` 도입 : 시각적 순서를 따르는 키보드 탐색

> Clean Markdown view of GeekNews topic #20806. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=20806](https://news.hada.io/topic?id=20806)
- GeekNews Markdown: [https://news.hada.io/topic/20806.md](https://news.hada.io/topic/20806.md)
- Type: news
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-05-10T09:46:02+09:00
- Updated: 2025-05-10T09:46:02+09:00
- Original source: [developer.chrome.com](https://developer.chrome.com/blog/reading-flow)
- Points: 6
- Comments: 0

## Summary

**CSS `reading-flow` 및 `reading-order` 속성**이 도입되어, DOM 순서와 **시각적 순서 간 불일치로 인한 접근성 문제**를 해결합니다.  
이 기능들은 **레이아웃 기반 포커스 이동**과 **개별 탐색 순서 지정**을 가능하게 하여 키보드 탐색 시 혼란을 줄입니다.  
**기존 tabindex 방식보다 직관적이고 예측 가능한 포커스 흐름**을 구현할 수 있습니다.  
**접근성 향상 및 사용자 경험 개선**에 중요한 역할을 합니다.

## Topic Body

- Chrome 137부터 새롭게 도입된 **CSS `reading-flow` 및 `reading-order` 속성**은 **시각적 레이아웃과 키보드 포커스 순서가 불일치하는 문제**를 해결함  
- 기존 flex/grid 레이아웃은 **DOM 순서와 시각적 순서가 어긋날 수 있어**, **접근성 도구나 키보드 탐색 시 사용자 혼란** 유발  
- `reading-flow`는 시각적 레이아웃 순서를 기준으로 포커스 이동을 제어하고, `reading-order`는 항목별 수동 순서 지정 가능  
- **기존 tabindex 방식보다 직관적이고 접근성에 유리**, 레이아웃 내부 탐색을 로컬로 스코프화함  
- 다양한 예제 및 실습은 [chrome.dev](https://chrome.dev/reading-flow-examples/)에서 제공됨  
  
---  
  
### `reading-flow`란?  
  
- 레이아웃에서 요소들이 **탐색 순서에 따라 포커스를 받을 순서**를 지정  
- 기본값: `normal` → 기존 DOM 순서 그대로  
- 사용 예시:  
  - **Flex**: `flex-visual`, `flex-flow`  
  - **Grid**: `grid-rows`, `grid-columns`, `grid-order`  
  ```css  
  .box {  
    reading-flow: flex-visual;  
  }  
  ````  
- DOM 순서가 아닌 **시각적 위치 기반으로 포커스 이동** 가능  
  
### `reading-order`: 수동 순서 지정  
  
- `reading-flow: source-order` 설정 시 각 항목에 **숫자 순서 부여 가능**  
  ```css  
  .wrapper {  
    reading-flow: source-order;  
  }  
  .top {  
    reading-order: -1;  
  }  
  ```  
- 지정된 순서 값에 따라 **탐색 순서 우선순위 조정 가능**  
  
### 기존 `tabindex` 방식과의 비교  
  
* `tabindex`는 접근성 도구와의 **비일치 문제** 발생 우려  
* 중복 값이나 외부 요소 간 **포커스 점프 문제** 발생  
* `reading-flow`는 포커스 스코프를 정의해 **내부 탐색을 제한**하고 **양방향 탐색**을 명확히 함  
* 긍정 tabindex는 **무시**되며, 내부 요소엔 여전히 개별적으로 tabindex 설정 가능  
  
### 요약  
  
* `reading-flow`는 **레이아웃 중심의 포커스 순서 지정**을 위한 최신 접근 방식  
* **시각적 질서와 키보드 탐색 일치**로 **접근성 향상 및 사용자 혼란 방지**  
* 실무 적용 시, 기존 tabindex보다 더 **예측 가능하고 일관된 경험 제공**

## Comments



_No public comments on this page._