콘텐츠의 선형구조 검사 방법

어떤 기준에 해당하나요

한국 기준 (KWCAG 2.2)

7.3.1 콘텐츠의 선형구조

이해의 용이성

국제 기준 (WCAG 2.2)

1.3.1 정보와 관계 (A) ↗1.3.2 의미 있는 순서 (A) ↗

어떻게 검사하나요

CSS를 끄거나 스크린 리더로 읽었을 때 콘텐츠가 논리적 순서로 제공되는지 확인하세요. 시각적 배치(position, order 등)로만 순서를 만든 경우 실제 DOM 순서가 뒤섞여 있을 수 있습니다.

자동 검사로 잡히는 부분

이 항목은 6개 규칙으로 자동 판정합니다. 각 규칙에 위반 시 개선 방법이 붙어 있습니다.

• 목록(ul/ol) 안에 잘못된 요소가 있습니다 list

  <ul>/<ol>의 직계 자식은 <li>(및 script/template)만 허용됩니다. 다른 요소가 있으면 스크린 리더의 목록 탐색(항목 수 안내 등)이 깨집니다.

  <!-- 잘못된 예 -->
  <ul><div class="item">…</div></ul>
  <!-- 올바른 예 -->
  <ul><li class="item">…</li></ul>

• li가 목록 요소 밖에 있습니다 listitem

  <li>는 반드시 <ul>, <ol> 또는 role="list" 요소의 자식이어야 합니다.

• 정의 목록(dl)의 구조가 올바르지 않습니다 definition-list

  <dl>은 <dt>(용어)와 <dd>(설명)의 짝으로만 구성해야 합니다.

• dt/dd가 dl 밖에 있습니다 dlitem

  <dt>와 <dd>는 반드시 <dl> 안에서 사용하세요.

• 굵은 p 요소를 제목처럼 사용하고 있습니다 p-as-heading

  볼드·큰 글씨 <p>는 시각적으로만 제목입니다. 스크린 리더 사용자가 제목 단위로 탐색할 수 있도록 <h2>~<h6> 요소를 사용하세요.

  <!-- 잘못된 예 -->
  <p style="font-weight:bold;font-size:20px">서비스 안내</p>
  <!-- 올바른 예 -->
  <h2>서비스 안내</h2>

• 제목 레벨이 건너뛰어졌습니다 heading-order

  h1 다음에 h3가 오는 식으로 레벨을 건너뛰면 스크린 리더 사용자가 문서 구조를 파악하기 어렵습니다. 제목은 계층 순서대로(h1→h2→h3) 사용하고, 크기는 CSS로 조정하세요.