콘텐츠의 선형구조

무엇을 요구하나요?

콘텐츠는 의미를 이해할 수 있는 순서로 제공되어야 합니다. 화면 낭독기는 CSS 배치와 상관없이 HTML에 적힌 순서대로 읽습니다. 그래서 HTML 순서와 화면에 보이는 순서가 다르면, 화면 낭독기 사용자는 질문보다 답을 먼저 듣거나 제목보다 본문을 먼저 듣게 됩니다.

자주 틀리는 예

1. CSS로 보이는 순서만 바꿈

<div class="card" style="display:flex; flex-direction:column-reverse">
  <p>가을 신상품 최대 30% 할인</p>
  <h3>가을 세일</h3>
</div>

<div class="card">
  <h3>가을 세일</h3>
  <p>가을 신상품 최대 30% 할인</p>
</div>

2. 모달·팝업 HTML이 문서 맨 끝에 있음

버튼 바로 옆에 열리는 레이어 팝업의 HTML이 페이지 맨 끝에 있으면, 화면 낭독기 사용자는 팝업 내용을 찾기 어렵습니다. 열 때 초점을 팝업 안으로 옮기거나, 관련 버튼 바로 뒤에 HTML을 두세요. (6.1.2 초점 이동과 표시 참고)

3. 화면에서 숨겼는데 읽히는 콘텐츠

.tab-panel.inactive { opacity: 0; height: 0; }

.tab-panel.inactive { display: none; }

opacity: 0이나 높이 0으로만 숨기면 보이지 않는 내용이 순서 중간에 끼어 읽힙니다.

4. 레이아웃용 표

표로 화면을 배치하면 칸 순서(왼쪽→오른쪽, 위→아래)대로 읽혀 의미 순서가 깨지기 쉽습니다. 레이아웃은 CSS로 만드세요. (5.3.1 표의 구성 참고)

확인하는 방법

1. 브라우저에서 CSS를 끄고(개발자 도구 또는 확장 프로그램) 위에서 아래로 읽어 보세요. 의미가 자연스럽게 이어져야 합니다.
2. 화면 낭독기로 처음부터 끝까지 읽기(NVDA: Insert+↓, VoiceOver: VO+A)를 실행해 순서를 들어보세요.
3. 북마클릿의 탭 순서 번호가 화면 흐름과 크게 어긋나면 HTML 순서를 의심해 보세요.