1.4.10 리플로우

요구 사항

정보나 기능을 잃지 않고, 두 방향으로 스크롤하지 않아도 되도록 콘텐츠를 표시해야 합니다.

• 세로로 스크롤하는 콘텐츠(일반 웹 페이지)는 너비 320 CSS 픽셀에서 가로 스크롤이 생기지 않아야 합니다. 1280px 너비 화면을 400% 확대한 것과 같습니다.
• 가로로 스크롤하는 콘텐츠(세로쓰기 등)는 높이 256 CSS 픽셀에서 세로 스크롤이 생기지 않아야 합니다.

예외: 이용과 의미에 2차원 배치가 꼭 필요한 부분(지도, 다이어그램, 동영상, 게임, 프레젠테이션, 데이터 표, 작업 중 툴바가 계속 보여야 하는 인터페이스)은 양방향 스크롤이 허용됩니다.

왜 필요한가요

화면을 크게 확대해 보는 저시력 사용자는 한 줄을 읽을 때마다 좌우로 스크롤해야 하면 읽기가 매우 힘들어집니다. 리플로우가 되면 세로 스크롤만으로 읽을 수 있습니다.

도움받는 사용자

• 저시력 사용자(화면 확대 사용자)
• 고령자
• 작은 화면 사용자

적용 방법

• 반응형 웹(미디어 쿼리, 플렉스박스, 그리드)으로 좁은 화면에서 한 열로 배치합니다.
• 고정 너비(width: 1200px) 대신 max-width와 상대 단위를 씁니다.
• 긴 URL·코드는 overflow-wrap: anywhere로 줄바꿈하고, 넓은 데이터 표는 표 영역만 가로 스크롤되게 합니다.
• 고정(sticky) 머리글이 확대 시 화면 대부분을 가리지 않게 합니다.

.layout { display: grid; grid-template-columns: 1fr; }
@media (min-width: 48em) {
  .layout { grid-template-columns: 16rem 1fr; }
}
.table-wrap { overflow-x: auto; } /* 데이터 표는 예외로 표 영역만 스크롤 */

자주 하는 실수

• 본문 컨테이너에 고정 너비를 지정해 확대 시 가로 스크롤이 생깁니다.
• 좁은 화면에서 메뉴나 버튼이 화면 밖으로 밀려나 사용할 수 없습니다.
• 확대하면 고정 머리글·하단 배너가 화면 대부분을 덮습니다.

검사 방법

• 브라우저 창 너비를 1280px로 두고 400%로 확대하거나, 개발자 도구에서 뷰포트 너비를 320px로 설정합니다.
• 가로 스크롤 없이 모든 콘텐츠와 기능을 이용할 수 있는지 확인합니다(예외 콘텐츠 제외).

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 1.4.10 (새 창)