1.3.2 의미 있는 순서

요구 사항

콘텐츠의 표시 순서가 의미에 영향을 주는 경우, 올바른 읽기 순서를 프로그램이 알 수 있어야 합니다. 화면낭독기는 CSS 배치가 아니라 DOM(소스 코드) 순서대로 읽으므로, CSS의 float, position, order, 그리드 배치 등으로 시각 순서를 바꾸었을 때 소스 순서와 의미가 어긋나지 않아야 합니다. 순서가 의미에 영향을 주지 않는 경우(예: 서로 독립된 사이드바 위치)는 해당하지 않습니다.

왜 필요한가요

소스 순서가 뒤섞이면 화면낭독기 사용자는 설명보다 답을 먼저 듣거나, 단계 3을 단계 1보다 먼저 듣게 됩니다. 사용자 스타일을 적용하거나 화면을 확대해 한 열로 바뀔 때도 같은 문제가 생깁니다.

도움받는 사용자

• 시각장애인(화면낭독기 사용자)
• 저시력 사용자(화면 확대 사용자)
• 인지·학습 장애가 있는 사용자

적용 방법

• 의미 있는 순서대로 HTML을 작성하고, 배치는 CSS로 하되 순서를 뒤집지 않습니다.
• CSS order나 그리드 배치로 시각 순서를 바꿀 때는 소스 순서와 읽기 순서가 같은지 확인합니다.
• 공백 문자나 <br>로 칸을 맞춰 단어 사이를 벌리지 않습니다(“안 녕 하 세 요”처럼 읽힙니다).

사례

<div style="display:flex; flex-direction:column-reverse">
  <p>3. 결제하기</p>
  <p>2. 배송지 입력</p>
  <p>1. 상품 선택</p>
</div>

자주 하는 실수

• CSS로 순서를 뒤집어 소스 순서와 화면 순서가 다르고, 의미가 달라집니다.
• 공백 문자로 글자 간격을 벌려 단어가 끊겨 읽힙니다.
• 레이아웃 표를 써서 표를 선형화하면 읽기 순서가 어긋납니다.

검사 방법

• CSS를 끄고 콘텐츠의 순서가 의미에 맞는지 확인합니다.
• 화면낭독기로 처음부터 끝까지 읽어 보며 순서를 확인합니다.

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 1.3.2 (새 창)