reading-flow와 reading-order는 플렉스·그리드에서 시각적 순서와 키보드 이동(탭) 순서가 어긋나는 문제를 CSS만으로 바로잡는 속성입니다. order나 flex-direction: row-reverse로 화면상 배치를 바꾸면 눈에 보이는 순서는 달라져도 탭 순서는 여전히 DOM 순서를 따르는데, 이 불일치를 정리해 줍니다.
접근성에서 이건 은근히 큰 함정입니다. 나도 카드 정렬을 order로 재배치했다가, 스크린리더 사용자와 키보드 사용자에게는 순서가 뒤죽박죽으로 읽힌다는 지적을 받고서야 문제를 알았습니다.
왜 어긋나는가
CSS의 시각적 재배치는 '그림'만 옮깁니다. 접근성 트리와 포커스 이동은 여전히 소스 코드(DOM) 순서를 봅니다. 그래서 order: -1로 3번 카드를 맨 앞으로 당겨도, 탭을 누르면 1 → 2 → 3(앞으로 온 그 카드)이 아니라 원래 DOM 순서대로 이동합니다. 보이는 것과 만지는 것이 따로 노는 거죠.
reading-flow — 흐름 기준 바꾸기
플렉스·그리드 컨테이너에 reading-flow를 주면, 포커스 이동 순서를 시각적 배치나 소스 순서 중 무엇을 따를지 지정합니다.
| 값 | 의미 |
|---|---|
normal | 기본값. 소스(DOM) 순서를 따름 |
flex-visual / grid-order | 화면에 보이는 순서대로 포커스 |
source-order | order를 무시하고 소스 순서 고정 |
.cards {
display: flex;
flex-wrap: wrap;
reading-flow: flex-visual; /* 눈에 보이는 순서 = 탭 순서 */
}이 한 줄로 시각 배치와 포커스 순서가 일치합니다. order로 자유롭게 재배치하면서도 접근성을 지킬 수 있게 된 거죠.
reading-order — 개별 미세 조정
흐름 전체가 아니라 특정 항목만 앞뒤로 당기고 싶으면 자식에 reading-order 정수를 줍니다. 작을수록 먼저 읽힙니다. 원리는 order와 비슷하지만 이쪽은 레이아웃이 아니라 읽기·포커스 순서에만 영향을 줍니다.
.promo { reading-order: -1; } /* 먼저 읽히게 */
.footer { reading-order: 1; } /* 나중에 */tabindex로 하던 걸 대체
예전엔 이 문제를 tabindex로 억지로 맞췄습니다. 그런데 양수 tabindex는 페이지 전체 탭 순서를 헝클어뜨리는 안티패턴이라, 하나 잘못 넣으면 문서 전체가 꼬였습니다. reading-flow는 컨테이너 안에서만 국소적으로 작동해 이 부작용이 없습니다.
보이는 순서와 조작 순서를 억지로 맞추던 시절의 tabindex 지옥에서 벗어나게 해주는 속성입니다. 다만 남용하면 오히려 혼란을 주니, 시각 배치를 바꿨을 때만 쓰세요.
주의할 점
- 새 기능 — 2025년 크로미엄 계열에서 먼저 들어왔고 다른 브라우저는 도입 중입니다. 미지원 브라우저는 그냥 기본(소스 순서)으로 동작하니 점진적 향상으로 씁니다.
- 근본 해법은 DOM 순서 — 가능하면 애초에 의미 있는 순서로 마크업하는 게 최선입니다. 이 속성은 레이아웃상 불가피할 때의 보정 수단으로 보세요.
자주 묻는 질문
order와 reading-order는 뭐가 다른가요?
order는 화면에 그려지는 시각적 위치를 바꿉니다. reading-order는 화면 위치는 그대로 두고 포커스·읽기 순서만 바꿉니다. 반대 방향의 도구라, 둘을 함께 써서 '보이는 위치는 A로, 읽는 순서는 B로'처럼 분리 제어할 수 있습니다.
tabindex를 아예 안 써도 되나요?
포커스 순서 조정 목적이라면 reading-flow로 대부분 대체됩니다. 다만 원래 포커스를 못 받는 요소를 포커스 가능하게 만들 땐 여전히 tabindex="0"이나 tabindex="-1"이 필요합니다. 역할이 겹치지 않습니다.
지금 프로덕션에 넣어도 되나요?
넣어도 괜찮습니다. 미지원 브라우저에서는 아무 효과 없이 기본 순서로 동작할 뿐 깨지지 않기 때문입니다. 단, 이 속성에만 의존하지 말고 마크업 순서 자체를 최대한 논리적으로 유지하는 걸 기본으로 삼으세요.
댓글 0