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

KWCAG 2.2 「콘텐츠의 선형구조」 항목을 점검하는 방법입니다. 자동 검사가 일부를 잡아내지만, 나머지는 사람이 직접 확인해야 합니다.

어떤 기준에 해당하나요

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로 조정하세요.

주소만 넣으면 이 항목을 포함한 KWCAG 33항목을 한 번에 점검해 드립니다. 로그인 없이 한 페이지를 바로 검사해 볼 수 있습니다.