5.3.2 콘텐츠의 선형구조

요구 사항

콘텐츠는 보조기술 사용자가 맥락을 이해할 수 있도록 논리적인 순서로 제공합니다.

• 선형구조 유지: 웹 페이지의 모든 콘텐츠는 내용을 이해할 수 있도록 선형구조(코드에 나열된 순서)로 작성합니다.
• 내용·표현·기능 분리: 스타일 시트로 화면 배치를 바꾸더라도 코드상의 나열 순서는 맥락에 맞게 논리적이어야 합니다.

표준은 레이어 팝업도 이 항목과 6.1.2를 위반하지 않도록 구현해야 한다고 정의합니다.

KWCAG 2.1의 해당 항목: 7.3.1 콘텐츠의 선형 구조(7.3 콘텐츠의 논리성 지침)

왜 필요한가요

화면낭독기와 키보드는 코드 순서대로 콘텐츠를 전달합니다. 화면에서는 제목 아래 본문이 보여도 코드에서 본문이 먼저 나오면 의미가 뒤섞입니다. 논리적인 순서는 스타일이 꺼진 환경과 지적·학습장애가 있는 사용자의 이해에도 도움이 됩니다.

도움받는 사용자

• 시각장애인(화면낭독기 사용자)
• 지적장애·언어장애·학습장애가 있는 사용자
• 사용자 스타일 시트나 읽기 모드를 쓰는 사용자

적용 방법

코드 순서를 화면에 보이는 읽기 순서와 맞추고, 배치는 CSS로 바꿉니다. CSS order, flex-direction: row-reverse, 그리드 배치, 절대 위치로 시각 순서만 바꾸면 코드 순서와 어긋날 수 있으니 주의합니다.

<!-- 코드 순서: 상품명 → 가격 → 설명 → 구매 버튼 -->
<article class="product">
  <h3>무선 키보드</h3>
  <p class="price">39,000원</p>
  <p>저소음 키, 블루투스 3대 연결</p>
  <button type="button">장바구니 담기</button>
</article>

레이어 팝업(대화상자)은 문서 끝에 붙이지 말고 여는 버튼 근처에 두거나, 열릴 때 초점을 대화상자로 옮기고 닫힐 때 원래 버튼으로 돌려 줍니다. 대화상자 패턴과 랜드마크·제목 가이드를 참고하세요.

사례

<div class="card">
  <h3>공지사항</h3>
  <img src="notice.png" alt="" class="card-img">
  <p>시스템 점검 안내</p>
</div>

<div class="box">
  <p>점검 시간은 02:00~04:00입니다.</p>
  <h3 style="position:absolute; top:0">점검 안내</h3>
</div>

자주 하는 실수

• CSS 위치 지정으로 화면 순서와 코드 순서가 크게 다릅니다.
• 레이어 팝업 코드가 문서 맨 끝에 있어 화면낭독기 사용자가 팝업 내용을 찾지 못합니다.
• 여러 단으로 나뉜 본문이 코드에서 행 단위로 섞여 있습니다.
• 공백 문자나 줄바꿈 태그로 글자 간격을 맞춰 단어가 쪼개져 읽힙니다.

검사 방법

• CSS를 끄거나 읽기 모드로 보았을 때 내용이 논리적인 순서로 나열되는지 확인합니다.
• 화면낭독기의 가상 커서(아래 방향키)로 처음부터 읽으며 순서가 맥락에 맞는지 확인합니다.
• 레이어 팝업이 열린 직후 팝업 내용을 바로 읽을 수 있는지 확인합니다.

다른 지침의 대응 항목