WCAG 2.2의 리플로 기준은 세로로 읽는 내용을 가로 320 CSS 픽셀 너비에서도 정보와 기능을 잃지 않고 가로·세로 양방향 스크롤 없이 볼 수 있어야 한다고 정합니다. 단체 홈페이지에서 옆으로 밀어야 읽히는 곳을 찾고 고치는 순서를 정리했습니다.
WCAG 2.2의 리플로(Reflow) 기준은 세로로 읽는 내용을 가로 320 CSS 픽셀 너비에서도 정보와 기능을 잃지 않고 가로·세로 양방향 스크롤 없이 볼 수 있어야 한다고 정합니다. 단체 홈페이지의 활동 소식이나 후원 안내를 휴대폰으로 열었을 때 글줄이 화면 밖으로 넘쳐 한 줄을 읽을 때마다 옆으로 밀어야 한다면, 이 기준에 맞지 않는 곳이 있다는 신호입니다. 청주·충북에서 활동하는 단체라면 회원과 후원자가 휴대폰으로 소식을 여는 경우를 생각해, 좁은 화면에서 한 번 직접 읽어 볼 만합니다.
리플로 기준이 요구하는 것
WCAG 2.2의 성공 기준 1.4.10 리플로(AA 수준)는 세로로 스크롤하는 내용은 가로 320 CSS 픽셀, 가로로 스크롤하는 내용은 세로 256 CSS 픽셀에 해당하는 크기에서 두 방향 스크롤 없이 볼 수 있어야 한다고 정합니다. 이용이나 의미를 위해 두 방향 배치가 필요한 부분은 예외입니다.
W3C의 리플로 해설은 이 기준을 다음처럼 풀어 설명합니다.
- 320 CSS 픽셀은 가로 1280 CSS 픽셀 화면을 400%로 확대한 너비에 해당합니다.
- 글줄이 화면 가장자리를 넘으면 이용자는 한 줄씩 읽을 때마다 앞뒤로 스크롤해야 하고, 읽던 자리를 놓치기 쉬워 몸과 머리의 부담이 크게 늘어납니다.
- 반응형 디자인으로 내용의 배치를 바꾸거나 위치를 옮기는 것은, 이용자가 그 내용에 여전히 닿을 수 있다면 정보나 기능을 잃은 것으로 보지 않습니다.
- 이해에 필요한 지도와 도표, 영상, 게임, 발표 자료, 데이터 표(개별 칸은 제외)는 두 방향 배치가 필요한 예로 듭니다.
AI로 생성한 개념 이미지. 실제 단체 활동 사진이 아닙니다.
표와 이미지는 그 부분 안에서만 넘치게 합니다
해설은 표처럼 예외에 해당하는 부분이 있더라도 두 방향 스크롤은 그 부분에만 두는 것이 이용자에게 좋다고 설명합니다. 예외 부분 하나 때문에 페이지 전체에 불필요한 가로 스크롤 막대가 생기면, 이용자는 화면 밖에 다른 내용이 더 있다고 여기고 찾아 헤맬 수 있다는 것입니다. 데이터 표 자체는 예외이지만 표 안의 각 칸은 여전히 리플로를 지켜야 한다고 적혀 있습니다.
해설이 참고 기법으로 소개하는 항목 가운데에는 CSS의 최대 너비와 높이로 이미지를 화면 안에 맞추는 방법(C37)이 있습니다. 반대로 화면이 좁아졌을 때 내용이 사라져 이용할 수 없게 되는 경우는 이 기준의 실패 사례(F102)로 들고 있습니다. 휴대폰 화면에서 메뉴나 후원 안내 일부를 숨기기만 하고 다른 곳에서 열 수 없게 만들면 이 사례에 해당할 수 있습니다.
MDN의 viewport 메타 태그 안내는 화면 너비를 기기 너비에 맞추는 width=device-width 설정을 권장 설정으로 소개합니다. 또 user-scalable=no로 확대를 막으면 시력이 약한 사람이 페이지 내용을 읽고 이해하지 못하게 된다고 경고합니다.
단체 홈페이지에서 점검하는 순서
나누지오의 운영 권장은 방문자가 가장 자주 여는 페이지부터 좁은 화면에서 직접 읽어 보고, 넘치는 부분을 하나씩 고치는 것입니다. 활동 소식이나 후원 안내를 올리는 담당자가 글을 올린 뒤 휴대폰으로 한 번 열어 보는 일을 자료 정리 업무의 한 단계로 정해 두면, 넘치는 곳을 회원보다 먼저 찾을 수 있습니다.
AI로 생성한 개념 이미지. 실제 단체 사무실 사진이 아닙니다.
- 컴퓨터 브라우저 창의 가로를 1280 CSS 픽셀 정도로 맞추고 400%로 확대하거나, 휴대폰에서 직접 페이지를 엽니다.
- 단체 소개, 활동 소식, 후원 안내, 자원활동 신청 페이지를 차례로 열어 글줄이 화면 안에서 줄바꿈되는지 확인합니다.
- 가로 스크롤 막대가 생기면 어떤 상자나 이미지가 화면보다 넓게 고정되어 있는지 제작 담당자와 함께 찾습니다.
- 연간 활동 표처럼 넓은 표는 표 부분 안에서만 가로로 밀리고, 표 밖의 글은 화면 안에서 줄바꿈되는지 확인합니다.
- 좁은 화면에서 사라진 메뉴나 버튼이 없는지, 숨긴 내용을 다른 버튼으로 열 수 있는지 확인합니다.
- 페이지 소스의 viewport 메타 태그에
user-scalable=no가 들어 있지 않은지 확인합니다.
이 글은 청주·충북 지역 단체를 포함한 일반적인 비영리 단체 홈페이지의 화면 구성을 W3C와 MDN 문서에 따라 정리한 것이며, 특정 단체 홈페이지를 진단한 결과가 아닙니다. 웹 접근성 인증이나 법적 의무 충족 여부는 별도 기준과 절차로 확인해야 합니다.